カテゴリー別の最新記事を表示する方法

はじめに

THE THORでは、カテゴリー別の最新記事をフッター上部に表示できます。

TOPページにカテゴリー最新記事を設定する方法

この記事では、WordPressの有料テーマ「THE THOR（ザ・トール）」の使い方について解説しています。今回は、TOPページに表示することができるカテゴリ最新記事の設定方法をご紹介しています。初心者にもわかりやすく、図解が多めになって...

how2navi.com

Cocoonでも、new_listショートコードを使って各カテゴリーの記事を1件ずつ表示すれば、同様のレイアウトが実現可能です。
ただし、THE THORのようにカードにカテゴリーページへのリンクが表示される仕様ではありません。

そこで、独自のショートコードを使用して、ウィジェットエリア「コンテンツ下部」に表示します。

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

完成イメージ

使用方法

以下にショートコードを示します。

[my_new_category]

実装手順

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

// ショートコードを追加
add_shortcode('my_new_category', function ($atts) {
  $atts = shortcode_atts([
    'cats' => '',
  ], $atts);

  $cat_ids = array_filter(array_map('intval', explode(',', $atts['cats'])));

  if (empty($cat_ids)) {
    return '<p>カテゴリーが指定されていません。</p>';
  }

  ob_start();
  ?>
  <div class="new-categories">
    <?php foreach ($cat_ids as $cat_id): ?>
      <?php
      $cat_name = get_cat_name($cat_id);
      $cat_link = get_category_link($cat_id);
      ?>

      <div class="new-categories__item">
        <div class="new-categories__title">
          <a href="<?= esc_url($cat_link); ?>">
            <?= esc_html($cat_name); ?>
          </a>
        </div>

        <?= do_shortcode('[new_list cats=' . $cat_id . ' count=1 type=large_thumb bold=1 date=1]'); ?>
      </div>

    <?php endforeach; ?>
  </div>
  <?php
  return ob_get_clean();
});


// フロント用JS・CSSを追加
add_action('wp_enqueue_scripts', function () {
  ob_start();
  ?>
  :root {
    --my-column: 4;
  }

  @media screen and (max-width: 834px) {
    :root {
      --my-column: 3;
    }
  }

  @media screen and (max-width: 480px) {
    :root {
      --my-column: 2;
    }
  }

  .new-categories {
    container-type: inline-size;
    display: grid;
    grid-template-columns: repeat(var(--my-column), minmax(0, 1fr));

    .new-categories__title a {
      color: #333;
      display: block;
      font-weight: bold;
      overflow: hidden;
      position: relative;
      text-decoration: none;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  @container (max-width: 480px) {
    .new-categories {
      --my-column: 1;
    }
  }
  <?php

  $handle = 'new-category';

  wp_register_style($handle, false);
  wp_enqueue_style($handle);
  wp_add_inline_style($handle, ob_get_clean());
});

さいごに

今回紹介した方法を使えば、THE THOR風にカテゴリ別の最新記事を一覧で表示できます。
カード上部にカテゴリーページへのリンクも表示されるため、ユーザーの回遊性向上にもつながります。
必要に応じデザインを調整し、サイトに合った表示にカスタマイズしてください。