Zenn
🍇

カテゴリ別一覧ページ作成

2024/06/08に公開
WordPress
tech

目的

投稿ページ(archive.php)でカテゴリ別一覧ページへ遷移するリンクタグを設置する

cate01.jpg

背景

実務でよく見かける実装なのですが、サイト上で見つからないので自分で実装しようと思いました。各カテゴリと、「すべて」のリンクも併せて設置しています。

前提条件

  • URL
    デフォルト投稿タイプのスラッグ名はblog
    各カテゴリページのURLは/blog/スラッグ名 になるように

  • パーマリング構造
    カスタム構造　/%category%/%post_id%/

CODE

<ul class="category_list">
  <li>

  <?php $class = get_queried_object_id() ? '' : 'all'; ?>

    <a href="<?php echo esc_url( home_url('/blog') ); ?>">
      <span class="shape <?php echo esc_attr($class); ?>"></span>
      <p>ALL</p>
    </a>
  </li>

  <?php
    $args = array(
      'hide_empty' => 0,
    );
    $categories = get_categories($args);
    $current_category_id = get_queried_object_id(); // 現在のカテゴリページのIDを取得

    if (!empty($categories)) :
    foreach ($categories as $category) :
      $category_link = home_url('/blog/' . $category->slug);
      $class = ($current_category_id === $category->term_id) ? ' ' . $category->slug : '';
  ?>

  <li>
    <a href="<?php echo esc_url($category_link); ?>">
      <span class="shape <?php echo esc_attr($class); ?>"></span>
      <p><?php echo esc_html($category->name) ?></p>
    </a>
  </li>

  <?php 
    endforeach; 
    else:
  ?>

  <li>
      <p>No categories found.</p>
  </li>

  <?php endif; ?>
  
</ul>

ソースコード分解・説明

<li>

<?php $class = get_queried_object_id() ? '' : 'all'; ?>

  <a href="<?php echo esc_url( home_url('/blog') ); ?>">
    <span class="shape <?php echo esc_attr($class); ?>"></span>
    <p>ALL</p>
  </a>
</li>

ここでは以下2点の機能を付与しています。

  1. カテゴリのうち、「すべて」カテゴリを設置
    まずは「（カテゴリ）すべて」の記事一覧へ飛べるリンクタグの設置です。URLの末尾にスラッグはつかないので、他のカテゴリとは独立した処理となります。
  2. カレントページのクラス付与
    それぞれのカテゴリタグはカレント状態の場合、背景色のスタイルをもつクラス名が付与されるようにしたいです。
    そこで今回はget_queried_object_id() 関数を採用しました。
<?php
  $args = array(
    'hide_empty' => 0,
  );
  $categories = get_categories($args);
  $current_category_id = get_queried_object_id(); // 現在のカテゴリページのIDを取得

  if (!empty($categories)) :
  foreach ($categories as $category) :
    $category_link = home_url('/blog/' . $category->slug);
    $class = ($current_category_id === $category->term_id) ? ' ' . $category->slug : '';
?>

<li>
  <a href="<?php echo esc_url($category_link); ?>">
    <span class="shape <?php echo esc_attr($class); ?>"></span>
    <p><?php echo esc_html($category->name) ?></p>
  </a>
</li>

※記事がない場合の処理は省略します

ループ外にタグリストを作成するのでget_categories() を採用。
array型でオプション設定できるので変数$argsで適宜カスタマイズしてください。
get_categories() – Function | Developer.WordPress.org

$args = array(
  'exclude' => 1,
);

↑上記のようにexcludeパラメーターを使用すると、指定したIDのカテゴリーは排除されます。

foreach ($categories as $category) :
  $category_link = home_url('/blog/' . $category->slug);
  $class = ($current_category_id === $category->term_id) ? ' ' . $category->slug : '';

反復処理で作成したカテゴリ分リストが作成されます。
$category_link は各URLを、$classはカテゴリページがカレント状態の場合に付与するクラス名を登録します。

さいごに

これまでカテゴリ別一覧を設けるために、別途category.phpファイルを作成していました。今回archive.phpの1ファイルで実装できたのが嬉しいです。

参考

【WordPress】現在のクエリ内容を取得して、いろいろやる | Web担当者のためのTips集 https://cgsc.info/higuchi_web/wordpress_get_queried_object_id/

Discussion