【Cocoon】ナビカードのリボンを追加・変更するカスタマイズ

Cocoonにはナビカードという簡単に好みのブログカード一覧を作れる機能があります。

ナビカードは次のようなブログカードへリボンをつけることができます。

ナビカードのリボンはいくつか種類が用意されていますが、

テキストや色がブログの雰囲気とチョット合わないから変えたい

と思ったことはありませんか？

今回はリボンを自分好みにアレンジするカスタマイズを紹介します。

既存リボンの色を変えたい（CSS）
既存リボンのテキストを変えたい（PHP）
テキストと色を新しく追加したい（CSS・PHP）

それぞれを解説します。目次から自分のやりたいカスタマイズを選択してください。

更新履歴

2022/4/17: コピペで再現できなくなっていた一部PHPを修正しました。

ナビカードとは
既存リボンの色を変えたい
1. 完成イメージ
2. カスタマイズ方法
既存リボンのテキストを変えたい
1. 完成イメージ
2. カスタマイズ方法
テキストと色を新しく追加したい
当サイトで掲載しているソースコードについて
1. 著作権およびライセンス
2. 免責事項
まとめ
ブログカスタマイズ関連のおすすめ記事

ナビカードとは

ナビカードは好きなカテゴリや記事をリスト形式で表示できるCocoonの機能です。

Cocoonで用意されたリボンを付けることもできます。

公式の記事で詳しく紹介されています。

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

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

既存リボンの色を変えたい

テキストを変えずにリボンの色だけを変えたい場合はCSSの編集だけです。

完成イメージ

カスタマイズ前

カスタマイズ後

カスタマイズ方法

カスタマイズの手順は次の4ステップです。

カスタマイズ手順

STEP1
WordPress管理画面でstyle.cssエディタを開く
STEP2
CSSをコピーする
STEP3
style.cssに貼り付ける
STEP4
保存を押す

WordPress管理画面からテーマエディターを使って直接style.cssを編集する手順です。

テーマエディターの使用には注意が必要です。可能であればFTPソフトを使いましょう。

WordPress管理画面でstyle.cssエディタを開く

まず普段通りにWordPressにログインしてください。

次の順番で画面を移動してください。

画面遷移

外観→テーマエディタ→style.css

外観にマウスを当てるとサブメニューが出ます。テーマエディタを選択してください。

子テーマ（Cocoon-child）のstyle.cssを開いてください。（画像付きの手順）

CSSをコピーして編集する

色を変えたいCSSをコピーしてください。Copyボタンを押すと全てコピーできます。

そらしど

分からなければ全部コピーでも大丈夫です。

カラーコードを好きな色に変更します。（簡易的な色探し用フォーム）

/* おすすめ */
.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;
}

Copy

style.cssに貼り付ける

先ほど開いたテーマエディタのstyle.cssに貼り付けます。

貼り付ける場所はファイル内の任意の場所ですが、他のコードの間に貼り付けないように注意してください。（画像付きの貼り付け箇所例）

保存する

画面下部にあるファイルを更新ボタンを押してください。

緑色の枠で「ファイルの編集に成功しました。」と表示されたら完了です。

既存リボンのテキストを変えたい

完成イメージ

カスタマイズ前

カスタマイズ後

カスタマイズ方法

リボンのテキストを変える場合はPHPの編集が必要です。

テーマエディターからも編集できないことはありませんが、PHPは特に注意が必要のためおすすめしません。

また、function.phpの編集は「Code Snippets」と呼ばれるプラグインを使用するのがおすすめです。

function.php用のコードを手軽に管理できる「Code Snippets」の使い方

この記事ではWordPressのプラグイン「Code Snippets」を使うメリットやデメリットと簡単な使い方を紹介しています。function.phpを直接編集する必要がなくなるため、サイトのカスタマイズがより手軽になります。PHP初心者から慣れている方までおすすめです。

ここではfunction.phpを編集する手順を紹介します。

カスタマイズ手順

STEP1
サーバーにアクセスする
STEP2
function.phpダウンロードする
STEP3
function.phpを編集する
STEP4
子テーマにfunction.phpをアップロードする

サーバー操作の手順は私が使っているConoHa WINGを例に進めます。

ファイルマネージャーの操作方法を見ながら進めるとスムーズに進められます。

サーバーにアクセスする

ConoHa WINGにログインします。

画面遷移

サイト管理→ファイルマネージャー（ログインが求められる場合があります）

function.phpをダウンロードする

次のフォルダへ移動します。

ファイルの場所

wp-content/themes/cocoon-child-master/

function.phpをダウンロードします。（操作方法がわからない場合はこちら）

cocoon-child-masterがない場合は子テーマをダウンロードしインストールしてください。

function.phpを編集する

下記コードを全てコピーして、ダウンロードしたファイルの一番下に貼り付けてください。

//リボンタグ取得関数　文字変更用	
function get_navi_card_ribbon_tag($ribbon_no){
  $caption = null;
  // おすすめ・新着記事　名称を変えれば何にでも使える（注目・必見・お得etc）
  switch ($ribbon_no) {
    case '1':
      $caption = __( 'おすすめ', THEME_NAME );
      break;
    case '2':
      $caption = __( '新着', THEME_NAME );
      break;
    case '3':
      $caption = __( '注目', THEME_NAME );
      break;
    case '4':
      $caption = __( '必見', THEME_NAME );
      break;
    case '5':
      $caption = __( 'お得', THEME_NAME );
      break;
  }
  $tag = '';
  if ($caption){
    $caption = apply_filters('get_navi_card_ribbon_caption', $caption, $ribbon_no);
    $tag = '<div class="ribbon ribbon-top-left ribbon-color-'.$ribbon_no.'"><span>'.$caption.'</span></div>';
  }
  return $tag;
}

Copy

コード内のシングルコーテーション（’）に囲まれた「おすすめ」等テキストを好きな内容に変更してください。

推奨文字数は5～6文字です。アルファベットは大文字のみです。

function.phpをアップロードする

子テーマに編集したファイルを以下のフォルダにアップロードします。

ファイルの場所

wp-content/themes/cocoon-child-master/

バックアップを選択することを忘れないでください。

ナビカードを確認して反映されていたら完了です。

テキストと色を新しく追加したい

リボンは色とテキストで編集するファイルが異なります。

リボンの色…CSS
リボンのテキスト…PHP

完成イメージ

カスタマイズ前

カスタマイズ後

カスタマイズ方法（CSS）

CSSカスタマイズの手順は次の4ステップです。

カスタマイズ手順

STEP1
WordPress管理画面でstyle.cssエディタを開く
STEP2
CSSをコピーする
STEP3
style.cssに貼り付ける
STEP4
保存を押す

WordPress管理画面からテーマエディターを使って直接style.cssを編集する手順です。

テーマエディターの使用には注意が必要です。可能であればFTPソフトを使いましょう。

WordPress管理画面でstyle.cssエディタを開く

まず普段通りにWordPressにログインしてください。

次の順番で画面を移動してください。

画面遷移

外観→テーマエディタ→style.css

外観にマウスを当てるとサブメニューが出ます。テーマエディタを選択してください。

子テーマ（Cocoon-child）のstyle.cssを開いてください。（画像付きの手順）

CSSをコピーして編集する

色を変えたいCSSをコピーしてください。Copyボタンを押すと全てコピーできます。

そらしど

分からなければ全部コピーでも大丈夫です。

カラーコードを好きな色に変更します。（簡易的な色探し用フォーム）

/* 追加１ */
.ribbon-color-11 span {
  background-color: #56CCF2;
}

Copy

style.cssに貼り付ける

先ほど開いたテーマエディタのstyle.cssに貼り付けます。

貼り付ける場所はファイル内の任意の場所ですが、他のコードの間に貼り付けないように注意してください。（画像付きの貼り付け箇所例）

保存する

画面下部にあるファイルを更新ボタンを押してください。

緑色の枠で「ファイルの編集に成功しました。」と表示されたら完了です。

カスタマイズ方法（PHP）

テーマエディターからも編集できないことはありませんが、PHPは特に注意が必要のためおすすめしません。

カスタマイズ手順

STEP1
サーバーにアクセスする
STEP2
function.phpダウンロードする
STEP3
function.phpを編集する
STE P 4
子テーマにfunction.phpをアップロードする

サーバー操作の手順は私が使っているConoHa WINGを例に進めます。

ファイルマネージャーの操作方法を見ながら進めるとスムーズに進められます。

サーバーにアクセスする

ConoHa WINGにログインします。

画面遷移

サイト管理→ファイルマネージャー（ログインが求められる場合があります）

function.phpをダウンロードする

次のフォルダへ移動します。

ファイルの場所

wp-content/themes/cocoon-child-master/

function.phpをダウンロードします。（操作方法がわからない場合はこちら）

cocoon-child-masterがない場合は子テーマをダウンロードしインストールしてください。

function.phpを編集する

下記コードを全てコピーして、ダウンロードしたファイルの一番下に貼り付けてください。

//リボンタグ取得関数　文字変更用	
function get_navi_card_ribbon_tag($ribbon_no){
  $caption = null;
  // おすすめ・新着記事　名称を変えれば何にでも使える（注目・必見・お得etc）
  switch ($ribbon_no) {
    case '1':
      $caption = __( 'おすすめ', THEME_NAME );
      break;
    case '2':
      $caption = __( '新着', THEME_NAME );
      break;
    case '3':
      $caption = __( '注目', THEME_NAME );
      break;
    case '4':
      $caption = __( '必見', THEME_NAME );
      break;
    case '5':
      $caption = __( 'お得', THEME_NAME );
      break;
    case '11':
      $caption = __( 'SORACID', THEME_NAME );
      break;
  }
  $tag = '';
  if ($caption){
    $caption = apply_filters('get_navi_card_ribbon_caption', $caption, $ribbon_no);
    $tag = '<div class="ribbon ribbon-top-left ribbon-color-'.$ribbon_no.'"><span>'.$caption.'</span></div>';
  }
  return $tag;
}

Copy

コード内のシングルコーテーション（’）に囲まれた「SORACID」を好きな内容に変更してください。

推奨文字数は5～6文字です。アルファベットは大文字のみです。