【cocoon】記事カテゴリーをトップページに表示させる方法

こんにちは、わぁちゃんです。

無料だしプラグイン入れなくてもいろいろな機能が使えて扱いやすいcocoonを今も使用しているのですが、よく「デザイン凝ってますけど、テーマは有料テーマですか?」と聞かれます。

有料テーマじゃなくて無料テーマなのよ!とお伝えしているのですが、なぜいつも有料テーマかと思われるか考えてみたところ、トップページにあるカード表示のデザインが原因かな?というところに行きつきました。

今回はトップページに記事カテゴリーを表示させる方法について紹介していきます。

 

 

わぁちゃん
わぁちゃん

こんな感じのやつだよ!

これも、cocoon設定から簡単にできるから初心者でも大丈夫!

 

 

 

 

 

カテゴリーのアイキャッチ画像を設定する

まず、トップページに表示させたいカテゴリーのアイキャッチ画像を設定していきます。

 

アイキャッチ画像がまだ作れていない方は、このタイミングで作っちゃいましょう!

 

 

 

投稿→カテゴリー

 

投稿にある「カテゴリー」を開きます。

すると、投稿記事を作成した際にカテゴリー分けしているものの一覧が出てきます。

トップページに表示したいカテゴリーが決まったら、そのカテゴリー名の下にある「編集」をクリックします。

 

もし、投稿記事でカテゴリー分けしていない方は、「新規カテゴリーの追加」でできるので、トップページに載せたいものを作ってみてください。

 

 

編集でアイキャッチ画像を作成する

 

スクロールすると、「アイキャッチ」という項目があるので、アイキャッチの「選択」をクリックしてカテゴリーのアイキャッチ画像を設定します。

設定したら、一番左下に「更新ボタン」があるので、更新して保存してください。

 

 

わぁちゃん
わぁちゃん

ここで設定したアイキャッチ画像は、こんな感じに表示されます。

 

 

 

メニューを作成する

カテゴリー画像の設定ができたら、次はメニューを作成します。

ダッシュボードの外観からメニューを開いてください。

cocoon設定から設定する際、メニューをつかうので事前に作っておきます。

おすすめカードを作る

 

「新しいメニューを作成しましょう」というところから、新規メニューを作っていきます。

メニュー構造にある「メニュー名」におすすめカードと入力し、メニューを作成。

そして、カテゴリーからトップページに表示したいカテゴリーを選びましょう。

 

わぁちゃん
わぁちゃん

こんな感じになればOKです!

 

 

もしトップページを固定ページや特定の投稿にしたい場合は、ここでその記事を選択してください。

 

メニュー設定は、どこにもチェック入れずに、メニューを保存します。

 

cocoon設定で完了

最後にここまで準備してきたものをcocoon設定で反映させます。

cocoon設定→おすすめカード

 

cocoon設定より「おすすめカード」を開きます。

 

 

 

 

おすすめカードの表示

このカテゴリーをどこで表示するか設定できます。

わたしは全ページで表示していますが、見にくい方はフロントページのみでもいいかも。

 

メニュー選択

ここでのメニュー選択では、必ずさっき事前につくっておいた「おすすめカード」のメニューを設定してください。

でないと、せっかくアイキャッチ画像の設定をしたのに表示されなくなってしまいます。

 

表示スタイル

カテゴリーの表示の仕方を設定します。

固定ページや投稿ならタイトルなどあってもいいかもしれませんが、カテゴリーは画像で目立たせたいので、私は画像のみにしています。

 

カード余白/カードエリア左右余白

アイキャッチ画像に余白をつけるかどうかということです。

余白をつけると、アイキャッチ画像ごとの間隔が広くなります。

私はカード余白はつけていますが、カードエリア左右余白はつけていません。

 

全てを設定したら、「変更をまとめて保存」を忘れずに押してくださいね。

 

これで終了です!

サイトトップページで確認してみてください。

 

 

まとめ《初心者でも3工程でできる》

記事カテゴリーをトップページに表示するのは、準備も含めて3工程でできました。

 

  1. アイキャッチ画像を作成して、設定する
  2. メニューを作成する
  3. cocoon設定のおすすめカードに設定する

 

カテゴリー記事ではなく、記事単体での設置もできるので、プロフィールや絶対見てほしい記事を固定するのにも使用できます。

初心者でも簡単に設定ができたので、デザインを変化させたい方はぜひ参考にしてみてください。

 

 

SEOに強くておしゃれなサイトを作りたい欲張りさんにおすすめ!クールでおしゃれなデザインのWordpressテーマ『THE THOR』  着せ替え機能で初心者でも簡単におしゃれなサイトを作成可能。個人ブログから上位表示を狙ったサイトまで、幅広いシーンで使えます。
【THE THOR(ザ・トール)】