MENU

Lightningでパンくずリスト編集の基本をわかりやすく解説

大規模情報サイト運営
lightning パンくずリスト 編集
2025/10/29
目次

はじめに

本記事の目的

本記事は、WordPressテーマ「Lightning」に標準搭載されたパンくずリストの編集・カスタマイズ方法を丁寧に解説します。コード例やフィルターフックの使い方を実践的に示し、プラグインや表示位置の調整、階層の変更まで扱います。初心者の方でも順を追って理解できる構成です。

読者対象

  • Lightningを使っている方
  • パンくずリストを自分で調整したい方
  • 子テーマやfunctions.phpにコードを追記したことがある方

前提と準備

基本はフィルターフックでのカスタマイズです。編集前に必ずバックアップを取り、子テーマで作業してください。簡単なPHP編集ができれば実践できます。

本記事の流れ

第2章でパンくずリストの仕組みを説明し、第3章で基本の編集方法を解説します。第4〜6章で実践例や細かいカスタマイズ、第7章で注意点、第8章でまとめと魅力を述べます。第9章にはよくあるトラブルとQ&Aを用意しています。

Lightningテーマのパンくずリストとは

概要

Lightningは株式会社ベクトルが開発した人気のWordPressテーマで、パンくずリストを標準搭載しています。パンくずリストはページ階層を視覚的に示す要素で、訪問者が現在地を把握しやすくなります。基本は自動表示のため、追加設定なしで使えます。

主な特徴

  • 自動生成：投稿や固定ページ、カテゴリの階層から自動で作成します。
  • 構造化データ対応：Googleのリッチリザルトに対応しており、検索結果での表示向上に役立ちます。
  • 軽量で分かりやすい表示：テーマに馴染むデザインで、そのまま使いやすいです。

表示の仕組みと例

WordPressの階層（ホーム > カテゴリ > 投稿）を元に出力します。例えば「ホーム > ブログ > 記事タイトル」といった形です。固定ページの親子関係やカテゴリを反映します。

どんな場合に便利か

サイト構造が深いときや、訪問者に現在位置を明示したいときに特に有効です。基本の自動機能で多くのサイトは十分ですが、カスタム投稿や独自の階層がある場合は編集が必要になることがあります。

Lightningのパンくずリスト編集の基本

概要

Lightningのパンくずはフィルター（フック）で変更します。主にvk_breadcrumb_arrayで配列をいじり、vk_breadcrumb_htmlで最終出力のHTMLを調整します。管理画面での細かい制御は標準で少なく、functions.phpか専用プラグインで対応します。

vk_breadcrumb_arrayの使い方

このフィルターはパンくずを配列で受け取ります。配列を編集して返すだけで、リンク追加・ラベル変更・順序入れ替えができます。例：

add_filter('vk_breadcrumb_array', function($crumbs){
  $crumbs[1]['label']='新しいラベル';
  return $crumbs;
});

vk_breadcrumb_htmlでの調整

HTMLを直接いじりたい時に使います。タグやセパレーターを変更したい場合に便利です。

安全な編集方法

子テーマのfunctions.phpか専用プラグインで実装してください。編集前にバックアップを取り、変更は少量ずつ行うと安全です。

デバッグのコツ

一時的にvar_dumpやerror_logで配列を確認すると分かりやすいです。

実践例1：カスタム投稿タイプでパンくずリストを書き換える

概要

カスタム投稿タイプ「shop」の検索結果ページで、ページタイトルとパンくずリストの第2階層を「ショップ検索結果」に変える例を示します。functions.phpやCode Snippetsに貼るだけで動作します。

コード例

// タイトルを変更
add_filter('document_title_parts', function($parts){
  if( is_search() && get_query_var('post_type') === 'shop' ){
    $parts['title'] = 'ショップ検索結果';
  }
  return $parts;
});

// パンくずリストの第2階層を変更（breadcrumb_trailを使う例）
add_filter('breadcrumb_trail_items', function($items){
  if( is_search() && get_query_var('post_type') === 'shop' ){
    // 配列の0がホーム、1が2階層目になる想定
    if( isset($items[1]) ){
      $items[1] = 'ショップ検索結果';
    }
  }
  return $items;
});

解説

  • document_title_partsフィルターで、ブラウザやテーマが出すタイトルを上書きします。
  • breadcrumb_trail_itemsフィルターは多くのパンくず実装で使えます。テーマによってフィルター名や配列構成が異なるため、実際はテーマのソースを確認してください。

設置と動作確認

  1. functions.phpまたはCode Snippetsに追加します。
  2. /?s=検索語&post_type=shop のようにshop検索ページで表示を確認します。

注意点

  • テーマやプラグインによってパンくずのフィルター名やインデックスが違います。動かなければテーマのbreadcrumb関数を探して対応してください。

実践例2：動的なパンくずリスト編集（階層やラベルのカスタマイズ）

概要

vk_breadcrumb_htmlフィルターでパンくずのHTMLを受け取り、条件に応じて階層やラベルを動的に変更できます。ここでは分かりやすい2つの実例と注意点を示します。

例1：最終項目（現在のページ）のラベルを変更

add_filter('vk_breadcrumb_html','my_vkb_rename',10,2);
function my_vkb_rename($html,$args){
  if(is_singular('product')){
    $dom = new DOMDocument();
    @$dom->loadHTML(mb_convert_encoding($html,'HTML-ENTITIES','UTF-8'));
    $lis = $dom->getElementsByTagName('li');
    if($lis->length){
      $last = $lis->item($lis->length-1);
      $last->nodeValue = '製品詳細';
      $html = $dom->saveHTML($dom->getElementsByTagName('ul')->item(0));
    }
  }
  return $html;
}

例2：階層を一つ追加してカスタムリンクを挿入

add_filter('vk_breadcrumb_html','my_vkb_insert',10,2);
function my_vkb_insert($html,$args){
  if(is_category('news')){
    $dom = new DOMDocument();
    @$dom->loadHTML(mb_convert_encoding($html,'HTML-ENTITIES','UTF-8'));
    $ul = $dom->getElementsByTagName('ul')->item(0);
    $lis = $ul->getElementsByTagName('li');
    $last = $lis->item($lis->length-1);
    $new = $dom->createElement('li');
    $a = $dom->createElement('a','お知らせ一覧');
    $a->setAttribute('href','/news/');
    $new->appendChild($a);
    $ul->insertBefore($new,$last);
    $html = $dom->saveHTML($ul);
  }
  return $html;
}

注意点

  • HTML操作は文字コードに注意して実行してください。DOMDocumentを使うと安定します。
  • 出力は必ずエスケープや検証を行ってください（XSS対策）。
  • 条件分岐で特定ページのみ処理し、無駄な負荷を避けます。

上の例を応用して、階層名の言い換え、不要項目の削除、あるいは翻訳対応など柔軟に実装できます。

表示位置・非表示・セパレーターの変更など他のカスタマイズ

表示位置の変更

Lightning本体はカスタマイザーやテーマオプションでパンくずの表示位置を変更できます。ブロックエディターを使う場合は、VK Blocks Proの「パンくずブロック」を任意のブロック（ヘッダー直下や記事タイトルの上など）に入れて配置できます。手順例：
1. 外観 > カスタマイズ を開く
2. パンくず（Breadcrumb）関連の項目で位置を選ぶ、またはブロックを挿入

ページごとの非表示

Lightning G3 Pro Unitは管理画面でページ単位の非表示を設定できます。固定ページで見えないと感じたら、まずそのページの編集画面とG3 Proの設定を確認してください。代替手段として、カスタムCSSで特定ページIDのみ非表示にする方法もあります。
例：
.page-id-123 .breadcrumbs{display:none;}

セパレーターやフォントの変更

VK Blocks Proでは区切り記号（> や / など）やフォントサイズをブロックのオプションで設定できます。プラグインがない場合はCSSで書き換えます。
例：
.breadcrumbs .separator{content:”/”; margin:0 6px}

固定ページで表示されない場合の確認ポイント

  • G3 Pro Unitでそのページが非表示になっていないか
  • テンプレートやカスタム投稿の条件分岐で除外されていないか
  • キャッシュやキャッシュプラグインの影響がないか

これらを順に確認すると、多くの表示・見た目の問題は解決します。必要であれば、実際の設定画面や使っているプラグイン名を教えてください。具体的に案内します。

パンくずリスト編集時の注意点

編集場所は子テーマで行う

functions.phpやテンプレートの直接編集は推奨しません。子テーマにコピーして編集すれば、親テーマのアップデートで上書きされません。具体例：子テーマのfunctions.phpにフィルタや関数を追加します。

プラグインでのカスタマイズ

プラグイン経由ならテーマを替えても設定が残ります。ただし、Lightning固有のフックや出力構造はプラグインから上書きできない場合があります。対象のHTML構造を確認してから実装してください。

アップデートと互換性の確認

テーマやプラグインの更新で仕様が変わることがあります。更新前に変更点を確認し、ステージング環境で動作確認を行ってください。バックアップも必ず取ってください。

実装上の注意（命名・安全性・テスト）

関数名はプレフィックスを付けて衝突を避けます。出力はエスケープしてXSS対策を行ってください。管理画面とフロント両方で表示を確認し、モバイルでも崩れないかチェックします。

よくあるトラブルと対処法

パンくずが二重に表示される場合はテーマ側の出力を無効化してから自作の出力に切り替えます。ラベルが翻訳されない時はgettextフィルタや翻訳ファイルを確認してください。問題が解決しない場合は元に戻せるよう変更前のコードを保存しておくと安心です。

まとめとLightningのカスタマイズの魅力

はじめに

Lightningは標準でパンくずリストを自動生成しつつ、豊富なフックや拡張プラグインで柔軟に変えられる点が最大の魅力です。標準仕様を活かしつつ部分的にカスタマイズすると、手間を抑えながら効果を出せます。

主な利点

  • SEOとユーザビリティの両立が図りやすい。検索エンジン向けの構造を保ちながら、人に優しい表示が可能です。
  • 柔軟な拡張性。必要な箇所だけフィルターやアクションで差し替えられます。
  • 保守しやすい。子テーマや小さなプラグインで対応すると、テーマの更新に影響されにくくなります。

実践のポイント

  1. まずはデフォルトで表示を確認してください。余分な変更は不要です。
  2. 変更は子テーマか専用プラグインに集約します。functions.phpに直接書く場合もバックアップを取りましょう。
  3. ラベルや階層の調整はフィルターフックで行うと安全です。URLや表示順を壊さないように少しずつ変更してください。
  4. カスタム投稿やアーカイブを扱うときは、実際のページで動作確認を行います。

注意点

テスト環境での確認、バックアップ、モバイル表示のチェックを忘れないでください。SEOの最適化に偏りすぎず、訪問者が分かりやすい表示を重視してください。

次の一歩

まずは小さな変更から試してください。本書の実例（第4〜7章）を参考にするとスムーズに進められます。段階的に改善すれば、安全に使いやすいパンくずリストを実現できます。

参考：よくあるトラブル・Q&A

Q1: パンくずのタイトルが反映されない

よくある原因は他のSEOプラグインや別のフィルタが優先されていることです。まずは一時的に他のプラグインを無効化して確認してください。テンプレート内で独自にタイトルを出力している場合は、テーマ側の処理を見直します。

Q2: 特定ページでパンくずが表示されない

そのページが非表示設定になっていないか、ページビルダーやカスタムテンプレートでパンくず出力を上書きしていないかを確認します。CSSでdisplay:noneになっていないかもチェックしてください。

Q3: 構造化データが正しくない／出ない

構造化データはテーマやプラグインの出力に依存します。最新版に更新し、Googleの構造化データテストで確認してください。必要ならテーマ側のフィルタでJSON-LDを補正します。

Q4: セパレーターや階層が期待と違う

テーマ設定やフィルタでセパレーターを変えられます。階層がおかしい場合は投稿タイプや固定ページの親子関係、カスタムタクソノミーの設定を見直します。

Q5: キャッシュやCDNで反映されない

ブラウザキャッシュ、サイトキャッシュ、CDNキャッシュをクリアしてから確認してください。

トラブルシューティングの簡単な手順:
1) 変更前にバックアップ
2) プラグインを順に無効化して原因特定
3) テーマのテンプレートやフィルタを確認
4) キャッシュをクリアして再検証

上記で解決しない場合は、使用しているテーマ名・プラグイン名・再現手順を添えてフォーラムや公式サポートに問い合わせると早く解決します。

＼ 最新情報はInstagramで📲 ／

Instagramを見る

人気投稿

大規模情報サイト運営
lightning パンくずリスト 編集
よかったらシェアしてね！
  • URLをコピーしました！

この記事を書いた人

userのアバター user

関連記事

目次