Lightning G3でパンくずリストを非表示にする簡単設定法

2025 10/27

2025/10/27

はじめに

概要

本ドキュメントは、WordPressのテーマ「Lightning G3」と拡張機能「Lightning G3 Pro Unit」におけるパンくずリスト（breadcrumb）の非表示設定方法を分かりやすくまとめたガイドです。パンくずリストとは、例として「ホーム > 記事一覧 > 記事タイトル」のように表示される、現在位置を示すナビゲーションのことです。本書では個別ページ単位での非表示、サイト全体での制御、カスタマイズやフィルターフックの利用方法、プラグイン併用時の注意点まで網羅します。

対象読者

Lightning G3を利用しているサイト管理者や運営者
パンくず表示を細かく制御したい制作者
プラグインと併用する際の挙動を確認したい方
初心者にも分かるよう図やコード例を交えて説明します。

前提条件

WordPressの管理画面にアクセスできること、テーマの編集やプラグイン操作が行えることを想定します。作業前にバックアップを取ることをおすすめします。

本ドキュメントの進め方

各章を順に読むことで、まず基本を理解し、その後に個別や全体の設定方法、応用的なカスタマイズへと進めます。必要に応じて該当章だけを参照していただいても構いません。

Lightning G3のパンくずリスト機能の基本

概要

Lightningテーマ（G3）では、サイト閲覧者が現在の位置を把握しやすくするために、パンくずリストを標準で表示します。例：ホーム > カテゴリ > 記事タイトルという形で表示されます。

標準の表示と利点

ナビゲーションが分かりやすくなるため、訪問者の回遊を助けます。
検索エンジンにページ構造を伝える助けにもなります。

Lightning G3 Pro Unitでできること

Pro Unitを導入すると、次のような拡張が可能です。
– 表示位置の変更（ヘッダー下やコンテンツ上など）
– ページごとの表示・非表示設定
– 表示スタイルの調整（区切り文字やフォントサイズなど）

設定場所の目安

通常はWordPressのカスタマイザーや、Lightning G3 Pro Unitの専用設定ページで変更できます。設定画面を開けば直感的に操作できます。

注意点

プラグインやカスタムテンプレートで同じ場所に別のパンくずが出ると重複表示になる場合があります。その場合はどちらか一方を無効化してください。

ページ単位でパンくずリストを非表示にする方法

概要

固定ページや投稿ごとにパンくずリストを非表示にできます。Pro Unitを有効にすると編集画面の下部に「Lightning デザイン設定」が追加され、その中の「パンくずリストを表示しない」にチェックを入れるだけで、そのページのみ非表示になります。

手順

非表示にしたい固定ページまたは投稿の編集画面を開きます。
画面を下へスクロールして「Lightning デザイン設定」セクションを見つけます。
「パンくずリストを表示しない」チェックボックスにチェックを入れます。
ページを更新して変更を保存します。プレビューで表示を確認してください。

注意点

Pro Unitが有効でないとこの設定は表示されません。プラグインやテーマのバージョンを確認してください。
キャッシュを使用している場合、反映に時間がかかることがあります。キャッシュをクリアすると確実です。
同じ処理を複数のページで行う必要がある場合、サイト全体のカスタマイズを検討してください（次章参照）。

サイト全体でパンくずリストを非表示にする（カスタマイズ）

カスタマイザー（推奨）

管理画面で「外観 → カスタマイズ → レイアウト設定 → パンくずリスト設定」を開きます。
表示のON/OFFや表示位置（ヘッダー上、タイトル下など）を切り替えられます。
設定を変更したら「公開」ボタンを押して反映してください。

この方法はテーマの設定に従うため安全で簡単です。ただしテーマやプラグインによってはここで切れない場合があります。

カスタムCSSで強制的に非表示にする

カスタマイザーの「追加CSS」に以下を貼り付けます。

.breadcrumb { display: none !important; }

テーマによりクラス名が異なることがあります（例: .breadcrumbs、nav.breadcrumb、.vk-breadcrumb）。該当するクラス名を確認して置き換えてください。
特定のページだけ非表示にしたい場合は、bodyのクラスを使います。

body.home .breadcrumb { display: none !important; }

モバイルだけ非表示にする例：

@media (max-width:600px){ .breadcrumb { display:none !important; } }

注意点：CSSで非表示にすると見た目には消えますが、HTML自体は残ります。完全に出力を止めたい場合は、テーマの設定やフィルターで制御する必要があります。

フィルターフックやプラグインによる制御

Lightningテーマは vk_breadcrumb_html というフィルターフックを提供します。このフックを使うと、出力されるパンくずリストのHTMLをそのまま書き換えたり、空にして非表示にできます。以下に実例と注意点をわかりやすくまとめます。

基本例（全体を非表示にする）

add_filter('vk_breadcrumb_html', function($breadcrumb_html){
    return '';
});

functions.php やカスタムプラグインに入れると、パンくずリストの出力がすべて無効になります。

条件付きで非表示にする例

特定ページだけ非表示にしたいときは WordPress の条件タグを使います。

add_filter('vk_breadcrumb_html', function($html){
    if(is_singular('post')) return '';
    return $html;
});

部分的に変更する例

HTML文字列を加工して一部だけ消すことも可能です（例：ホームリンクを削除）。

add_filter('vk_breadcrumb_html', function($html){
    return preg_replace('/<a[^>]+>ホーム<\/a>\s*›\s*/u', '', $html);
});

プラグイン利用の提案

コード管理に慣れていない場合は「Code Snippets」などのプラグインで安全に追加できます。子テーマの functions.php に入れるか、専用の小さなプラグインとして管理してください。

注意点

キャッシュを有効にしていると変更が反映されないことがあります。キャッシュをクリアして確認してください。
フィルターは出力を直接変えるため、HTML構造を壊すと見た目に影響します。必ずバックアップとテストを行ってください。

この方法は柔軟で安全にパンくずを制御できます。必要に応じて具体的な条件や目的を教えていただければ、より適したコード例をお出しします。

VK Blocks Proや他プラグイン利用時の注意

概要

VK Blocks Proにはパンくずリストのブロックが用意されていますが、Lightning G3ではテーマ側で標準表示されます。そのため、追加でブロックを置く必要は基本的にありません。

よくある問題と原因

二重表示: テーマのパンくずとプラグイン／ブロックが両方出ることがあります。例としてBreadcrumb NavXTとの併用です。
レイアウト崩れ: 両方表示されるとデザインがくずれる場合があります。

回避方法（簡単な手順）

テーマ設定を確認し、パンくず表示のオン／オフを切り替えます。
VK Blocks Proのブロックを使う場合は、テーマの表示をオフにします。逆も同様です。
プラグイン（例: Breadcrumb NavXT）を使う場合は、プラグイン設定で出力を無効にするか、CSSで非表示にしてください。

競合チェックのすすめ方

まず一つずつ無効化して画面を確認します。どちらが出しているか特定できます。
開発者ツールでHTMLを見れば、出力元のクラス名やコメントで手がかりが得られます。

少し踏み込んだ対策

functions.phpにフィルターを入れてテーマの出力を止める方法があります。テーマやプラグインのアップデートで変わるため、変更点は記録してください。

注意点を押さえれば、重複や競合を避けて安定した表示にできます。

パンくずリストが表示されない場合の対処

まずは基本のチェックリスト

ページ編集画面で「パンくずリストを表示しない」にチェックが入っていないか確認します。例：固定ページや投稿の画面にあるチェック項目です。

キャッシュとバージョンの確認

ブラウザのキャッシュをクリアし、ページを再読み込みします。ブラウザシークレットモードで確認する方法も有効です。
テーマやプラグインのバージョンが最新か確認し、必要なら更新してください。

テーマ設定の切り替え

一度テーマのパンくず設定をOFFにして保存し、再度ONに戻すと復旧することがあります。簡単なリフレッシュ操作です。

プラグインの干渉チェック

プラグインを一つずつ無効化して、どれが影響しているか確認します。特にキャッシュ系やSEO系、ブロック系プラグインを疑ってください。

CSSやテンプレートの確認

開発者ツールでパンくずリストの要素があるか確認します。要素がありながら見えない場合はCSSでdisplay:noneなどが当たっている可能性があります。
子テーマやテンプレートファイルで表示を上書きしていないか確認します。

JavaScriptエラーの確認

ブラウザのコンソールにエラーが出ていないか確認します。JSエラーで表示処理が止まることがあります。

それでも直らない場合

問題を再現する手順、スクリーンショット、使用中のテーマ・プラグイン名とバージョン、PHP・WordPressのバージョンをまとめてサポートに連絡してください。詳細があれば解決が早まります。

その他のカスタマイズ・応用

セパレータ（区切り記号）の変更

VK Blocks Pro の設定画面からセパレータを変更できます。管理画面の VK Blocks Pro またはブロック設定内の「パンくず」項目を開き、指定の文字（例: 「>」「/」「›」）を入力してください。見た目を整える場合は CSS で余白や色を調整すると効果的です。

タイトルや階層を動的に変更する（フィルターフックの活用）

パンくずの表示内容をページごとに変えたい時は、フィルターフックで処理を差し替えます。以下はイメージ例です（フィルター名はプラグインによって異なります）。

add_filter('vk_breadcrumbs_items', 'my_modify_breadcrumbs');
function my_modify_breadcrumbs($items){
  if(is_singular('post')){
    // 最後の項目のタイトルを変更
    $items[count($items)-1]['title'] = '記事：'. get_the_title();
  }
  return $items;
}

セパレータをフィルターで変える例：

add_filter('vk_breadcrumbs_separator', function($sep){
  return '／';
});

応用例と注意点

カスタム投稿タイプやタクソノミー対応：条件分岐（is_post_type_archive, is_tax）で出し分けします。
多言語サイト：翻訳関数（__() など）で対応します。
見た目調整は CSS、挙動はフィルターで分けると保守しやすいです。

実際のフィルター名や実装はテーマ／プラグインごとに異なります。必ず開発者ドキュメントを確認し、変更前にバックアップを取ってください。

まとめ

Lightning G3（Pro Unit含む）では、パンくずリストの表示・非表示を複数の方法で柔軟に制御できます。編集画面や「Lightning デザイン設定」で個別ページごとに切り替え、カスタマイザーやCSS、PHPフィルターでサイト全体を一括制御できます。プラグイン（例：VK Blocks Pro）やテーマ設定と競合することがある点に注意してください。

主なポイント