応用編課題の絞り込み検索機能を 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 を参照してください。
まとめ
意外と簡単に書き換えられるので、ぜひ、ご自身のテスト環境で試してみてください。