【Cocoon】ナビカードのリボンをトップページの新着記事に付ける

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

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

素敵なデザインなので他の場面でも使いたいと思う方もいるかと思います。

しかし、ナビカード以外での使用方法を見つけることができませんでした。

今回はトップページの新着記事一覧で最新記事にナビカードの「新着」リボンを使う方法を紹介します。

完成イメージは↓のような感じです。

このカスタマイズではPHPファイルを編集します。

コードはコピペ可能です。手順は画像付きで解説しています。ぜひ読んでみてください。

ナビカードとは
トップページの新着記事にリボンを付ける
当サイトで掲載しているソースコードについて
1. 著作権およびライセンス
2. 免責事項
まとめ
関連のおすすめ記事

ナビカードとは

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

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

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

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

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

トップページの新着記事にリボンを付ける

冒頭のとおり、トップページに表示される新着記事一覧にはリボンを付ける機能がありません。

リボンを付けるにはサーバーにアクセスしてPHPファイルを編集します。

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

カスタマイズ手順

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

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

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

サーバーにアクセスする

ConoHa WINGにログインします。

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

entry-card.phpをダウンロードする

この操作は子テーマにentry-card.phpがある場合は不要です。

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

ファイルの場所

wp-content/themes/cocoon-master/tmp

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

entry-card.phpを編集する

下記コードをコピーして、ダウンロードしたファイルに図で矢印を指した箇所へ貼り付けてください。

      <?php
      //最新の記事にCocoonのリボン（新着）を表示させるコード 開始
      $last_post_ids = array();
      $lastposts = get_posts('posts_per_page=1');
      foreach($lastposts as $lastpost) {
        $last_post_ids[] = $lastpost->ID;
      }
      ?>
      <?php if ( in_array( $post->ID, $last_post_ids ) ) : ?><div class="ribbon ribbon-top-left ribbon-color-1"><span>新着</span></div><?php endif;
      //最新の記事にCocoonのリボン（新着）を表示させるコード 終了
      ?>

Copy

貼り付け前