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

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

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

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

必見
【Webエンジニア目線】Googleアドセンスの審査合格への対策法
Webエンジニア目線のGoogleアドセンス審査対策法
おすすめ
ワードプレスでおみくじ
ワードプレスでおみくじ
新着
【コピーOK】もしもアフィリエイトのかんたんリンクをカスタマイズするCSS
【コピーOK】もしもアフィリエイトのかんたんリンクをカスタマイズするCSS

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

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

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

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

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

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

広告
そらしど

本業はWebプログラマー。
Cocoonのデザインをカスタマイズやブログノウハウを紹介しています。
気まぐれに遊べるおもちゃも作ってます。
リクエストは無料なので、気軽に投稿してください!
趣味はお昼寝です。
詳しいプロフィールはこちら

フォロー

ナビカードとは

地図

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

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

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

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

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

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

完成イメージ

カスタマイズ前

ナビカードカスタマイズ前

カスタマイズ後

ナビカード色変更後

カスタマイズ方法

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

カスタマイズ手順
  • WordPress管理画面でstyle.cssエディタを開く
  • CSSをコピーする
  • style.cssに貼り付ける
  • 保存を押す

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ダウンロードする
  • function.phpを編集する
  • 子テーマに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 = '
'.$caption.'
'; } return $tag; }
Copy

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

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

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

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

ファイルの場所

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

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

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

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

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

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

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

完成イメージ

カスタマイズ前

ナビカードカスタマイズ前

カスタマイズ後

ナビカード追加後

カスタマイズ方法(CSS)

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

カスタマイズ手順
  • WordPress管理画面でstyle.cssエディタを開く
  • CSSをコピーする
  • style.cssに貼り付ける
  • 保存を押す

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

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

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

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

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

画面遷移

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

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

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

CSSをコピーして編集する

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

そらしど
そらしど

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

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

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

style.cssに貼り付ける

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

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

保存する

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

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

ファイルの編集に成功しました。

カスタマイズ方法(PHP)

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

カスタマイズ手順
  • サーバーにアクセスする
  • function.phpダウンロードする
  • function.phpを編集する
  • 子テーマに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 = '
'.$caption.'
'; } return $tag; }
Copy

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

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

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

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

ファイルの場所

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

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

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

当サイトで掲載しているソースコードについて

この記載はプライバシーポリシーからの抜粋です。

著作権およびライセンス

ブログに掲載されている、ブログ管理者(そらしど)が本来権利を有するソースコードについては、ライセンスをCC0とします。

商用・非商用を問わず自由に利用していただいて構いません。その際の連絡も不要です。

免責事項

当サイトに掲載しているカスタマイズ情報のご利用にあたっては、必ずカスタマイズするファイルのバックアップをご用意の上、ご利用者様責任において実施していただきますようお願いいたします。

カスタマイズの実施により生じたいかなる不具合等についても当サイトその責任を負いかねます。何卒ご理解、ご了承の上、当サイトをご活用いただきますようお願い申し上げます。

まとめ

ナビカードのリボンを追加・変更する方法を紹介しました。

shortcodes.phpに記載している内容をカスタマイズする際にはfunction.phpに記載しなければいけないのが詰まりやすいポイントかもしれません。

分からないことや質問があれば下記から気軽に連絡ください。

そらしど
そらしど

最後まで読んでいただきありがとうございました。


WordPressユーザーのためのPHP入門 はじめから、ていねいに。[第3版]

ブログカスタマイズ関連のおすすめ記事

コメント

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