WordPressの親子カテゴリーを表示する方法

親子カテゴリーを表示させるにはどうすればいいんだろう？

WordPressのカテゴリーは、投稿を整理するために重要な役割をもち階層構造を持つことができます。
この階層構造を利用することで、カテゴリーを親カテゴリーと子カテゴリーに分類することが可能です。

この記事では、親子カテゴリーを表示する３つのケースについてサンプル使って紹介します。

カテゴリーを表示する方法

まず、カテゴリーを表示するにはどのようなコードが必要となるでしょうか？

例として、カテゴリーをすべて表示させたい場合は以下のコードで実装することができます。

<ul class="category__items">
  <?php
  $categories = get_categories();
  if ($categories) :
    foreach ($categories as $category) : ?>
      <li class="category__item">
        <a class="category__link" href="<?php echo esc_url(get_category_link($category->term_id)); ?>"><?php echo $category->name; ?></a>
      </li>
    <?php endforeach; ?>
  <?php endif; ?>
</ul>

こちらのコードでは、カテゴリーをすべて（親も子も）表示することになります。

【コードの説明】

get_categories();
投稿のカテゴリー情報を取得するための関数です。
引数「$args」はオプションであり、カテゴリーを取得する際の条件を指定するために使用されます。

get_categories( $args );

カテゴリー情報の取得の方法については、以下の記事で紹介しています。

: WordPressのカテゴリー情報を表示する方法
WordPressのカテゴリー情報は、Webサイト上のいろいろな所で表示が必要となります。今回は、ケース別に分けてカテゴリー情報の表示方法をご紹介していきます。すべてのカテゴリー情報を表示する方法 ...

親カテゴリーのみ表示したい場合

親カテゴリーのみ表示することはできないの？

親カテゴリーのみ表示したい場合には、以下のコードで表示します。

<ul class="category__items">
  <?php
  $args = array(
    'parent' => '0', // 親カテゴリーのみ取得
    'orderby' => 'count', // 表示順は、投稿数を基準に
    'order' => 'desc', // 投稿数の多い順で取得（降順）
    'number' => 30, // 表示するカテゴリーの数を指定
  );
  $categories = get_categories($args);
  if ($categories) :
    foreach ($categories as $category) : ?>
      <li class="category__item">
        <a class="category__link" href="<?php echo esc_url(get_category_link($category->term_id)); ?>"><?php echo $category->name; ?></a>
      </li>
    <?php endforeach; ?>
  <?php endif; ?>
</ul>

表示する情報を指定したい場合は、「$args」内にオプションを指定すると必要な情報が表示できます。

親子カテゴリーを表示　※get_categories(); を使って表示

表示例としては、以下のような感じで表示するイメージになります。

表示したい情報としては、

ポイント

投稿タイプスラッグ　⇨　カスタム投稿のIDを半角英数で入力

複数系のラベル・単数系のラベル　⇨　カスタム投稿のメニュー名（日本語でもＯＫです）　※このラベルが、WordPressの管理画面に表示されます

アーカイブあり　⇨　作成した投稿の一覧ページを作成するかを選択、特に指定がなければ「true」を選択

メニューの位置　⇨　WordPressの管理画面でメニューが表示される位置　※数字を５刻みで入力、数字が少ないほどメニューの上部に表示される

メニューアイコン　⇨　WordPressの管理画面でメニューの左側のアイコンを選択できます

サポート　⇨　ここでチェックを入れた項目が、投稿の編集画面で表示されます。　※私は、「タイトル」「アイキャッチ画像」「カスタムフィールド」のみ入れることが多いです

<div class="category">
  <ul class="category__items">
    <?php
    $args = array(
      'orderby' => 'count', // 投稿数で並び替え
      'order' => 'DESC',   // 降順で並び替え (多い順)
      'parent' => 0,       // 親カテゴリーのみを取得
    );
    $categories = get_categories($args);
    foreach ($categories as $category) :
    ?>
      <li class="category__parent">
        <a class="category__parent-link" href="<?php echo esc_url(get_category_link($category->term_id)); ?>">
          <span class="category__name"><?php echo esc_html($category->name); ?></span><span class="category__count">（<?php echo $category->count; ?>件）</span>
        </a>
      </li>
      <li class="category__child">
        <?php
        $child_categories = get_categories(array(
          'orderby' => 'count', // 子カテゴリーの投稿数で並び替え
          'order' => 'DESC',   // 降順で並び替え (多い順)
          'parent' => $category->term_id, // 現在の親カテゴリーの子カテゴリーを取得
        ));
        foreach ($child_categories as $child_category) :
        ?>
          <a class="category__child-link" href="<?php echo esc_url(get_category_link($child_category->term_id)); ?>">
            <span class="category__child-name"><?php echo esc_html($child_category->name); ?></span><span class="category__child-count">（<?php echo $child_category->count; ?>件）</span>
          </a>
        <?php endforeach; ?>
      </li>
    <?php endforeach; ?>
  </ul>
</div>

カテゴリー情報を取得する方法としては、get_categories(); のほかにget_queride_object(); を使った方法もあります。
次は、get_queride_object(); を使った方法をご紹介します。

親子カテゴリーを表示　※get_queried_object(); を使って表示

表示例としては、先程と同様のイメージになります。

「get_queried_object();」は、カテゴリーページでの情報を取得するためのもので
現在のページがカテゴリーページであるかどうかを確認し、カテゴリーの情報を取得することができます。

コードは以下のようになります。

<div class="category">
  <ul class="category__items">
    <?php
    $queried_object = get_queried_object(); // 現在のカテゴリー情報を取得
    $categories = get_categories(array(
      'parent' => $queried_object->term_id // 現在のカテゴリーを親とするカテゴリーを取得
    ));
    // 親カテゴリーの情報を表示
    foreach ($categories as $parent_category) :
    ?>
      <li class="category__parent">
        <a class="category__parent-link" href="<?php echo esc_url(get_category_link($parent_category->term_id)); ?>">
          <span class="category__name"><?php echo esc_html($parent_category->name); ?></span><span class="category__count">（<?php echo $parent_category->count; ?>件）</span>
        </a>
      </li>
      <li class="category__child">
        <?php
        $child_categories = get_categories(array(
          'parent' => $parent_category->term_id // 現在の親カテゴリーの子カテゴリーを取得
        ));
        // 子カテゴリーの情報を表示
        foreach ($child_categories as $child_category) :
        ?>
          <a class="category__child-link" href="<?php echo esc_url(get_category_link($child_category->term_id)); ?>">
            <span class="category__child-name"><?php echo esc_html($child_category->name); ?></span><span class="category__child-count">（<?php echo $child_category->count; ?>件）</span>
          </a>
        <?php endforeach; ?>
      </li>
    <?php endforeach; ?>
  </ul>
</div>

【コードの説明】

get_queried_object();
現在表示されているページの情報を取得するWordPress関数です。
この関数は、グローバル変数「$wp_query」から現在のページに関連する情報を取得します。
返り値は、
・WP_Post（カスタム投稿タイプの単一投稿ページの場合）
・WP_Term（タグやカテゴリーのアーカイブページの場合）
・WP_Post_Type（カスタム投稿タイプのアーカイブページの場合）など、
　取得される情報の種類によって異なります。

$term = get_queried_object();
$category_name = $term->name; // カテゴリー名を取得
$post_count = $term->count; // カテゴリーの投稿数を取得

single.phpで、投稿に属する親子カテゴリーを表示

表示例としては、以下のような感じで表示するイメージになります。

表示したい情報としては、

ポイント

投稿に属するカテゴリーを、親　→　子　の順番で表示

<?php if (have_posts()) : ?>
  <?php while (have_posts()) : the_post(); ?>

    <div class="detail__category-items">
      <?php
      $categories = get_the_category();
      if ($categories) :
        foreach ($categories as $category) :
          $parent = $category->parent;
          if (!$parent) : ?>
            <a class="detail__category-item" href="<?php echo esc_url(get_category_link($category->term_id)); ?>"><?php echo $category->name; ?></a>
            <?php
            $child_categories = get_the_category();
            foreach ($child_categories as $child_category) :
              $child_parent = $child_category->parent;
              if ($child_parent == $category->term_id) : ?>
                <a class="detail__category-item" href="<?php echo esc_url(get_category_link($child_category->term_id)); ?>"><?php echo $child_category->name; ?></a>
              <?php endif; ?>
            <?php endforeach; ?>
          <?php endif; ?>
        <?php endforeach; ?>
      <?php endif; ?>
    </div>

    <h2 class="detail__title"><?php echo esc_html(get_the_title()); ?></h2>
  <?php endwhile; ?>
<?php endif; ?>

このコードは、WordPressのsingle.php（投稿ページ）で、
その投稿が属するカテゴリーと、そのカテゴリーに属する子カテゴリーを一覧表示するための処理を行っています。

【コードの説明】

get_the_category();
WordPressの投稿に関連付けられたカテゴリー情報を取得するWordPress関数です。
この関数は、現在のループ内で処理されている投稿のカテゴリー情報を取得します。
返り値として取得されるカテゴリー情報は、WP_Termオブジェクトの配列となります。

$categories = get_the_category(); // 現在の投稿に関連付けられたカテゴリー情報を取得

if ($categories) {
  foreach ($categories as $category) {
    echo $category->name; // カテゴリー名を表示
    echo $category->slug; // カテゴリースラッグを表示
    echo $category->parent; // 親カテゴリーのIDを表示
    // 他のカテゴリー情報も取得可能
  }
}

まとめ

この記事では、WordPressの親子カテゴリーを表示する方法について説明しました。
これらのコードを使用することで、ウェブサイトのカテゴリーを効果的に整理することができます。

カテゴリーを表示する方法

親カテゴリーのみ表示したい場合

親子カテゴリーを表示 ※get_categories(); を使って表示

親子カテゴリーを表示 ※get_queried_object(); を使って表示

single.phpで、投稿に属する親子カテゴリーを表示

まとめ

親子カテゴリーを表示　※get_categories(); を使って表示

親子カテゴリーを表示　※get_queried_object(); を使って表示