Lightningのドキュメントタイトルとパンくずリストをカスタマイズする

絞り込み検索をプラグインで実装してみよう」では、VK Filter Searchを使って機能を追加する方法を紹介しました。また、「Lightningの検索ページをカスタマイズする」では、検索結果を表示するページのカスタマイズ方法を解説しました。その過程で、ブラウザーのタブに表示される「“”の検索結果」という文言が気になったため、今回は、検索ページのドキュメントタイトルとパンくずリストを書き換える方法をご紹介します。

コード

以下のコードは、カスタム投稿タイプ「shop」の検索ページで、ドキュメントタイトルとパンくずリストを書き換えるためのものです。「絞り込み検索をプラグインで実装してみよう」で解説した設定を前提としています。

ベクトレの「Lightning の 404ページの見出し・パンくずを書き換える・コンテンツエリア上下の余白を無くす」を参考にしました。

// 表示する文字列
function zero1pg_shop_search_text() {
	return 'ショップ検索結果';
}

// ドキュメントタイトルの書き換え
add_filter( 'pre_get_document_title', function( $title ) {
	if ( is_search() && get_query_var('post_type') ===  'shop' ) {
		$title =  zero1pg_shop_search_text();
	}
	return $title;
}, 12 );

// パンくずリストの書き換え
add_filter( 'vk_breadcrumb_array', function( $breadcrumb_array ) {
	if ( is_search() && get_query_var('post_type') ===  'shop' ) {
		$breadcrumb_array[1]['name'] = zero1pg_shop_search_text();
	}
	return $breadcrumb_array;
});

コードの記述場所としては、子テーマのfunctions.phpファイルやCode Snippetsなどのプラグインが挙げられます。プラグインを利用すると、テーマを変更してもカスタマイズが維持されますが、今回のカスタマイズはLightningに特化したものであるため、子テーマのfunctions.phpでも特に問題ありません。

文字列を返す関数

ドキュメントタイトルとパンくずリストの両方の文字列を「ショップ検索結果」に変更したいので、文字列を返す関数zero1pg_shop_search_text()を定義しました。この関数の戻り値を変更すれば、呼び出し元すべてに反映されるため、一括変更が容易になります。

ドキュメントタイトルとパンくずリストで異なる文字列を設定する場合は、この関数を使わずに直接指定するとよいでしょう。

ドキュメントタイトルの書き換え

ブラウザーのタブに表示される文字列を「ドキュメントタイトル」と呼びます。「タイトル」という単語は、さまざまな文脈で使われるため、混乱しやすいです。ここで言う「タイトル」は、HTML文書のタイトル(document title)を指します。titleタグで囲まれた文字列のことです。

pre_get_document_titleフィルターフックを使い、ショップの検索ページの場合に$titleを「ショップ検索結果」に変更します。

詳しくは、pre_get_document_titleフィルターフックの公式ドキュメントを参照してください。「うまくいかなかったこと」でも触れているので、そちらも参考にしてください。

パンくずリストの書き換え

検索ページのパンくずリストは[ホーム/検索結果]と表示されます。このままでも問題ありませんが、簡単に書き換えられるので、試してみましょう。

vk_breadcrumb_arrayフィルターフックを使い、ショップの検索ページの場合に $breadcrumb_array[1]['name']を「ショップ検索結果」に変更します。

パンくずリストは、Webサイトの階層構造を示すものです。左から第一階層、第二階層と順番に表示されるため、$breadcrumb_array[0]が第一階層、$breadcrumb_array[1]が第二階層を表します。

$breadcrumb_arrayの構造については、/wp-content/themes/lightning/vendor/vektor-inc/vk-breadcrumb/src/VkBreadcrumb.phpを参照してください。

まとめ

意外と簡単に書き換えられることに驚いたのではないでしょうか。フィルターフックは、特定の変数をパラメーターとして受け取り、それを加工して返す仕組みです。パラメーターを知るには、WordPressの公式ドキュメントを確認するほか、var_dump()を使って実際にどのようなデータが渡されているのかを調べる方法もあります。例えば、var_dump($title);と記述すれば、pre_get_document_titleフィルターに渡される$titleの詳細を確認できます。こうした方法を活用することで、カスタマイズがスムーズに行えるようになります。

コメントする