特定のカテゴリーに属する投稿をドロプッダウンで表示する方法

はじめに

以下の質問に回答します。

特定のカテゴリーに属する記事を、ドロップダウンリストで一覧表示させたい

お世話なっております 本トピックの説明ですが 特定（一つ）のカテゴリー内にある記事一覧を ウィジェットの”カテゴリー”のようなドロップダウンの方式で 記事を一覧表示させるウィジェット機能が欲しいです こちらの記事の内容とニュアンスが近いです...

wp-cocoon.com

「新着情報」ウィジェットを使用し、表示するカテゴリーを指定することで、同様の効果を得ることができます。

ただし、この方法では投稿がリスト形式で表示されるため、投稿数が多い場合、ドロップダウンメニューに比べて見づらくなる可能性があります。

そこで、独自のショートコードを使用して、特定のカテゴリーの投稿をドロップダウンで表示します。

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

完成イメージ

使用方法

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

[my_post_dropdown]

実装手順

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

add_shortcode('my_post_dropdown', function ($atts) {
  $atts = shortcode_atts([
    'cat' => '',
  ], $atts);

  // カテゴリーIDなしは処理対象外
  if (empty($atts['cat'])) {
    return '<p>カテゴリーIDが指定されていません。</p>';
  }

  $cat_id = (int) $atts['cat'];

  // 指定カテゴリーの投稿を取得
  $posts = get_posts([
    'category'       => $cat_id,
    'posts_per_page' => -1,
    'orderby'        => 'date',
    'order'          => 'DESC',
  ]);

  // 投稿なしは処理対象外
  if (empty($posts)) {
    return '<p>このカテゴリーに投稿はありません。</p>';
  }

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

  ob_start();
  ?>
  <form class="post-dropdown">
    <select name="post-select" id="post-select" onchange="if (this.value) { window.location = this.value; }">
      <option value="">投稿を選択</option>
      <?php foreach ($posts as $p): ?>
        <option value="<?= esc_url(get_permalink($p->ID)); ?>" <?= selected($current_id, $p->ID, false); ?>>
          <?= esc_html($p->post_title); ?>
        </option>
      <?php endforeach; ?>
    </select>
  </form>
  <?php
  return ob_get_clean();
});

さいごに

今回紹介した方法を使えば、特定のカテゴリーに属する投稿を簡単にドロップダウンリストで表示することができます。
これにより、訪問者は興味のあるカテゴリーの投稿を手軽に見つけることができます。