Cocoonでピックアップ記事表示するならナビカード！横並び、リボンのスタイルを可愛くカスタマイズ

今回ご紹介するのはCocoonの『ナビカード』。

自分のサイトに、特定の記事やコンテンツを目立たせるためにピックアップ記事を表示する方法です。Cocoonの標準機能ですが、使ったことがない方も多いのはでないでしょうか。

Cocoonには新着記事や人気記事を簡単に表示できる機能がありますが、ざっくりとしたグループ分けではなく、特に表示したい記事をピンポイントで選べるのはとても便利です。

今回のカスタマイズをすると、このように自分で選んだ記事を横に並べられます。（何枚でもよいのですが、リボンが５種類あるのでここでは５枚すべて表示しています）

ちなみに、当サイトのトップページの記事はこのナビカードを使って表示しています。リボンのデザインはカスタマイズしたもので、当記事でも作り方でも紹介しています。

可愛いリボンが簡単につけられて便利♪リボンの色や形はCSSで変更することもできます。

この記事では設定方法の他に、カードを横並びにする方法、リボンのデザインとテキストを変える方について、具体的に解説しますのでご覧ください。

ナビカードを表示する	ナビカードを横に並べる
リボンの色を変える	リボンの文字を変える
リボンを可愛く

Cocoonナビカードを作成する手順

注意点として、Cocoonの「おすすめカード」機能を使ってナビカード用のメニューを選択した場合、記事は表示されますがリボンが表示されません。呼び出すにはブロック、ショートコード、ウィジェットの[C]ナビカードのいずれかを利用しましょう。

それではひとつずつ手順を書いていきますね。

メニューを作成する／Cocoonナビカードで表示する記事とリボンの種類を設定

ナビカードを使う事前準備として、メニュー登録が必要です。

管理画面→「外観」→「メニュー」→「新しいメニューを作成しましょう」をクリックし新規作成します。

使えるリボンの種類

メニューのCSS class（オプション）に入力する数字は下記の通り。リボンを表示しないときは空白でOKです。

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

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

Cocoonナビカードを表示する方法

上記でメニュー設定したナビカードを表示するためには３つの方法があります。

1. ブロック
2. ショートコード
3. ウィジェットの[C]ナビカード

ブロック

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

ショートコード

ナビカードをショートコードで表示するにはこのように表記します。

[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]ナビカードを利用する

他にウィジェットでも利用できます。

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

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

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

例）Cocoonナビカードをトップページの上部に表示する場合

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色見本 原色大辞典

Cocoonナビカードのリボンのテキストを変更する方法

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

その場合は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もデリケートな部分なので、慎重に作業をおこない、カスタマイズは自己責任でお願いします。

Cocoonナビカード／リボンの形を可愛くカスタマイズ

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

適当にいじって作ったもので綺麗なCSSではないかもしれません。デフォルトからスタイルを変更するために必要な部分だけを抜粋しています。

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

右向きリボン（左寄せ）

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

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

.card-large-image .ribbon-top-left{
	left: 0;
	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%);
}

さいごに

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