副業/仕事

Cocoonでトップページをカテゴリ別に表示する方法を紹介!新着記事一覧の作り方も公開

Cocoonでも トップページを カテゴリ別に表示する方法

多くのブロガーに親しまれるCocoonですが、トップページをカテゴリ別に分けたいと思いませんか?

くま子ちゃん
くま子ちゃん

したいけど、どうやればいいのかわかんない


記事数が増えてくると、トップページにまとまりがなくなり、ごちゃっとした印象になってきますよね。

ジャンルごとに記事を分けて表示できれば、トップページが整頓され、ユーザーも見たい記事が探しやすくなります。

そこで今回は、Cocoonのトップページをカテゴリ別に分ける方法をご紹介します。

この記事のざっくりとした内容
  • カラムとショートコードで簡単にカテゴリ別にできる
  • カテゴリ別に表示する手順
  • 新着記事一覧の作り方


記事が増えてきて、サイトをまとめたい方、ぜひ参考にしてみてください。

なお、すべてCocoonの機能を使っているので、今後有料テーマに切り替える予定の方は一度よくお考えしてから行ってください。

スポンサーリンク

今回作成するカテゴリ別トップページ

作成するトップページの完成形
作成するトップページの完成形

当サイトでは、上記のトップページを作成していきます。

現在のトップページとはデザインが多少異なりますが、作り方は同じです。

このようにカテゴリ別で表示されるページのことを、サイト型と呼びます

サイト型にすると、どこに何があるのかすぐにわかるので行きたいページに1クリックで飛べます。

くま子ちゃん
くま子ちゃん

でも、CSSとかプログラミングとか必要なんじゃない?
難しそう

やまはな
やまはな

実はこれ、Cocoonの機能を使っただけでCSSとか全く使ってないよ

CSSはアイキャッチとタイトルなどを非表示にするのに使いました。それ以外は見出しを弄っただけで、基盤はすべてCocoonで作っています。

サイト型トップページを作るのに必要なもの

サイト型トップページを 作るのに必要なもの

トップページをカテゴリ別に表示するのに必要な機能は、以下の通りです。

  • 専用コード
  • カラム
  • ボタン

Cocoonを使用している方には、どれも馴染みのあるものでしょう。

専用コードは下記のサイトを参考にしています。


すでにCocoonを使用している方には、おなじみの機能ですね。

では、次はカテゴリー別に表示する手順をご紹介します。

スポンサーリンク

トップページをカテゴリー別に表示する手順

トップページを カテゴリー別に表示する手順

サイト型にする手順は以下の通りです。

  1. 固定ページの作成
  2. いらない項目を非表示にする
  3. カラムで分割表示
  4. ショートコードでカスタマイズ
  5. 各カテゴリーページに移動するためのボタンを作成
  6. 作成したページをトップページに変更

今回は、カテゴリ別に表示する方法をご紹介するので、デザインについては触れません。

上記の手順を見ただけで、なんとなくわかる方もいるのではないでしょうか?

それでは、詳しく説明していきます。

手順1:固定ページの作成

トップページになる固定ページの作成です。すでに作成したことがあるとは思いますが、念のため説明しますね。

まず、サイドメニューにある固定ページに移動します。そして、新規追加で新しいページを作成。

ページの名前は、「やまはなブログホーム」にします。

固定ページ作成中
固定ページ作成中

パーマリンクは、”home”がいいでしょう。アイキャッチとSEOも設定します。固定ページの基本的な設定は、これで終わりです。

手順2:いらない項目を非表示にする

次に、アイキャッチとタイトル、フォローボタンなどを非表示にしたいので、サイドメニューの外観からテーマエディターに移動します。

スタイルシート(style.css)のエディターを開いたら、非表示にするCSSを打ちましょう。一番下に打てば大丈夫です。

下記のサイトにCSSが載っているので、コピーして貼り付けてください。


サイトに載っているCSSは、すべての固定ページに対応しているものなので、”.page”という単語を消してください。

トップページだけに対応したCSSに変化します。

CSSを貼り付けて、スタイルシート(style.css)を保存したら、先ほど作成した固定ページに戻ります。

そして、サイトをプレビューで表示してみましょう。表示が消えていたら成功です。

手順2:カラムで分割表示

次はカラムを使って、カテゴリを2分割で表示できるようにします。1カラムで表示したい方は、次の手順に移動してください。

Cocoonレイアウトカラムを選択します。

Cocoonのカラム
Cocoonのカラム

これを必要な分だけ、作りましょう。

そして、1ブロックずつ表示したいカテゴリの名前を記入します。

各ブロックに見出しで入力
見出しを使って各ブロックにカテゴリの名前を入力

3カラムを使う場合も、同じように行ってください。

手順3:ショートコードを入力してカスタマイズ

カテゴリの名前を打ったら、その下にCocoonのショートコードを入力します。

Cocoonの専用コードを入力
Cocoonの専用コードを入力

今回は、このようなコードにしました。

[“new_list” count=”5″ cats=”カテゴリーページのID” type=”default” children=”0″ post_type=”post”]

カテゴリーページのカテゴリーにカーソルを合わせると、URLが下に出てきます。

そのURLの「tag ID=」の後の数字を”カテゴリーページのID”に入れてください。

カテゴリーページのアニメ/マンガにカーソルを合わせている
カテゴリーページのアニメ/マンガにカーソルを合わせる

入力が完了したら、プレビューしてみましょう。すると、こんな感じになります。

ショートコードを打った時のプレビュー
ショートコードを打った時のプレビュー
くま子ちゃん
くま子ちゃん

これで完成?

やまはな
やまはな

あともう一工夫だよ

手順4:ボタンを作成して各カテゴリーページにアクセスできるようにする

コードの下に、cocoonブロックにあるボタンを追加します。

URLに行きたいカテゴリーページを入れ、色や形を自由にカスタマイズしてください。

Cocoonのボタンを追加
Cocoonのボタンを追加

プレビューを表示して、ボタンをクリックしてみます。ページが移動したら成功です。

これで、サイトのトップページの制作が完了しました。あとは、ページを公開しましょう。

手順5:Cocoon表示設定に移動して作成したページをホームに変更

最後に、作成した固定ページをトップページに置き換えましょう。

設定から、表示設定に移動します。そして、ホームページの表示固定ページにして、作ったページに変更して保存します。

表示設定でトップページを変更
表示設定でトップページを変更

実際にサイトのホームに画面を切り替えて、作成したページに切り替わったら設定は終わりです。

これで、サイト型トップページになりました。

スポンサーリンク

おまけ:新着記事一覧の作り方

新着記事一覧の作り方

おまけですが、新着記事一覧の作り方をご紹介します。

まずは、固定ページで新着記事を表示するページを作りましょう。当サイトでは、パーマリンクは”newscontents”にしています。

あとはタイトルとSEOを設定したら、公開しましょう。本文や見出しは、作らなくて大丈夫です。

そして、表示設定に移動し、投稿ページを先ほど作ったページに変更します。

表示設定で新着記事一覧を表示する
表示設定で新着記事一覧を表示する

すると、何もなかったページに新着記事が表示されるようになります。

あとは、お好きなところにページを設置してください。

まとめ:まだ改善点はあるけど、これだけで十分映える

これだけで十分映える

ぶっちゃけサイトの検索流入で来た人は、サイトのトップページなんか見ません。

しかし、整理されたトップページは、サイト内の巡回もよくなります。

当サイトも、改善点はたくさんありますが、これを基盤に使いやすいサイトにしていきます。

ブログ内が乱雑してきたなと思っている方、ぜひ参考にしてみてください。

コメント