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

応用編課題の絞り込み検索機能を VK Filter Search を使って実装し、カスタマイズする方法を紹介してきました。その過程で、ブラウザーのタブに表示される「“”の検索結果」という文言が気になりませんでしたか?私はとても気になったので、カスタマイズ方法をご紹介します。

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

// タイトルの書き換え
add_filter( 'document_title_parts', function( $title ) {
	if( is_search() ) {
		$title['title'] = zero1pg_shop_search_text();
	}
	return $title;
});

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

文字列を返す関数

タイトルとパンくずリストの両方の文字列を「ショップ検索」に変更したいので、文字列を返す関数 zero1pg_shop_search_text() を定義しました。これは、変更を容易にするためです。この関数を用いて文字列を変更すれば、関数を呼び出す箇所で変更が反映されるメリットがあります。別々の文字列にしたい場合、この関数は必要ありません。

タイトルの書き換え

ブラウザーのタブに表示されるのは、HTML の title タグで囲まれた文字列です。この「タイトル」という単語は、さまざまな意味で使われるので、混同しやすいです。ここで言う「タイトル(document title)」は、HTML文書のタイトルを指しています。

タイトルを書き換えるには、document_title_parts フィルターフックに function( $title ){ } を追加します。この無名関数は、検索ページの場合に $title を「ショップ検索」に書き換えます。渡される引数 $title は連想配列なので、$title['title'] のように要素名を使用して配列にアクセスします。

詳細については、apply_filters( ‘document_title_parts’, array $title ) を参照してください。「うまくいかなかったこと」というブログ記事でも触れているので、そちらも参考にしてください。

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

検索結果ページのパンくずリストは「ホーム/検索結果」と表示されます。このままでも問題ありませんが、簡単に書き換えられるので、その方法を紹介します。

vk_breadcrumb_array フィルターフックに function( $breadcrumb_array ){ } を追加します。この無名関数は、検索ページの場合に $breadcrumb_array を「ホーム/ショップ検索」に書き換えます。渡される引数 $breadcrumb_array は二次元配列なので、$breadcrumb_array[1]['name'] のように配列要素の配列にアクセスします。

パンくずリストはWebサイトの階層構造を示すものです。左から第一階層、第二階層と順番に表示されます。したがって、$breadcrumb_array[0] は第一階層を、$breadcrumb_array[1] は第二階層を表します。このことから、「ホーム」を「TOP」に変更したい場合は、$breadcrumb_array[0]['name'] = 'TOP'; とすることが想像できるのではないでしょうか。

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

まとめ

意外と簡単に書き換えられるので、ぜひ、ご自身のテスト環境で試してみてください。

コメントする

上部へスクロール