Cocoonには新着記事や人気記事を簡単に表示できる機能がありますが、
今回ご紹介するのは『ナビカード』。
- Cocoonの標準機能
- 表示させる記事をピップアップできる
- リボンをつけることができる（５種類）
- ショートコードまたはウィジェットどちらでも使うことができる
Cocoonの機能のひとつで、特に表示したい記事をピンポイントで選べるのはとても便利なのです。
今回のカスタマイズをするとこのように自分で選んだ記事を横に５枚並べることができます。（何枚でもよいのですがリボンが５種類なのでここでは５枚にしています）
設定の他に横並べにする方法、リボンの色を変える方についても書いていきますのでご覧ください。
ナビカードを作成する手順
- Step1メニューを作成する「外観」→「メニュー」画面で「新しいメニューを作成しましょう」リンクから新規メニューを作成します。
- 表示する記事を選択
- リボンの有無・種類を指定
- Step2ナビカードをショートコードで呼び出す、またはウィジェットを利用する
オプションで表示する記事数、カード形式などを指定します。
- Step3カードを横並びにする
必要がある場合のみCSSを追加します
- 完成
メニュー作成／表示する記事とリボンの種類を設定する
外観→メニュー→「新しいメニューを作成しましょう」をクリックし新規に作成します。
- メニュー名（英字がベスト）
- 表示させたい記事を選択（今回は５記事）
- リボンを表示させるにはCSS class（オプション）に１～５いずれかの数字を入れます。
CSS class（オプション）欄がない場合は、画面右上にある表示オプションを開いて「CSS クラス」にチェック✓を入れれば表示されます。
- 新着
- おすすめ
- 注目
- 必見
- お得
設定方法やオプションの詳細はCocoon公式「ナビカードの使い方」をご覧ください。
ナビカードを呼び出す方法は２つ
上記で設定したナビカードを表示するためには２つの方法がありますのでご紹介します。
１）ショートコードで呼び出す
ナビカードを呼び出すショートコードはこのように表記します。
[navi_list name="navi-card"]“”の中にさきほど作成したメニュー名を入れます
小さいカードを表示するには
デフォルトの設定が小さいカードになっているためオプションはこのままのコードで表示されます。（オプションtype=”default”を入れた場合と同じ）
[navi_list name="navi-card"]
大きいカードを表示するには
（半角スペースをあけて）オプションtype=”large_thumb”を追加することで大きなカードで表示することができます。
[navi_list name="navi-card" type="large_thumb"]
２）ウィジェットの[C]ナビカードを利用する
ショーコードの他にウィジェットでも利用することができます。（こちらの方が操作は簡単ですが、なぜか表示設定が効かないためショートコードをおススメします）
外観→ウィジェット→[C]ナビカード
記事を表示したい場所へ追加します。
（例えばページ上部に表示するときは「コンテンツ上部」に追加）
設定画面上で選択するだけで簡単にオプション設定をができます。
- メニュー名：ドロップダウンから選択する
- 表示タイプ
- タイトルを太字にする
- 矢印を表示する
例）トップページの上部にだけ表示する場合
- 1ウィジェットでカスタムHTMLを追加外観→ウィジェット→「カスタムHTML」を「コンテンツ上部」に追加。
- 2カスタムHTMLにショートコードを記述
[ navi_list name=”メニュー名” ]のコードを記述します
- 3表示方法を設定する
そのままだと全てのページに表示されてしまうのでトップページに限定します。
表示設定：「チェック・入力したページで表示」→「トップページのみ」にチェックを入れる
これで設定はおしまい。カードを横に並べたいなー。
大きなカードを横並びにする／CSS使用
そのままでは縦一列に並ぶので横並びにしたい、そんなときはCSSを追加します。（※子テーマを使用しましょう）
Cocoon公式にこの方法は載っていませんので参考にしてみてください。
/*ナビカード（大きなカード）を横並びにする*/
.widget-entry-cards.large-thumb{
display: flex;
flex-wrap: wrap;
}
.navi-entry-cards.large-thumb a{
width:calc(100% / 5);/*パソコンでは均等に５枚並べる*/
}
/*834px以下*/
@media screen and (max-width: 834px){
.navi-entry-cards.large-thumb a{
width:calc(100% / 2 );/*スマホでは横２列に並べる*/
}
}
CSSでflexプロパティを使い横並びにし、幅は１００%の中で均等にカードを並べるように計算しています。（ここで使っているcalc()関数はとても便利！）
スマホで２列にするときは偶数の方がすっきり収まるかと思いますので記事数を調整してくださいね。
以上で完成です。お疲れさまでした。
リボンの色を変更する方法
CSSを使えば、デフォルトのリボンからお好みで色を変えることもできます。
こちらの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親テーマのスタイルシートを見てみると、リボンを作る際にわいひらさんが参考にされたサイトを紹介されていました。
出典：Cocoonスタイルシート (style.css)
リボンの仕組みを知りたい方はチェックしてみるとナビカード以外でも応用できるかと思います^^
See the Pen Demo: Pure CSS corner ribbon by Naoya (@nxworld) on CodePen.
さいごに
Cocoonの「おすすめカード」機能を使ってナビカードを表示した場合、リボンが表示されません。
ショートコードかウィジェットの[C]ナビカードを利用しましょう。
ナビカードは記事の中表示させたり使い方はいろいろ、便利機能です。使いこなしてサイトを充実させましょう～。
Comment