投稿のカテゴリーを関連記事のようにカード表示する方法

表1に示す項目を設定をします。

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

add_action('cocoon_part_before__tmp/related-entries', function () {
  // 関連記事が非表示の場合は処理対象外
  if (! is_related_entries_visible()) {
    return;
  }

  // 現在の投稿IDを取得
  $post_id = get_the_ID();

  // 投稿のカテゴリーを取得
  $categories = get_the_category($post_id);
  if (empty($categories)) {
    return;
  }

  ob_start();
  ?>
  <aside id="related-category" class="related-entries<?= get_additional_related_entries_classes(); ?>">
    <h2 class="related-entry-heading">
      <span class="related-entry-main-heading main-caption">カテゴリー</span>
      <span class="related-entry-sub-heading sub-caption">他にも記事があります</span>
    </h2>
    <div class="related-list">
      <?php
      foreach ($categories as $cat) {
        // カテゴリー情報を取得
        $cat_id = $cat->term_id;
        $cat_name = esc_html($cat->name);
        $cat_link = esc_url(get_category_link($cat_id));

        // アイキャッチ画像のURLを取得
        $eye_catch_url = get_term_meta($cat_id, 'the_category_eye_catch_url', true);

        // アイキャッチ画像が未設定の場合はNO IMAGE画像を設定
        if (!$eye_catch_url) {
          $eye_catch_url = get_no_image_url();
        }
        ?>
        <a href="<?= $cat_link; ?>" class="related-entry-card-wrap a-wrap border-element cf" title="<?= $cat_name; ?>">
          <article class="related-entry-card e-card cf">
            <figure class="related-entry-card-thumb card-thumb e-card-thumb">
              <img src="<?= esc_url($eye_catch_url); ?>" alt="<?= $cat_name; ?>" decoding="async" loading="lazy">
            </figure>
            <div class="related-entry-card-content card-content e-card-content">
              <h3 class="related-entry-card-title card-title e-card-title"><?= $cat_name; ?></h3>
            </div>
          </article>
        </a>
        <?php
      }
      ?>
    </div>
  </aside>
  <?php
  echo ob_get_clean();
});