【WordPress】パンくずリストで投稿のカテゴリーを親子順に並べて表示する方法。コピペできます。

こんにちはワダショウゴです。

本記事では、WordPressの投稿カテゴリーを親子順に並べて表示する方法を解説します。

当ブログで使用している実証済みのコード付きです。

WordPressの投稿カテゴリーを順番に表示

まずは下記のコードをfunctions.php内にコピペしてください。

♦Code01

<?php
function sort_category()
{
   $cats = $sort = array();
   $post_cats = get_the_category();
   foreach ($post_cats as $cat) {
       $layer = count(get_ancestors($cat->term_id, 'category'));
       $cats[] = array(
           'name' => $cat->name,
           'id' => $cat->term_id,
           'layer' => $layer
       );
       $sort[] = $layer;
   }
   array_multisort($sort, SORT_ASC, $cats);
   return $cats;
}
?>

次に表示したい部分に下記のコードを貼り付けましょう。

♦Code02

<?php foreach (sort_category() as $cat): ?>
   <a href="<?php echo esc_url(get_category_link($cat['id'])); ?>">
       <?php echo esc_html($cat['name']); ?>
   </a>
<?php endforeach; ?>

以上で表示できるので、あとはCSSで見た目を整えてください。

ソースコードの解説

まずはCode01の5~6行目でからの配列を定義し、現在の投稿のカテゴリーを複数取得します。

7~15行目で$layerにget_ancestors()を使って、親カテゴリーの数だけ値を増やして代入します。これを取得したカテゴリーの数だけforeach()で繰り返します。

16~17行目で、$sortの順番通りに$catsにカテゴリーを代入して親子順に並んだカテゴリーの配列が返されます。

Code02では、上の順序で並んだカテゴリーを配列の中身がなくなるまで取り出して表示しています。

おまけ：パンくずリストで使う場合

下記のコードでパンくずリストでも使用できます。

♦Code03

<ol>
   <li>
       <a href="<?php echo esc_url(home_url()); ?>">HOME</a>
       <i class="fas fa-angle-double-right" aria-hidden="true"></i>
   </li>
   <?php foreach (sort_category() as $cat): ?>
   <li>
       <a itemprop="item" href="<?php echo esc_url(get_category_link($cat['id'])); ?>">
           <?php echo esc_html($cat['name']); ?>
       </a>
       <i class="fas fa-angle-double-right" aria-hidden="true"></i>
   </li>
   <?php endforeach; ?>
   <li>
       <a>
           <?php the_title(); ?>
       </a>
   </li>
</ol>

Code02の前後に、トップページと現在の記事を表示してリスト表示している感じです。

Font Awesome で階層の矢印を表示しています。

補足説明

上記のコードを使う際で注意しておいてほしいことがあります。

親カテゴリーが複数あると正しく表示されません

１つの投稿に対して親カテゴリーが複数ある場合は順番に並ばないので注意が必要です。

特にCode03をそのまま使うと

親カテゴリーA → 親カテゴリーB → 子カテゴリーA

みたいに表示されます。

したがって、投稿にはそれぞれの階層でカテゴリーは１つずつにしましょう。

【解決策】タグで分類しよう！

記事が様々なジャンルに該当する場合は、上の条件でカテゴリーを設定しあとはタグを使って分類しましょう。