Lightningテーマでパンくずリストを非表示にする方法と注意点

2025 11/02

2025/11/02

はじめに

この章では、本記事の目的と読者想定、扱う内容の概要を分かりやすく説明します。WordPressテーマ「Lightning」を使っている方が、パンくずリストの表示を柔軟にコントロールできるようにすることが目的です。初心者の方でも実践できる手順から、テーマやコードを触れる中級者向けの方法まで幅広く扱います。

本記事の目的
Lightningでのパンくずリストを非表示にしたり、表示制御を行ったりする方法を丁寧に解説します。デザインやユーザー導線の改善を目指す方に役立ちます。
想定する読者
WordPressの基本操作が分かる方。テーマの設定や外観編集に触ったことがある方を想定しています。コードを直接編集する方法は注意点を添えて説明します。
記事の構成
表示の役割と基本設定、サイト全体や特定ページでの非表示方法、CSSやPHPのカスタマイズ、フィルターフックの応用、注意点まで順を追って説明します。各章で具体例を示し、実際に試せる形でまとめます。

まずはパンくずリストの役割や表示の仕組みを次章で見ていきましょう。

パンくずリストとは？Lightningテーマでの役割

パンくずリストの定義

パンくずリストは、現在のページがサイト内のどの場所にあるかを示す経路表示です。例として「ホーム > ブログ > カテゴリ > 記事」のように階層を並べ、訪問者が戻る場所を把握しやすくします。

Lightningテーマでの挙動

WordPressのLightningテーマでは、標準でパンくずリストを表示することが多いです。通常は記事タイトルの上やページ上部に現れ、テーマの設定やカスタマイザーで表示の有無やスタイルを変更できます。プラグインと併用するケースもあります。

ユーザビリティとSEOへの効果

パンくずリストは訪問者の迷いを減らし、サイト内の回遊を促します。検索エンジンも構造を読み取りやすくなり、結果として検索表示（スニペット）に好影響を与えることがあります。

具体例

ショップサイトなら「ホーム > 商品カテゴリ > サブカテゴリ > 商品名」、ブログなら「ホーム > カテゴリ > 記事タイトル」のように表現します。訪問者がワンクリックで上位ページへ戻れる点が利点です。

Lightningでのパンくずリスト表示制御の基本

表示位置と初期設定

Lightningでは、標準でページヘッダー付近にパンくずリストが表示されます。例として「ホーム > カテゴリ > 投稿タイトル」という形で、現在の場所をわかりやすく示します。投稿・固定ページのほか、アーカイブや検索結果でも表示されることが多いです。

管理画面での切り替え

多くのケースでは、管理画面からオン／オフを切り替えられます。外観 → カスタマイズ、あるいはテーマ専用の設定メニューに「パンくずリスト表示」の項目があり、ここで全体表示の有無や表示位置を設定できます。編集画面にメタボックスがある場合は、個別ページごとに表示を切り替えられます。

プラグインとの関係

Yoast SEOやBreadcrumb NavXTなどのプラグインがパンくずを出力する場合、テーマの表示と重複することがあります。重複を避けるには、テーマ側のパンくずをオフにしてプラグイン側を使うか、プラグインの出力をテーマの位置に統合します。見た目の調整はCSSで行います。

表示の優先順位と確認ポイント

基本的に「サイト全体設定 → 個別ページ設定 → カスタムコード（PHP/CSS）」の順で優先されます。変更後にキャッシュが残ると反映されないので、キャッシュをクリアして表示を確認してください。次章ではサイト全体で非表示にする具体的な方法を詳しく説明します。

サイト全体でパンくずリストを非表示にする方法

概要

Lightning G3 Pro Unit（有料拡張プラグイン）を導入すると、管理画面からサイト全体のパンくずリスト表示を簡単に切り替えられます。ここでは、具体的な操作手順と確認ポイントをわかりやすく説明します。

手順（管理画面から）

WordPressの管理画面にログインします。
「外観」→「カスタマイズ」を開きます。
「レイアウト設定」を選びます。
「パンくずリスト設定」を開きます。
表示/非表示の切り替えスイッチで「非表示」を選びます。
右上の「公開」または「保存」を押して変更を反映します。

確認ポイント

キャッシュを利用している場合、表示がすぐ変わらないことがあります。キャッシュをクリアして確認してください。
テーマの子テーマや他のプラグインがパンくずを追加している場合、完全に消えないことがあります。その場合はそのプラグイン設定も確認します。

補足（プラグイン未導入の場合）

G3 Pro Unit未導入でもコードやCSSで非表示にできますが、具体的な方法は第6章で詳しく説明します。

特定ページだけパンくずリストを非表示にする方法

概要

固定ページや投稿ごとにパンくずリストを表示・非表示できます。編集画面下部にある「Lightning デザイン設定」内の「非表示設定」で「パンくずリストを表示しない」にチェックを入れると、そのページだけ非表示になります。G3 Pro Unitを導入済みの場合に利用可能です。

手順（初心者向けに順を追って）

WordPress管理画面で該当の固定ページまたは投稿の編集画面を開きます。
画面を下へスクロールして「Lightning デザイン設定」セクションを探します。見当たらない場合は、画面右上の「表示オプション」で該当メタボックスが有効か確認してください。
「非表示設定」を開き、「パンくずリストを表示しない」にチェックを入れると非表示、外すと表示されます。
設定後に「更新」または「公開」をクリックして保存し、実際のページで表示を確認します。

よくあるトラブルと確認ポイント

パンくずが表示されない最も多い原因は、このチェックが誤って入っていることです。まずここを確認してください。
「Lightning デザイン設定」が見つからない場合は、G3 Pro Unitが有効かどうかを確認してください。未導入だと設定が表示されません。
変更しても反映されないときはブラウザキャッシュやサイトキャッシュをクリアしてください。
カスタム投稿タイプでは同じ設定がない場合があります。その際はテーマ側の設定やテンプレートを確認します。

以上の手順で、個別ページだけパンくずリストを簡単に管理できます。表示トラブルの際はまずここをチェックすることをおすすめします。

コードやCSSで非表示にする方法

概要

サイト全体や一部を見た目だけで非表示にしたい場合、CSSでの非表示が手軽です。ここでは追加CSSに書く例と、より確実に消すための子テーマによるテンプレート編集の手順を分かりやすく説明します。

1) シンプルなCSSで非表示にする

WordPressの外観 → カスタマイズ → 追加CSSに、対象のセレクタを記述します。よく使う例：

/* IDで指定されている場合 */
#breadcrumb { display: none; }

/* クラス名の場合の例 */
.breadcrumb, .breadcrumbs, nav.breadcrumb { display: none; }

/* 上書きされる場合は !important を付けます */
#breadcrumb { display: none !important; }

ポイント:
– テーマによってIDやクラス名が異なります。ブラウザの検証ツール（右クリック→検証）で正しいセレクタを確認してください。
– キャッシュプラグインやブラウザキャッシュが残ると反映されないことがあります。反映確認時はキャッシュをクリアしてください。

2) 子テーマでテンプレートを編集して完全に削除する

CSSで隠すだけでよい場合は上の方法で十分です。HTML自体を出力させたくない場合は、子テーマで該当テンプレートを上書きしてパンくずを削除します。手順の概要：

管理画面で使用中のテーマのテンプレートファイル（header.phpやtemplate-parts内）を探す。パンくず出力のコード（breadcrumb や get_template_part など）を見つけます。
同じファイルを子テーマにコピーして配置します。
コピーしたファイルからパンくずの出力部分を削除またはコメントアウトします。
子テーマを有効化して表示を確認します。

注意点:
– 子テーマを使えばテーマのアップデートで上書きされません。バックアップを必ず取ってください。
– PHP側で出力が制御されているケースでは、remove_action やフィルターで取り除ける場合があります。特定の関数名やフックが分かれば、子テーマの functions.php に記述して対応します。

3) テストと確認

スマホ・PC両方で表示を確認してください。
ページキャッシュやCDNを使っている場合は、キャッシュのクリアを忘れずに行ってください。

この章では、まずは追加CSSで試すことをおすすめします。HTMLを完全に削除したい場合は子テーマによるテンプレート編集を検討してください。

フィルターフックによるカスタマイズ

概要

vk_breadcrumb_html フィルターはパンくずの最終出力をプログラムで書き換えられます。短いコードで消したり、条件に応じて出力を切り替えられます。

基本的な非表示（例）

add_filter('vk_breadcrumb_html', function($breadcrumb_html){
    return ''; // 空文字で非表示
});

特定ページだけ非表示にする例

add_filter('vk_breadcrumb_html', function($html){
    if(is_page('contact')) return ''; // 固定ページスラッグで判定
    return $html;
});

出力を変更する例

add_filter('vk_breadcrumb_html', function($html){
    // クラスを追加して見た目だけ変える
    return '<nav class="my-breadcrumb">'. $html .'</nav>';
});

実装場所と注意点

子テーマの functions.php またはサイト固有プラグインに記述してください。テーマやプラグイン更新で動作が変わる場合がありますので、事前にバックアップとステージング環境での確認をおすすめします。フィルターの優先度（第三引数）で他の処理より後に実行することも可能です。

※ 実装は自己責任でお願いします。

パンくずリストを非表示にする際の注意点

なぜ注意が必要か

パンくずリストは訪問者の位置把握と検索エンジンの理解を助けます。安易に全ページで消すと、ユーザビリティやSEOに悪影響が出る可能性があります。

影響と具体例

カテゴリ階層が深いサイト：パンくずを消すと回遊が減り、直帰率が上がることがあります。例：ECサイトでカテゴリ間移動がわかりにくくなる。
構造化データ：テーマが自動で構造化データを出力している場合、見た目だけ消すと検索結果のリッチ表示に影響することがあります。

代替案と設計提案

ページ種別ごとに表示を切り替える：トップや投稿ページでは表示、特定の固定ページでは非表示にする設計を勧めます。理由はユーザーの導線に応じた最適化がしやすいためです。
見た目だけ消すのではなく、出力を制御する：CSSで隠すだけだと構造化データは残ります。意図に合わせてテンプレート・フィルターで制御してください。