せいかつブログ

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

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

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

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

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

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

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

※現在は、設定していません。

 

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

まちゃりさ
まちゃりさ

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

それでは、どうぞ!

スポンサーリンク

事前準備① 画像の準備

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

ここから手順

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

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

カテゴリー編集ページ

 

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

↑目次に戻る

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

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

 

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

※大幅な変更ではありませんが、設定は自己責任でお願いします

バックアップファイルの取得」をクリックします。

これで準備OKです。

↑目次に戻る

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

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

 

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

 

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

 

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

 

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

①左側にある「カテゴリー」から、表示させる「大カテゴリー」にチェックを入れて、
②[メニューに追加]をクリックします。

カテゴリーではなく、固定ページや投稿記事などを選択しても大丈夫です。

 

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

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

 

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

まちゃりさ
まちゃりさ

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

↑目次に戻る

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

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

 

ワードプレス管理画面の[Cocoon設定]→[Cocoon設定]を選択し、[おすすめカード]タブを開きます。

 

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

 

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

まちゃりさ
まちゃりさ

色々試してみましょう!

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

↑目次に戻る

まとめ

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

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

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

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

ブログ初心者のお役に立てれば、嬉しいです。

 

それでは、今回はこの辺で終わります。

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

おわり。

コメント

SNS

最近の投稿

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