「新着記事」ブロックがを横並びのときカテゴリーページへのリンクを追加する方法

はじめに

「新着記事」ブロックを単一カテゴリーで横並び表示した際、各エントリーカードの末尾にカテゴリーのページへのリンクを追加します。

以下ではJavaScriptで実現しており、動的に追加されるため画面がチラつく問題があります。

https://soraumi-ao.com/create-250731/

soraumi-ao.com

そこで、PHP側で生成する方法に変更します。

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

完成イメージ

スキン配色ジェネレーター

0

2026-10-25

CocoonとXwriteの対応速度の違いから考える、開発体制の課題

0

2026-10-28

WordPressの脆弱性で「オワコン」と騒ぐ前に考えたいこと

0

2026-10-24

初心者が知っておきたいサイト運営の責任範囲 – SWELLフォーラムのPHP脆弱性に関する質問から考える

0

2026-10-23

WordPressテーマへの機能要望、どこまで求めるべきか？ 個別カスタマイズと標準機能の違い

1

2026-10-19

雑談一覧へ

実装手順

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

add_filter('render_block_cocoon-blocks/new-list', function ($block_content, $block) {
  // サムネイル画像を設定
  $image_url = '画像URL';

  $attrs = $block['attrs'];

  if (
    !isset($attrs['cats'], $attrs['horizontal']) ||
    strpos($attrs['cats'], ',') !== false ||
    $attrs['horizontal'] !== true
  ) {
    return $block_content;
  }

  $cat_id = intval($attrs['cats']);
  $category = get_category($cat_id);
  $cat_url = get_category_link($cat_id);
  $cat_name = $category->name;

  ob_start();
  ?>
  <a href="<?= esc_url($cat_url); ?>" class="new-entry-card-link widget-entry-card-link a-wrap swiper-slide" title="<?= esc_attr($cat_name); ?>">
    <div class="new-entry-card widget-entry-card e-card cf">
      <figure class="new-entry-card-thumb widget-entry-card-thumb card-thumb">
        <img src="<?= esc_url($image_url); ?>" alt="<?= esc_attr($cat_name); ?>">
      </figure>
      <div class="new-entry-card-content widget-entry-card-content card-content">
        <div class="new-entry-card-title widget-entry-card-title card-title"><?= esc_html($cat_name); ?>一覧へ</div>
      </div>
    </div>
  </a>
  <?php
  $html = ob_get_clean();

  // 最後の</a>の後に挿入
  $pos = strrpos($block_content, '</a>');
  if ($pos === false) {
    return $block_content;
  }

  $before = substr($block_content, 0, $pos + 4);
  $after = substr($block_content, $pos + 4);

  return $before . $html . $after;
}, 10, 2);

さいごに

今回紹介した方法を使えば、「新着記事」ブロックで単一カテゴリーを横並び表示した際に、各エントリーカードの末尾にカテゴリーへのリンクを安全に追加できます。
PHP側で生成するため、JavaScriptによる動的追加のように画面がチラつく心配もなく、サイトの表示が安定します。