【Cocoon】カスタマイズ｜ナビカード編

Cocoon 1.6.7～追加されたナビカードが便利ですね
今までの新着・人気記事のカードとは違い自分の表示させたいリンクをカード表示することが出来ます

意図した記事一覧を作成できる「ナビカード」ショートコードの使い方

サイト訪問者を的確に誘導するために、意図したリンクリストを作成するショートコードの使い方です。

今回はこのショートコードについてのカスタマイズ記事です

Index

ショートコードを使った表示
下準備
1. メニューを作る
ショートコード
カスタマイズ
1. shortcodes.php
2. CSS
まとめ

ショートコードを使った表示

既に変更したものが適応されていますが、このように表示されます

現在はリボン＆シングル矢印は使っていません

画像はPCカテゴリにポストした記事で表示させている物です
SNSボタン上ウィジェットにカスタムHTMLを使用し2カラムにして表示させています

表示設定をチェック・入力したページで表示にしカテゴリを指定しています

下準備

まずこのショートコードを使うための下準備をします
出力部分やスタイルシートなどは既に組み込まれているので難しいことはありません

メニューを作る

まずは外観メニューを開き新規メニューを作成します
この時付けるメニュー名がショートコードで使うメニュー名になるので分かりやすい物にしましょう
作成したら表示オプションから下の画像のように CSSクラス、説明にチェックを入れておきます

あとは表示させたい記事などをメニューに追加するだけです

現時点で対応しているタイプは固定ページ、投稿、カテゴリーの3つとなっています

追加した記事などはこのように表示の設定をすることが出来ます

ナビゲーションラベルがカードに表示されるタイトル
CSSクラスがリボンを付けるかどうか
説明が記事などに対する説明文になります

追加をしたら保存をし、作りたい分だけ繰り返す感じです

Sponsor Link

ショートコード

表示の部分で貼った画像にコードが載っていますが

[ navi name="メニュー名" ]

基本コードはこの形です
ここに区切り線やボーダーなどを付けるtype=○オプションがあります

[ navi name="メニュー名" type=2 ]

当サイトで使っているものはボーダーが付くこの形です
自分のサイトに合うものを選びましょう

カスタマイズ

ここからは当サイトで使用しているカスタマイズです

shortcodes.php

リボンの文字変更＆1つ追加をしました

// おすすめ・新着記事　名称を変えれば何にでも使える（注目・必見・お得etc）
if ($osusume == "1"){
  $osusume = '<div class="ribbon ribbon-top-left ribbon-color-1"><span>'.__( 'おすすめ', THEME_NAME ).'</span></div>';
}
if ($osusume == "2"){
  $osusume = '<div class="ribbon ribbon-top-left ribbon-color-2"><span>'.__( 'こちらも', THEME_NAME ).'</span></div>';
}
if ($osusume == "3"){
  $osusume = '<div class="ribbon ribbon-top-left ribbon-color-3"><span>'.__( '時間があれば', THEME_NAME ).'</span></div>';
}

リボンの数は無限に増やせるかも？まあそんなに使うことは無いと思いますがw
注意点はリボンの長さを考えると6文字程度にしないとはみ出るかなーって所ですかね

あと同じようにこの部分を変更する場合、親テーマから子テーマへコピーしてそちらを変更しましょう

このようにローカルに保存しておいてFTPで親テーマのlibへ上書きをする感じです

CSS

次はスタイルシート

マージンの調整

.navi-card-wrap .navi-card-thumb {
  float: left;
  margin: 5px 0 0 1px;
  width: 120px;
}
.navi-card-wrap .navi-card-content {
  margin: 0 24px 0 130px;
}

フォントの一纏めとカラー変更

.navi-card-wrap .navi-card-title {
  margin: 2px 0 6px;
  font: 700 1em "M PLUS Rounded 1c";
  color: #6c6c6c;
}
.navi-card-wrap .navi-card-snippet {
  margin: 0px 0 2px;
  font: 400 0.9em "M PLUS Rounded 1c";
  color: #7c7c7c;
}

リボン部分の変更

.ribbon:before, .ribbon:after {
  position: absolute;
  z-index: 0;
  content: '';
  display: block;
  border: 4px solid #8b99a2;
}
/* カラー変更と透過処理 */
.ribbon-color-1 span {
  background-color: #a5bfef;
  opacity: .9;
}
.ribbon-color-2 span {
  background-color: #89cce6;
  opacity: .9;
}
.ribbon-color-3 span {
  background-color: #b8b7d6;
  opacity: .9;
}

以上の変更をしたものが最初に貼った画像になります
必要な部分を自分のサイトに合わせて変更するだけですのでコピペで使えると思います

追記当サイトと同じようにシングル矢印を消したい場合は