【WordPress】Cocoonでブログにおすすめカード（ピックアップコンテンツ）を作る方法

応援クリックしていただけると励みになります！

ブログ環境について

あろうのブログ環境は、以下の通りです。

• WordPress（ワードプレス）を使用
• cocoon（コクーン）テーマを使用

おすすめカード（ピックアップコンテンツ）の作り方

記事の選び方

「外観」から「メニュー」に入り、「新しいメニューを作成しましょう」をクリックします。
メニュー名は自分の好きなようにつけてください。
メニュー名を入力したら、右下の「メニューを作成」をクリックします。

次に、「投稿」の右の▼をクリックして、直接誘導したいブログ記事4つに✔を入れ、「メニューに追加」をクリックします。

「メニューに追加」をクリックすると、下図のように、選んだ記事がメニュー構造に反映されます。
実際のブログ上で表示させたい順番にドラッグして並べ替えます。

このコンテンツで選択する数は4つがおすすめです。
パソコンでは横に4つ並んで表示されますが、スマホの場合だと上段に2つ、下段に2つという表示のされ方をします。
そのため、もし3つで設定してしまうと、スマホの画面では謎の空白が表示されてしまうのです。
メニュー設定の欄には何もチェックをつけずに、右下の「メニューを保存」をクリックします。

記事の表示設定について

Cocoon設定のCocoon設定をクリックし、「おすすめカード」をクリックします。

続いて、おすすめカードの設定をしていきます。

おすすめカードの表示

デフォルトは「表示しない」になっています。「全ページで表示」や「フロントページのみで表示」などいくつか好捕があるので、自分の好みのものを選びます。
なお、後で変更もできますので、どれを選んだらよいかわからない場合は「全ページで表示」を選ぶのが無難です。

メニュー選択

さきほど、「記事の選び方」でつけたメニュー名を選択します。

表示スタイル

4種類の表示スタイルがあります。
それぞれのスタイル名の左にある写真マークにカーソルを合わせるとプレビューが表示されますので、気に入ったスタイルを選択します。

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

これも、好みで設定します。
余白があるバージョンとないバージョン。それぞれ設定して実際のブログでチェックしてみましょう。
設定を終えたら、画面下の「変更をまとめて保存」を忘れずにクリックしましょう。

なお、トップに出てくる画像は、各記事のアイキャッチ画像です。