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

wordpress
出典:https://www.pexels.com/
この記事は約5分で読めます。
Sponsor Link
Sponsor Link

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

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

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

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

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

画像は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;
}

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

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

.navi-card-wrap:after {
  |
}

この部分を削除すれば消えます

まとめ

このショートコードを使うことで自分の読んでもらいたい記事や
人気はあるけど人気記事ウィジェットのランク外になってしまい出てこない
などの記事を個別表示させることが出来るので便利だと思います

当サイトのように2カラムや3カラムを使い表示させることも簡単なので
このショートコードを使うことで回遊率を高めることが出来るんじゃないかと思います^^

大元?はこちらのサイトのコードとのことなので、Cocoonサイトと一緒に見てみると良いかも知れません

[share]

タイトルとURLをコピーしました