LightningテーマのWordPressサイトを表示するノートPCの画面に、パンくずリストと矢印・ギアアイコンが描かれた青基調のフラットイラスト

こんにちは、サイト管理者のわかっち (@wakatchi_tech) です。

質問者

Lightningのパンくずリストを動的に書き換えたいんだけどな

WordPressのデザインテーマであるLightningは、画面の上部や下部にパンくずリストを表示できます。

パンくずリストは Google のリッチリザルト対象となり、「サイト内で現在どの階層にいるか」を検索エンジンと読者双方に伝える重要な手がかりになります。

WordPress 管理画面だけではパンくずリストを細かく制御できないため、特定のターム（Term）に合わせて階層を変えたいときはコード側での調整が欠かせません。

この記事では、 Lightningで動的にパンくずリストを書き換える方法をご紹介します。

この記事は次のような方にお勧めです

  • 有料版Lightningテーマを扱うWordPressのサイト開発者
  • タクソノミーやカスタム投稿の階層を自由に変えたい開発者

なお、LightningはVektor社の製品です。詳細はこちらをご覧ください。

Vektor Web Solutions | 株式会社ベクトル開発のWordPressテーマ・プラグイン・ライセンス販売サイト VWS

人気国産テーマLightningのプロ機能や機能拡張プラグインVK Blocks Proなど、WordPressウェブ制作向けオールインワンライセンスの販売サイト

Vektor Web Solutions

目次

パンくずリストはvk_breadcrumb_htmlフィルタで書き換える

Lightningのパンくずリストは、フィルターフックvk_breadcrumb_htmlの引数を書き換えることで変更できます。

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

vk_breadcrumb_htmlフィルタの引数$breadcrumb_html

vk_breadcrumb_htmlフィルタの引数$breadcrumb_htmlは、変数名のとおりパンくずリストのHTML文字列です。

$breadcrumb_htmlは完成した HTML 文字列です。単純置換か一から生成するかで実装難度が大きく変わるため、変更方針を先に決めておくと安全です。

以下は$breadcrumb_htmlの出力例です。

<!-- [ #breadcrumb ] -->
<div id="breadcrumb" class="breadcrumb">
 	<div class="container">
 		<ol class="breadcrumb-list" itemscope itemtype="https://schema.org/BreadcrumbList">
 			<li class="breadcrumb-list__item breadcrumb-list__item--home" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
				<a href="http://localhost:8000" itemprop="item">
					<i class="fas fa-fw fa-home"></i>
					<span itemprop="name">HOME</span>
				</a>
				<meta itemprop="position" content="1" />
 			</li>
 			<li class="breadcrumb-list__item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
	 			<a href="http://localhost:8000/category/aaa" itemprop="item">
	 				<span itemprop="name">aaa</span>
	 			</a>
	 			<meta itemprop="position" content="2" />
	 		</li>
	 		<li class="breadcrumb-list__item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
	 			<span itemprop="name">bbb</span>
	 			<meta itemprop="position" content="3" />
	 		</li>
	 	</ol>
	 </div>
</div>
<!-- [ /#breadcrumb ] -->

Lightningのデザインやパンくずリストのリッチリザルトを維持するため、CSSのクラス名やパンくずリストのスキーマ指定は変えずに、aタグのURLやitemprop="name"が設定されたspanタグのテキストを変更します。

$breadcrumb_htmlを変更すればそのままパンくずリストに反映されるため、柔軟性が高いのは開発者にとっては大変ありがたいです。

カスタム投稿やタクソノミーによってパンくずリストを変更する例

カスタム投稿や、投稿が特定のタクソノミーの時はパンくずリストをカスタマイズしたいことがよくあります。

以下は、カスタム投稿やタクソノミーの時にパンくずリストをカスタマイズする例です。

なお、このサンプルの関数内は擬似コードですので、そのままコピーしても動作しない点にご留意ください。

add_filter(
    'vk_breadcrumb_html',
    function( $breadcrumb_html ){
        if( is_singular( 'my_post' ) ) {
            $post = get_post();
            $template_param = [
                'post_id' => $post->ID,
            ];
            // カスタム投稿の時にパンくずリストを変更
            $breadcrumb_html = WPFunctions::render_template( "my-post-breadcrumb",$template_param);
        } elseif( is_tax( [ 'my_tax' ] ) ){
            // カスタム投稿の時にパンくずリストを変更
            $breadcrumb_html = WPFunctions::render_template( "my-tax-breadcrumb",$template_param);
		}
        return $breadcrumb_html;
    }
)

VkBreadcrumb::get_array()で構造化されたパンくずリストのデータを扱う

vk_breadcrumb_htmlフィルタの引数$breadcrumb_htmlはHTML文字列のため、そのままカスタマイズするには文字列の置換が必要ですが、Ligntningが提供するVkBreadcrumb::get_array()を使えば、構造化されたパンくずリストのデータ（連想配列）を使えるため、ゼロからカスタマイズすることが容易になります。

ご案内

VkBreadcrumb::get_array()は、VK-Blocks（無料／有料）プラグインに含まれています。

VkBreadcrumb::get_array()

VkBreadcrumb::get_array()は、Lightningにおいてパンくずリスト表示時に呼び出すことで構造化されたパンくずリストのデータを取得できるAPIです。

例えば、上述のパンくずリストのHTMLですと、以下のような連想配列が取得できます。

array(
    [0] => array(
        "name"  => "ホーム",
        "id"    => "",
        "url"   => "http://localhost:8000",
        "class" => "breadcrumb-list__item--home",
        "icon"  => "fas fa-fw fa-home"
    ),
    [1] => array(
        "name"  => "aaa",
        "id"    => "",
        "url"   => "http://localhost:8000/category/aaa/",
        "class" => "",
        "icon"  => ""
    ),
    [2] => array(
        "name"  => "bbb",
        "id"    => "",
        "url"   => "",
        "class" => "",
        "icon"  => ""
    )
);

この連想配列を使うことで、「パンくずリストの第２層まで標準の機能を使う」「第３層は独自の名前を表示する」などが可能になります。

add_filter(
    'vk_breadcrumb_html',
    function( $breadcrumb_html ){
        if( is_singular( 'my_post' ) ) {
            $post = get_post();
            $default_breadcrumb_array = VkBreadcrumb::get_array();
            // 連想配列をカスタマイズ
            updated_breadcrumb_array = ......
            $template_param = [
                'post_id' => $post->ID,
                'breadcrumb_array' => updated_breadcrumb_array,
            ];
            $breadcrumb_html = WPFunctions::render_template( "my-post-breadcrumb",$template_param);
        } elseif( is_tax( [ 'my_tax' ] ) ){
            // 割愛.....
		}
        return $breadcrumb_html;
    }
)
注意点

VkBreadcrumb::get_array()は、Lightningのパンくずリストをカスタマイズするために正式提供されたAPIではない可能性があるため、注意してご利用ください。

まとめ

今回は、Lightningが提供するフィルタを使って、パンくずリストを動的に変更する方法をご紹介しました。

あまり機会は多くないものの、独自のパンくずリストを表示したい時に、フックするフィルタがないと困ってしまいますが、Lightningはフィルタを提供しているため大変助かります。

Lightningのカスタマイズ方法は比較的情報が発信されているほうですが、実際のコードを見てみると、まだまだ便利なアクションフックやフィルターフックが数多くあります。

引き続き、Lightningの便利な小ネタを発信していきます。

本記事が少しでもお役に立てれば幸いです。

最後までお読みいただき、ありがとうございました！

わかっち

有料版（Lightning G3 Pro Pack）を含むVektor Passportをご紹介します。よろしければどうぞ

Vektor Passport（ライセンス期間3年）
カテゴリー
Lightning、WordPress
タグ
前の記事
Poeditを使ったWordPress翻訳ファイル（.po/.mo）の編集方法
2025年3月5日
次の記事
Ultimate Member実践ガイド①：4ステップで完成！ドラッグ＆ドロップで作るユーザ登録フォーム
2025年6月4日