Cocoonでカテゴリページにパンくずリストを表示させる方法

このブログではCocoonというWordPressのテンプレートを使わせていただいているのですが、パンくずリストをカテゴリーページに表示させるにはひと手間必要だったため、自分用のメモもかねてその方法について調べましたので紹介します。

パンくずリストとは

パンくずリストは、いわゆるページの上部に設置されることが多いWEBサイト内の構造を示しユーザーが今サイト内のどこにいるのかをわかりやすく表すしているリンクのことを指します。

パンくずリストはSEO上非常に重要な要素となっておりGoogleのクローラーに対してサイト構造を正確に伝えることに役立つほか、ユーザビリティにおいてもユーザーの現在地を示すだけでなく遷移を促すことにも貢献するため、できるだけ全ページに設置させたいところです。（一部トップページやCV動線などは除きます）

Cocoonの場合ですと、投稿ページには設定で表示させることができるのですが、いわゆるカテゴリページには設定項目内での設定ができなかったため、今回はその方法について調べました。

カテゴリーページにパンくずリストを表示させる方法

自分がやりたかったことは、カテゴリーページのページ上部に記事と同様のパンくずリストを表示させることです。

やることとしてはパンくずのコードをWordPressからコピーペーストするだけでしたので、だれでもできることだと思います。

では実際にやってみましょう。

①テーマエディターを選択

まず最初に、テーマエディターを左のメニューから選びます。

テーマエディターが表示されていない場合は「外観」→「テーマエディター」でも選択できます。

②「body-top.php」を選択

今回パンくずリストのコードを追加するファイルはテーマファイル内の「tmp」の中にある「body-top.php」になります。

名前の通り、htmlのbodyの上部のことですね。

ページの上部にパンくずリストに限らず何かを追加したい場合はこのファイルを編集すればよいことになります。

注意点があるとすれば、右上の編集するテーマが現在使用されているテーマかどうかを確認しておくことでしょうか。

自分は子テーマを現在のテーマとして使用していますが、子テーマには「body-top.php」などphpのファイルが含まれていないことがあるため、その場合は親テーマを編集する必要があります。

③コードを追加

では実際にコードを追加してみましょう。

といっても以下4行のコードをコピペして追加するだけです。

<?php //パンくずリスト ※今回の変更点
if (is_category()){
get_template_part('tmp/breadcrumbs');
} ?>

位置としては「コンテンツ上部表示ウィジェットの下」「投稿パンくずリストがメイン手前の場合の上」です。

コードを追加したらページ下部の「ファイルを更新」を忘れずに押しましょう。

おわりに

Cocoonを使っている方はぜひパンくずリストをカテゴリーページにも表示させることで、SEO的・ユーザービリティ的なの向上をさせてみてはいかがでしょうか。

ここまで読んでいただきありがとうございました。