はじめに
目的
この文書は、WordPressの無料テーマ「Cocoon」で使われるパンくずリスト（breadcrumb）について、基本設定から高度なPHPカスタマイズまでをわかりやすく解説することを目的としています。表示位置や見た目、階層の調整、カスタム投稿タイプ対応などを取り上げます。
対象読者
Cocoonを使っているサイト運営者や、パンくずの見た目や表示ルールを明確にしたい制作者向けです。管理画面の設定で解決したい方と、テーマファイルを少し編集して細かく調整したい方の両方を想定しています。
本章の読み方
まずパンくずの意義と基本用語を説明します。続く章で、Cocoonの標準機能、PHPでの位置調整、カスタム投稿タイプ対応の順に具体例と手順を示します。各手順は実際のコードや画面操作例を交えて丁寧に解説します。
注意点
作業前に必ずバックアップを取ってください。テーマの直接編集はサイトに影響しますので慎重に行ってください。
Cocoon標準機能でできるパンくずリスト設定
管理画面で設定する場所
WordPress管理画面の「Cocoon設定」内にある「投稿」タブと「固定ページ」タブで設定できます。投稿用と固定ページ用を別々に調整できるため、用途に合わせた表示に整えられます。
投稿・カテゴリーページの主な設定項目
- 表示／非表示：ページごとにパンくずを表示するか切り替えます。たとえば一覧ページでは非表示、記事ページでは表示にできます。
- 表示位置：テーマの指定する位置（記事の上、記事の下、ヘッダー付近など）から選べます。見やすさに合わせて選んでください。
- 記事タイトルを含めるか：最後に記事タイトルを表示するかどうかを設定できます。SEOやデザインで使い分けます。
- 区切り文字やホームの表記：小さな見た目調整もここで行います。
固定ページの設定
固定ページでも投稿と同様の項目がそろっています。階層の深い固定ページではパンくずが役立ちます。投稿と固定ページでルールを揃えると訪問者が混乱しにくくなります。
スキンとの関係と対応方法
スキンによっては、管理画面で設定した見た目や位置が反映されない場合があります。その場合はスキンの仕様を確認し、可能なら別のスキンに変えるか、Cocoonの設定を優先するためにCSSで上書きしてください。簡単な例としては、パンくずの余白や表示色をCSSで調整すると反映しやすくなります。
運用のヒント
最初は投稿と固定ページで同じ基本設定に揃え、表示位置やタイトルの有無は実際のページを見ながら微調整すると失敗が少ないです。
パンくずリストの位置をもっと自由に変えるPHPカスタマイズ
概要
Cocoonの管理画面ではパンくず位置を5パターンから選べますが、さらに自由に移動したい場合はテーマファイルを編集します。ここでは子テーマを使い、安全に置き換える手順を丁寧に説明します。
子テーマを用意する
- 子テーマのフォルダを作成します（例:
/wp-content/themes/cocoon-child/）。 - style.css と functions.php を用意して有効化します。子テーマの作り方は公式ドキュメントに沿ってください。
親テーマからパンくず出力コードを抜き出す
親テーマ内でパンくずを出力している場所を探します。よくある記述例は次の通りです。
// 親テーマからの例
if ( function_exists('cocoon_breadcrumb') ) {
cocoon_breadcrumb();
}
テンプレートは header.php、single.php、page.php、template-parts 以下などにあります。該当箇所をコピーしてください。
子テーマの表示したいテンプレートに貼り付ける
子テーマ側で表示を変えたいテンプレート（例: single.php）を作成またはコピーし、希望の位置に先ほどのパンくずコードを貼ります。配置例として、タイトルの上、本文の前、あるいはカスタム領域内など自由に移動できます。
更新時の注意点
親テーマがアップデートされると、パンくずの出力方法が変更される場合があります。親テーマの該当ファイルを定期的に確認し、差分があれば子テーマのコードを調整してください。バックアップを取ってから作業することをおすすめします。
ポイント
- 子テーマで編集することで親テーマの更新で上書きされません。
- 出力関数名はテーマやプラグインで異なるため、必ず親テーマの実コードを確認してください。
- 小さな変更を加えて位置を確認し、問題なければ公開します。
カスタム投稿タイプ対応：Cocoon 2.8.5以降のパンくずカスタマイズ
概要
Cocoon 2.8.5から、カスタム投稿タイプ（例：productやevent）とカスタムタクソノミーが公式にパンくずで扱えるようになりました。アーカイブページや個別ページで適切な階層が表示されますが、ラベル名や細かい階層調整はテンプレートの編集で行います。
準備手順（子テーマで安全に編集）
- 子テーマのルートに「tmp」というフォルダを作成します。例: /wp-content/themes/your-child-theme/tmp
- 親テーマからbreadcrumbs.phpをコピーして、子テーマの/tmpに入れます。
- コピーしたファイルを編集して、独自の表示ルールやラベルを変更します。
カスタム投稿タイプのアーカイブで表示する方法
アーカイブページでパンくずが出ない場合は、表示判定にis_post_type_archive()を追加します。例:
if ( is_post_type_archive('product') || is_singular('product') ) {
// パンくず出力の処理
}
このようにすると、カスタム投稿タイプのアーカイブ（例: /products/）でもパンくずが表示されます。
カスタムタクソノミーやラベルの調整
- タクソノミー名や用語を表示したい場合は、get_term_link()やget_the_terms()を使い、パンくずに組み込みます。
- 表示名を変えたいときは、register_post_typeやregister_taxonomyで設定したラベル、またはテンプレート内の表示文字列を直接書き換えてください。
注意点
- 親テーマを直接編集するとアップデートで上書きされます。必ず子テーマのtmp内で編集してください。
- 変更後はキャッシュをクリアして表示を確認してください。
以上の手順で、Cocoon 2.8.5以降の環境でカスタム投稿タイプとカスタムタクソノミーに対応したパンくずを安全にカスタマイズできます。
