WPテーマ【Cocoon】でパンくずリストを表示、カスタマイズする方法｜設定・CSS変更・ルートテキスト変更まで解説

WordPressでサイトを運営していると、ユーザーが今どのページ階層にいるのかをわかりやすく示すパンくずリストは便利な機能です。

パンくずリストがあると、読者がサイト内を移動しやすくなるだけでなく、ページの位置関係も把握しやすくなります。特に記事数や固定ページが増えてくると、ナビゲーションの補助として役立ちます。

Cocoonを使っている場合は、パンくずリストの表示設定や見た目のカスタマイズを比較的簡単に行えます。

この記事では、Cocoonでパンくずリストを表示する方法、投稿ページと固定ページの設定の違い、CSSでの見た目調整、ルートテキストの変更方法までわかりやすく解説します。

Cocoonのパンくずリストとは？

パンくずリストとは、今見ているページがサイト内のどこに位置しているかを階層で示すナビゲーションです。

たとえば、次のような形で表示されます。

ホーム ＞ WordPress ＞ 記事タイトル

このように表示されることで、読者は上の階層ページへ戻りやすくなります。カテゴリページや親ページへの移動もしやすくなるため、サイト内回遊の補助として有効です。

Cocoonでパンくずリストを表示する方法

Cocoonでは、管理画面からパンくずリストの表示設定を行えます。

1. WordPress管理画面からCocoon設定を開く

まず、WordPress管理画面にログインし、左メニューの「Cocoon設定」を開きます。

2. 投稿または固定ページのタブを開く

Cocoonでは、パンくずリストの設定が投稿ページと固定ページで分かれているため注意が必要です。

記事ページで表示したい場合は「投稿」タブ、固定ページで表示したい場合は「固定ページ」タブを確認します。

3. パンくずリストの表示設定を有効にする

それぞれのタブ内にあるパンくず関連の設定を確認し、表示したい場所で有効にします。

投稿ページだけ設定して固定ページ側を見落とすと、「記事では出るのに固定ページでは出ない」という状態になりやすいため、両方の設定を確認しておくのがおすすめです。

4. 変更を保存する

設定後は「変更をまとめて保存」ボタンを押して反映させます。保存しないと表示は変わりません。

パンくずリストが表示されないときの確認ポイント

設定したはずなのに表示されない場合は、次の点を確認してください。

投稿と固定ページの設定を取り違えていないか

Cocoonでは、投稿ページと固定ページの設定が別です。投稿だけ有効、固定ページだけ無効という状態もありえます。

設定変更後に保存しているか

表示設定を変更しても、保存していなければ反映されません。設定画面を閉じる前に必ず保存を確認してください。

キャッシュが残っていないか

ブラウザキャッシュやキャッシュ系プラグインの影響で、変更後も以前の表示が残ることがあります。更新後は再読み込みやキャッシュ削除も試してください。

CSSで非表示になっていないか

過去に追加したCSSでパンくずリストが非表示になっているケースもあります。特に子テーマやカスタムCSSを編集している場合は確認してください。

Cocoonのパンくずリストをカスタマイズする方法

パンくずリストは表示するだけでなく、見た目も調整できます。

見た目を変更する場合は、Cocoon本体ではなく、子テーマの style.css や 追加CSS を使ってカスタマイズするのが基本です。

テキストの色を変更する

パンくずリストの文字色を変えたい場合は、次のようなCSSを追加します。

.breadcrumb,
.breadcrumb a {
  color: red;
}

この例では、パンくず全体の文字色とリンク文字色を赤にしています。実際にはサイト全体の配色に合わせて調整してください。

フォントサイズを変更する

文字が小さいと感じる場合は、フォントサイズを変更できます。

.breadcrumb,
.breadcrumb a {
  font-size: 18px;
}

数値を調整すれば、サイトデザインに合わせて読みやすいサイズに変更できます。

余白や見た目を整える

必要に応じて、余白や行間も調整できます。

.breadcrumb {
  font-size: 14px;
  margin: 12px 0;
  padding: 8px 0;
}

大きくしすぎると本文より目立ってしまうため、パンくずリストは控えめに整えるのが使いやすいです。

パンくずリストのルートテキストを変更する方法

Cocoonでは、パンくずリストの先頭に表示されるルートテキスト、たとえば「ホーム」の文字を変更できます。

これを変更したい場合は、フィルターフックを使います。

投稿ページと固定ページで使うフック

• 投稿ページ：breadcrumbs_single_root_text
• 固定ページ：breadcrumbs_page_root_text

両方のページで同じテキストを使いたい場合は、同じ関数を2つのフックに設定します。

「ホーム」を「トップ」に変える例

add_filter('breadcrumbs_single_root_text', 'breadcrumbs_root_text');
add_filter('breadcrumbs_page_root_text', 'breadcrumbs_root_text');

function breadcrumbs_root_text() {
  return 'トップ';
}

このコードを子テーマの functions.php に追加すると、ルートテキストを「トップ」に変更できます。

サイト名を含める例

サイト名を使いたい場合は、次のように書けます。

add_filter('breadcrumbs_single_root_text', 'breadcrumbs_root_text');
add_filter('breadcrumbs_page_root_text', 'breadcrumbs_root_text');

function breadcrumbs_root_text() {
  return get_bloginfo('name') . ' HOME';
}

これで、パンくずリストの先頭にサイト名を含めたテキストを表示できます。

CSSを編集するときの注意点

Cocoon本体は直接編集しない

Cocoon本体のファイルを直接編集すると、テーマアップデート時に変更内容が消える可能性があります。CSSやPHPを編集する場合は、子テーマを使うのが安全です。

子テーマまたは追加CSSを使う

見た目だけを変更するなら、子テーマの style.css か、WordPressの追加CSSで対応できます。慣れていない場合は、まず追加CSSから試す方法でも問題ありません。

functions.php の編集前はバックアップを取る

ルートテキスト変更のように functions.php を編集する場合は、事前にバックアップを取っておくと安心です。記述ミスがあると画面表示に影響することがあります。

Cocoonでパンくずリストを設置するメリット

読者が今いる場所を把握しやすい

特にカテゴリが多いサイトや固定ページが増えたサイトでは、現在位置がわかるだけでも使いやすさが上がります。

上位ページへ戻りやすい

パンくずリストがあれば、読者がカテゴリ一覧や親ページへ簡単に戻れます。サイト内移動の補助として有効です。

ナビゲーションが整理される

グローバルメニューだけでは補えないページ階層を補助できるため、サイト全体の導線がわかりやすくなります。

まとめ

Cocoonでは、パンくずリストの表示設定とカスタマイズを比較的簡単に行えます。

• Cocoon設定から投稿ページ・固定ページごとに表示設定できる
• 投稿と固定ページは別設定なので両方確認する
• 見た目はCSSで調整できる
• ルートテキストはフィルターフックで変更できる
• カスタマイズはCocoon本体ではなく子テーマ側で行う

まずは表示設定を整えたうえで、必要に応じて文字色やサイズ、ルートテキストを調整していくと、Cocoonでも使いやすいパンくずリストを作れます。