Cocoonの「おすすめカード」は、画像付きのおすすめメニューをテーマ内の好きな位置に挿入でき、見て欲しい記事のリンクやカテゴリーを設定することができます。
今回は、Cocoonの「おすすめカードの設定と使い方」についてご紹介します。
![WordPress Cocoon ヘッダー下](https://gungii.com/wp/wp-content/uploads/2022/01/recommend01.png)
![WordPress Cocoon 完成形サイドバー](https://gungii.com/wp/wp-content/uploads/2022/01/recommend02.png)
おすすめカードの設定と使い方(動画)
「おすすめカードの設定と使い方(動画)」は、こちら
おすすめカードの設定
メニューの作成
メニューの選択
WordPress管理画面から「外観→メニュー」を選択します。
![WordPress Cocoon メニュー](https://gungii.com/wp/wp-content/uploads/2022/01/recommend11a.png)
新規メニューの作成
メニュー画面で「新しいメニューを作成しましょう」をクリックします。
![WordPress Cocoon 新規メニューの選択](https://gungii.com/wp/wp-content/uploads/2022/01/recommend12.png)
「メニュー名」を入力して「メニューを作成」ボタンを押します。
![WordPress Cocoon 「メニューを作成」ボタン](https://gungii.com/wp/wp-content/uploads/2022/01/xrecommend13.png.pagespeed.ic.Qx9rQFNTeY.webp)
メニュー項目の追加
「メニュー項目を追加」からおすすめカードを作成したいメニューを選択していきます。
![WordPress Cocoon おすすめカードメニュー](https://gungii.com/wp/wp-content/uploads/2022/01/recommend14.png)
全ての入力を終えたら「メニューを保存」ボタンを押します。
おすすめカードの使い方
おすすめカードの設置(ヘッダー下)
おすすめカードタブの選択
![WordPress Cocoon おすすめカードタブ](https://gungii.com/wp/wp-content/uploads/2022/01/xrecommend21.png.pagespeed.ic.9FwJeOA7zu.webp)
おすすめカードの設定画面の表示
![WordPress Cocoon おすすめカード設定画](https://gungii.com/wp/wp-content/uploads/2022/01/recommend22.png)
おすすめカードの設定
おすすめカードの表示
![WordPress Cocoon おすすめカードの表示](https://gungii.com/wp/wp-content/uploads/2022/01/recommend23.png)
表示方法を選択します。
![WordPress Cocoon おすすめカードのリスト](https://gungii.com/wp/wp-content/uploads/2022/01/xrecommend24.png.pagespeed.ic.PyjsZ--s-R.webp)
メニュー選択
![WordPress Cocoon おすすめカードメニュー](https://gungii.com/wp/wp-content/uploads/2022/01/xrecommend25.png.pagespeed.ic.JTw9O_9-OY.webp)
先ほど作成したメニュー「おすすめカード」を選択します。
![メニューリスト](https://gungii.com/wp/wp-content/uploads/2022/01/recommend26.png)
表示スタイル
マウスカーソルを当てると、イメージが表示されますので、お好きなスタイルを選択します。
![WordPress Cocoon おすすめカード表示スタイル](https://gungii.com/wp/wp-content/uploads/2022/01/xrecommend27.png.pagespeed.ic.E9gZzXmjNb.webp)
カード余白
お好みでチェックして下さい。
![WordPress Cocoon おすすめカード余白](https://gungii.com/wp/wp-content/uploads/2022/01/xrecommend28.png.pagespeed.ic.IHQv7gLtYd.webp)
カードエリア左右余白
お好みでチェックして下さい。
![WordPress Cocoon おすすめカード左右余白](https://gungii.com/wp/wp-content/uploads/2022/01/xrecommend29.png.pagespeed.ic.5-JqhsQl09.webp)
おすすめカードの設定完了
![WordPress Cocoon おすすめカード設定完了](https://gungii.com/wp/wp-content/uploads/2022/01/recommend30.png)
おすすめカードの設置(サイドバー)
ウィジェットの選択
![WordPress Cocoon ウィジェット](https://gungii.com/wp/wp-content/uploads/2022/01/xrecommend31.png.pagespeed.ic.H5sB61qvYm.webp)
ウィジェットの設定
タイトルの入力
![WordPress Cocoon おすすめカードタイトル](https://gungii.com/wp/wp-content/uploads/2022/01/recommend32.png)
メニュー名
先ほど作成したメニュー「おすすめカード」を選択します。
![WordPress Cocoon おすすめカードメニュー名](https://gungii.com/wp/wp-content/uploads/2022/01/xrecommend33.png.pagespeed.ic.iUHtE-deiV.webp)
留意:
ウィジェットの場合は、2列で表示されますので、おすすめカードのメニューを作成される場合は、偶数となる様に作成するのが良いでしょう。(ベストは4つ)
表示スタイル
![WordPress Cocoon おすすめカード表示スタイル](https://gungii.com/wp/wp-content/uploads/2022/01/xrecommend34.png.pagespeed.ic.nhgXXuV0c0.webp)
余白を有効にする
![WordPress Cocoon おすすめカード余白](https://gungii.com/wp/wp-content/uploads/2022/01/recommend35.png)
全ての入力を終えたら「メニューを保存」ボタンを押します。
ウィジェットの設定完了
![WordPress Cocoon おすすめカード設定完了](https://gungii.com/wp/wp-content/uploads/2022/01/xrecommend36.png.pagespeed.ic.Ow2oUQOX7s.webp)
おすすめカードの設定時の注意
おすすめカードは、投稿記事や固定ページ、カテゴリー等を選択してメニューを作成して、そのメニューを好きな位置に挿入するのですが、投稿記事は、アイキャッチ画像を登録していると思いますが、固定ページやカテゴリーページ等には、あまり設定されていないかと思います。
おすすめカードは、画像付きのおすすめメニューを好きな位置に挿入できるという機能の為、画像が登録されていないとおすすめカードに画像表示がされませんので、ご注意下さい。
メニューを作成して「おすすめカードの設定」をしたが、おすすめカードに画像が表示されない。
<ヘッダー下>
![WordPress Coconn ヘッダー下のおすすめカード](https://gungii.com/wp/wp-content/uploads/2022/01/xrecommend41.png.pagespeed.ic.kfiVTizJKj.webp)
<サイドバー>
![WordPress Cocoon サイドバーのおすすめカード](https://gungii.com/wp/wp-content/uploads/2022/01/xrecommend42.png.pagespeed.ic.QhRbFjjcud.webp)
カテゴリーページや固定ページにアイキャッチ画像が登録されていない
![WordPress Coconn おすすめカードのメニュー](https://gungii.com/wp/wp-content/uploads/2022/01/recommend43.png)
「暮らす」のカテゴリーに画像が登録されていない。
![WordPress Cocoon カテゴリーのアイキャッチ画像](https://gungii.com/wp/wp-content/uploads/2022/01/recommend44.png)
カテゴリーにアイキャッチ画像を登録します。
![WordPress Cocoon カテゴリー](https://gungii.com/wp/wp-content/uploads/2022/01/recommend45.png)
おすすめカードがキチンと表示されました。
<ヘッダー下>
![WordPress Cocoon ヘッダー下のおすすめカード](https://gungii.com/wp/wp-content/uploads/2022/01/recommend46.png)
<サイドバー>
![WordPress Cocoon サイドバーのおすすめカード](https://gungii.com/wp/wp-content/uploads/2022/01/recommend47.png)