せいかつ ブログ

【Cocoon/カスタマイズ】ヘッダー下の画像リンク「おすすめカード」を表示させる

この記事は約3分で読めます。

こんにちは、まちゃりさです。

今回は、Cocoonカスタマイズ「おすすめカード」の設定について解説していきます。

「おすすめカード」は、トップページのヘッダーの下にあるリンク付きの画像のことです。

私は、こんな感じ↑にカテゴリごとに画像を表示させています。

各画像にリンクがついていて、クリックすれば、カテゴリ記事に飛べるようになっています。

この記事では、「おすすめカード」設定のやり方を解説していきます★

まちゃりさ
まちゃりさ

一緒に頑張りましょう!!

それでは、どうぞ!

事前準備① 画像の準備

私のように「大カテゴリー」をおすすめカードに表示させたい場合、カテゴリごとに画像を作成しておきます。

ワードプレス管理ページの「投稿」→「カテゴリー」を選択します。

おすすめカードに表示させたい「カテゴリー」の編集ページまで進みます。

ここの[アイキャッチ]欄に、設定したい画像をあらかじめ登録しておきます。

事前準備② テーマのバックアップ

もし、テーマをいじるのが不安だなという方は、あらかじめバックアップを取っておきましょう。

ワードプレス管理画面の[Cocoon設定]→[バックアップ]からバックアップを取得できます。

大幅な変更というわけではないですが、設定は自己責任でお願いします。

これで準備OKです。

「おすすめカード」用メニューの作成

まずは、「おすすめカード」用のメニューを作成する必要があります。

ワードプレス管理ページの「外観」→「メニュー」を選択します。

[新しいメニューを作成しましょう]を押します。

新しいメニューを作成

メニュー名にそれらしい名前を付けて[メニューを作成]を選択します。

左側にある[メニュー項目を追加]から「おすすめカード」に表示させる項目を選択していきます。

「大カテゴリー」にチェックを入れて、[メニューに追加]をクリックします。

固定ページや投稿記事などを選択しても大丈夫です。

右側に「すてる」という大カテゴリが追加されました!

おすすめカードの表示数は偶数の方がきれいに見えるのでおすすめです。

追加できたら、[メニューを保存]をクリックして、メニューを保存します。

まちゃりさ
まちゃりさ

あと少しです!頑張りましょう!

「おすすめカード」の設定

続いて、先ほど作成したメニューを使って、「おすすめカード」を設定していきます。

ワードプレス管理画面の[Cocoon設定]→[Cocoon設定]を選択します。

[おすすめカード]タブを開きます。

[メニュー選択]で、先ほど作成したメニューを指定します。

あとは、プレビューを確認しながら、表示スタイルを設定していきます。

まちゃりさ
まちゃりさ

色々試してみましょう★

設定後、[変更をまとめて保存]を押して変更を反映させることをお忘れなく。

まとめ

今回は、「おすすめカード」を設定する手順をご紹介しました。

思ったより簡単でしたか?

でも、私は最初わからずに四苦八苦でした。。。

Cocoonはわかればなんてことないのですが、わかるまでが結構大変ですね。

ブログ初心者のお役に立てれば、最高です。

最後までお読みいただき、ありがとうございました。

おわり。

コメント

タイトルとURLをコピーしました