【Cocoonカスタマイズ】「新着記事」などにカテゴリー、タグ表示を追加する方法

はじめに
完成イメージ
実装方法
参考：エントリーカードにカテゴリー、タグリンクを追加する方法
1. 実装手順
さいごに

はじめに

以下をCocoonで実現します。

【SWELL】投稿リストにカテゴリーとタグを両方表示させる | Lapin.web

投稿リストブロックにはカテゴリーを表示させることが出来ますが、タグも表示したいと思ったことはないでしょうか？カテゴリー表示をタグ表示に差し替えるという方法は既存の解説記事をいくつか見つけたのですが、カテゴリーもタグも両方表示させるというも

これまで、エントリーカードに任意の情報を追加する方法を説明してきました。
その復習に加え、以下のウィジェットに情報を追加します。

新着記事
人気記事
関連記事

この記事では、この方法について説明します。

完成イメージ

実装方法

以下のコードをfunctions.phpに追加します。

カスタム投稿タイプには対応していません。

/**
 * 指定された投稿のカテゴリーとタグ一覧を出力
 *
 * @param string $prefix プレフィックス
 * @param int|null $post_id 投稿ID
 * @return void
 */
if (!function_exists('get_categories_tags')):
function get_categories_tags($prefix = '', $post_id = null) {
  $post_id = $post_id ? $post_id : get_the_ID();

  $categories = get_the_category($post_id);
  $tags = get_the_tags($post_id);

  if (!$categories && !$tags) {
    return;
  }

  ob_start();
  ?>
  <div class="entry-categories-tags ctdt-two-rows">

    <?php if ($categories): ?>
      <!-- カテゴリー一覧 -->
      <div class="entry-categories">
        <?php foreach ($categories as $category): ?>
          <div class="cat-link">
            <span class="fas fa-folder cat-icon tax-icon" aria-hidden="true"></span>
            <?= esc_html($category->name); ?>
          </div>
        <?php endforeach; ?>
      </div>
    <?php endif; ?>

    <?php if ($tags): ?>
      <!-- タグ一覧 -->
      <div class="entry-tags">
        <?php foreach ($tags as $tag): ?>
          <div class="tag-link">
            <span class="fas fa-tag tag-icon tax-icon" aria-hidden="true"></span>
            <?= esc_html($tag->name); ?>
          </div>
        <?php endforeach; ?>
      </div>
    <?php endif; ?>

  </div>
  <?php
  echo ob_get_clean();
}
endif;


// エントリーカード
add_action('entry_card_snippet_after', 'get_categories_tags');


// 新着記事、人気記事
add_action('widget_entry_card_date_before', 'get_categories_tags', 10, 2);


// 関連記事
add_action('related_entry_card_snippet_after', 'get_categories_tags');

参考：エントリーカードにカテゴリー、タグリンクを追加する方法

エントリーカード全体が記事ページへのリンク（<a>タグ）で囲まれているため、HTMLの仕様上、カード内に別のリンク（タグ一覧へのリンク）を配置できません。

アクセシビリティの観点からは非推奨ですが、構造上の制約を考慮し、<object>タグを用いてリンクを内包する形で実装します。
Cocoon設定→投稿→カテゴリー・タグ表示設定「カテゴリー・タグ表示」の設定に従って表示します。

実装手順

以下のコードをfunctions.phpに追加します。

add_action('entry_card_snippet_after', function () {
  echo '<object>';
  cocoon_template_part('tmp/categories-tags');
  echo '</object>';
});

さいごに

今回紹介した方法を使えば、エントリーカードに任意の情報を追加できます。
Cocoonには、Arkheのようなテンプレートを置き換えるためのフックに加えて、多数の個別フックが用意されています。
子テーマにテンプレートファイルをコピーして変更しなくても、それらのフックを活用することで、簡単に情報を追加することが可能です。