Cocoonナビカードの使い方｜目立たせたい記事をピックアップ表示する方法、リボンのカスタマイズ

Cocoonテーマには、特定の記事やコンテンツを目立たせたいときに便利な『ナビカード』機能が標準搭載されています。ピックアップしたい記事を表示できるだけでなく、リボンの装飾や表示形式の選択など自由度の高いカスタマイズもできます。

新着記事や人気記事の自動表示とは違い、自分で「見せたい記事だけ」を選べるのが大きな特長。

今回はナビカードの基本的な使い方から、リボンを可愛くする方法まで詳しく解説します。まだ使ったことがない方もこれを機にぜひ活用してみてください。

使用例：当サイトのトップページ

Cocoonナビカードの作成手順

まず、ナビカードを作る基本ステップは以下の通りです。

1. メニューを作成する
   • 管理画面の「外観」→「メニュー」から、ナビカードに表示したい記事やページを登録します。
2. ナビカードを呼び出す
   • 作成したメニューを、ブロック・ショートコード・ウィジェットのいずれかで表示します。ここでリボンの設定もできます。
3. カードを横並びにする（必要に応じて）
   • ページレイアウトに合わせて、横並び表示の設定を行います。

それではひとつずつ手順を解説します。

Cocoonナビカード用メニューの作成

ナビカードの表示には、「メニュー」がベースになります。以下の手順でメニューを準備しましょう。

設定手順

1. WordPress管理画面へ移動
   「外観」→「メニュー」に進みます。
2. 新しいメニューを作成
   「新しいメニューを作成しましょう」をクリックし、メニューの名前を入力（例：pickup-menu）。
3. 表示する記事を追加
   • 記事を「投稿」や「固定ページ」から選択し、「メニューに追加」をクリック。
   • 必要に応じて階層を整理します。

リボンを設定する方法

リボンは、ナビカード上部に表示される装飾要素で、目立たせたい記事やカテゴリーを強調するのに便利です。リボンを設定するには以下を行います。

1. メニューアイテムを選択。
2. 「CSS class（オプション）」欄に数字（1～5）を入力。
   • リボンの種類はCocoonのデザイン設定によって異なります（例：色やスタイル）。

使えるリボンの種類

Cocoonでは、以下のリボンの種類が利用できます。

メニューのCSS class（オプション）に表示するリボンの番号を入力します。リボンを表示しない場合は空白のままにします。

1. おすすめ→「1」
2. 新着→「2」
3. 注目→「3」
4. 必見→「4」
5. お得→「5」

設定方法やオプションの詳細はCocoon公式「ナビカードの使い方」をご覧ください。

スニペット（抜粋）を表示するには

ナビカードに記事のスニペット（抜粋）を表示することで訪問者に内容を短く伝えることができます。設定手順は以下の通りです。

1. 「説明」欄に入力
   メニュー設定画面で、該当記事の「説明」欄にスニペットとして表示したい内容を記入。
2. 表示確認
   メニューを保存後、ナビカードに説明が反映されるか確認します。

Cocoonナビカードの呼び出し方

作成したメニューを呼び出す方法は、以下の3つです。

1. ブロックエディタ（Cocoonブロック）
2. ショートコード
3. ウィジェット（[C]ナビカード）

表示方法	主な用途	メリット	デメリット
ブロック	記事や固定ページでの使用	見た目で直感的に設定できる	個別の記事編集が必要
ショートコード	コードで自由に場所を指定	どこでも表示可能	初心者にはやや難しめ
ウィジェット	サイト全体の固定エリアでの使用	一度の設定で複数ページに反映可能	記事内での細かい配置は不向き

おすすめは、ブロックエディタまたはショートコードを使ってページ内に直接表示する方法です。

ブロックを使用する

投稿・または固定ページ内、ブロック機能で簡単にナビカードを表示する方法です。

• 用途：記事や固定ページ内でナビカードを柔軟に配置したい場合。
• 特徴
  • ブロックエディター(Gutenberg）を使う方法。
  • ビジュアル的に操作でき、ナビカードを追加する位置や内容を直感的に設定可能。
  • デザインのプレビューをエディター内で確認できるので、初心者にも使いやすい。
• メリット
  • ブロックエディター内で直接カスタマイズ可能。
  • 記事ごとに個別設定ができる。
• デメリット
  • 記事や固定ページの内容を編集しないとナビカードの内容を変更できない。

ブロックの使い方

ショートコードを使う

ショートコードを使ってナビカードを表示する方法です。

• 用途：ナビカードをコードで簡呼び出したい場合。
• 特徴
  • Cocoonが用意している専用ショートコードを使用する方法。
  • ショートコードを挿入するだけで、どこでもナビカードを表示可能。
  • ショートコードの形式例：※nameには作成したメニュー名を入力します。

[navi_list name="navi-card"]

• メリット
  • 特定の位置にコードを貼るだけでナビカードが表示される。
  • 投稿ページ、固定ページ、ウィジェットのどこでも使える
• デメリット
  • コードを使うため、初心者には少しハードルが高い。
  • 実際の見た目はプレビューを確認しないと分からない。

ショートコードの使い方

カスタムHTML（またはショートコードブロック）に直接入力するか、ツールバーから簡単にショートコードを呼び出すこともできます。

1. 投稿編集画面のツールバーでショートコードのアイコンをクリック
2. ドロップダウンメニューから「ナビカード一覧」を選択
3. ショートコードが表示されるので、必要なオプションを設定する

このようなコードが自動的に呼び出されます。

メニュー名は必須、その他カードタイプや表示オプションを設定できるようになっています。

[navi_list name="メニュー名" type="default" bold="0" arrow="0"]

小さいカードを表示するには

デフォルトの設定が小さいカードになっているためオプションはこのままのコードで表示されます。（オプションtype="defaultを入れた場合と同じです）

大きいカードを表示するには

（navi_listの次に半角スペースをあけて）オプションtype="large_thumb"を追加することで大きなカードで表示できます。

[navi_list name="navi-card" type="large_thumb"]

ウィジェットの[C]ナビカードを使う

ウィジェットを使ってナビカードを表示する方法です。

• 用途：サイト全体の固定部分（サイドバーやフッターなど）にナビカードを表示したい場合。
• 特徴
  • WordPressの「外観」→「ウィジェット」から設定。
  • サイトのサイドバーやフッターなど、ウィジェットエリアにナビカードを配置可能。
  • Cocoon独自の「[C]ナビカード」ウィジェットを選択してメニューを割り当てる。
• メリット
  • 一度設定すれば、複数ページで統一的に表示できる
  • ページごとに編集する必要がない。
• デメリット
  • 設定したウィジェットエリアのみにしか表示できない。
  • 特定の記事内に配置するなどの細かい調整はできない。

ショートコードの使い方

「外観」→「ウィジェット」→「[C]ナビカード」

記事を表示したい場所へ追加します。（例えばページ上部に表示するときは「コンテンツ上部」に追加）

設定画面上で選択するだけで簡単にオプション設定ができます。

Cocoonナビカードの大きなカードを横並びにする方法

ナビカードを横並びにすることで、よりスッキリとしたデザインに仕上げることができます。

ナビカードを横並びにするには２つの方法があります。

Cocoon設定を使う

CSSを使う

こちらはCSSを追加する方法です。

スライドではなく、カラム数を設定してすべての記事を表示したい場合はこちらがおすすめです。

/*ナビカード（大きなカード）を横並びにする*/
.navi-entry-cards.large-thumb{
   display: grid; /* グリッドレイアウトを適用 */
   grid-template-columns: repeat(3, 1fr); /* 3列でレイアウトを構成、各列が同じ幅で1frずつ分配 */
}

 /* 768px以下の画面幅のとき */
@media (max-width: 768px) {
   .navi-entry-cards.large-thumb{
   grid-template-columns: repeat(2, 1fr);
   }
}

横並びにするためにdisplay: grid（グリッドレイアウト）を使い、２カラム・３カラムとも各列が同じ幅になるように均等配置しています。

モバイルで２列にするときは偶数の方がすっきり収まるのでカード数を調整してくださいね。

カラム数をサイドバー簡単切り替えるカスタマイズ

ナビカードを横並びにし、カラム数（２～４カラム）をサイドバーからクリックするだけで選べるカスタマイズを紹介しています。とても便利なのでお試しください。

• ナビカードを「ブロック」で表示した場合のみご利用できます
• ナビカードの他、ブロックで表示する「新着記事」「人気記事」も対象です

Cocoonナビカードのリボンをカスタマイズする方法

リボンの色を変更する

CSSを使うことで、デフォルトのリボンからお好みで色を変えることもできます。

/*ナビカード　リボン色変更*/
.ribbon-color-1 span {
   background-color: #ea7e7e; /*①おすすめ*/
}

.ribbon-color-2 span {
   background-color: #7e95ea; /*②新着*/
}


.ribbon-color-3 span {
   background-color: #f7c114; /*③注目*/
}

.ribbon-color-4 span {
   background-color: #dc669b; /*④必見*/
}

.ribbon-color-5 span {
   background-color: #e9546b; /*⑤お得*/
}

カラーコードを調べるにはこちらが便利です→ Web色見本 原色大辞典

リボンのテキストを変更する

リボンに表示されている「おすすめ」「新着」「注目」「必見」「お得」のテキストを変更したいというケースもあるかもしれません。

その場合はPHPを使いますが、CSSと同じく子テーマへの上書きで変更できます。

Cocoonのフォーラムに詳細が記載されていますので参考にされてください。

この記事にも具体的なコードを記載しておきます。

フォーラム内のコードはget_navi_card_ribbon_tag関数を子テーマでオーバーライドする方法ですが、Cocoonに設定されているget_navi_card_ribbon_captionというフィルターフックを用いる方法がスマートです。（ご指摘いただき、コード入れ替えしました）

//ナビカードのキャプション変更
add_filter('get_navi_card_ribbon_caption', function($caption, $ribbon_no) {
$new_caption = [
'おすすめ',
'新着',
'注目',
'必見',
'お得',
];
if (count($new_caption) >= $ribbon_no) {
$caption = $new_caption[$ribbon_no - 1];
}
return $caption;
},2,10);

キャプション部分を変更したいテキストに変更します。（”シングルクォーテーションは消さないでください）

このコードは、フックシステムを使用し、ナビカードのリボンのキャプションを指定されたテキストに置き換えるための仕組みを追加しています。

CSSもPHPもデリケートな部分なので、慎重に作業を行い、カスタマイズは自己責任でお願いします。

リボンの形を可愛くカスタマイズする

リボンの形をシンプルなデフォルトから、CSSを変更して可愛くカスタマイズしてみます。

デフォルトからスタイルを変更するために必要な部分だけを抜粋しています。

２パターンのCSSを掲載しますね。

Cocoonデフォルトスタイル（斜め掛け）

右向きリボン（左寄せ）

/*ナビカードリボンスタイル変更-１*/
.ribbon:before, 
.ribbon:after {
   content: none;
}

.ribbon{
   width: 100%;
   height:30px;
}

.card-large-image .ribbon-top-left{
   left: -5px;
   top:.5em;
}

.ribbon span{
   transform: none;
   right:initial;
   top: initial;
   width:auto;
   padding:10px 30px 10px 20px;
   clip-path: polygon(0 0, 100% 0, 90% 50%, 100% 100%, 0 100%);
   -webkit-clip-path: polygon(0 0, 100% 0, 90% 50%, 100% 100%, 0 100%);
}

下向きリボン（左寄せ）

/*ナビカードリボンスタイル変更-２*/
.ribbon:before, 
.ribbon:after {
   content: none;
}

.ribbon {
   width: 100%;
   height: 50px;
}

.card-large-image .ribbon-top-left {
   left: 15px;
}

.ribbon span {
   transform: none;
   right:initial;
   top: initial;
   width:auto;
   padding:15px 15px 20px;
   -webkit-clip-path: polygon(100% 0%, 100% 100%, 50% 80%, 0% 100%, 0% 0%);
   clip-path: polygon(100% 0%, 100% 100%, 50% 80%, 0% 100%, 0% 0%);
}

まとめ

Cocoonナビカードは見てほしいピックアップ記事を抜粋して表示したり使い方はいろいろな便利機能です。この記事を参考に使いこなしてサイトを充実させましょう！