【WordPress】パンくずリストで投稿のカテゴリーを親子順に並べる方法。コピペできます。
こんにちはワダショウゴです。
本記事では、WordPressの投稿カテゴリーを親子順に並べて表示する方法を解説します。
当ブログで使用している実証済みのコード付きです。
WordPressの投稿カテゴリーを順番に表示
まずは下記のコードをfunctions.php内にコピペしてください。
Code01（PHP)
<?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)
<?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（PHP)
<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をそのまま使うと
みたいに表示されます。
したがって、投稿にはそれぞれの階層でカテゴリーは１つずつにしましょう。
この記事では
というように、各階層にカテゴリーは１つしか使用していません。
【解決策】タグで分類しよう！
記事が様々なジャンルに該当する場合は、上の条件でカテゴリーを設定しあとはタグを使って分類しましょう。
実際の表示のされ方が気になる人は、当ブログのパンくずリスト（本記事の最下部）やタイトルの真下に表示されているので参考にしてください。