検索結果ページのタイトルタグの書き換え
HTMLの head の title タグの中身は自動で検索条件が入るようになっています。
ただし、表示形式の仕様（各項目のセパレータの文字列など）は好みがわかれると思いますので、改変したい場合は以下のコードを子テーマの functions.php などに書いて、必要に応じて改変してください。
// HTML の head 内のタイトルタグなど、VK_Filter_Search_Title::get_search_title( $args ) の
// デフォルトパラメーター改変例
add_filter(
'vkfs_default_search_title_args',
function ( $args ) {
// 改変する項目の配列（全項目書かなくても改変したい項目以外は削除可）
$custom_args = array(
// 検索クエリ部分の表示形式
'queries_format' => '検索結果: %s',
// 各検索項目名を表示するかどうか true / false
'query_title_display' => true,
// 各検索項目名の後に表示する文字列
'query_title_after' => ': ',
// 検索項目が or 検索の場合の検索要素間の表示文字列
'query_element_or' => 'または',
// 検索項目が and 検索の場合の検索要素間の表示文字列
'query_element_and' => 'かつ',
// 検索要素の前に表示する文字列
'query_element_before' => '「',
// 検索要素の後に表示する文字列
'query_element_after' => '」',
// 各検索項目の後に表示する文字列
'query_elements_after' => ', ',
// 日付検索の From 表示形式
'query_date_min_format' => '%s以降',
// 日付検索の To 表示形式
'query_date_max_format' => '%s以前',
// 日付検索の From ～ To 表示形式
'query_date_range_format' => '%1$s〜%2$s',
// 検索結果の後に表示する文字列
'queries_after' => '| ' . get_bloginfo( 'name' ),
);
// カスタマイズする部分 と 元の配列 をマージ
$args = wp_parse_args( $custom_args, $args);
return $args;
}
);クラッシックテーマでの使用
検索結果ページに現在の検索条件を文字列で表示する
検索結果ページなどに現在の検索条件を文字列で表示したい場合は以下のように書くと表示する事ができます。
<?php
if ( class_exists( 'VK_Filter_Search_Title' ) ) {
$args = array(
// 検索クエリ部分の表示形式
'queries_format' => '検索結果: %s',
// 各検索項目名を表示するかどうか true / false
'query_title_display' => true,
// 各検索項目名の後に表示する文字列
'query_title_after' => ': ',
// 検索項目が or 検索の場合の検索要素間の表示文字列
'query_element_or' => 'または',
// 検索項目が and 検索の場合の検索要素間の表示文字列
'query_element_and' => 'かつ',
// 検索要素の前に表示する文字列
'query_element_before' => '「',
// 検索要素の後に表示する文字列
'query_element_after' => '」',
// 各検索項目の後に表示する文字列
'query_elements_after' => ', ',
// 日付検索の From 表示形式
'query_date_min_format' => '%s以降',
// 日付検索の To 表示形式
'query_date_max_format' => '%s以前',
// 日付検索の From ～ To 表示形式
'query_date_range_format' => '%1$s〜%2$s',
// 検索結果の後に表示する文字列
'queries_after' => '| ' . get_bloginfo( 'name' ),
);
echo VK_Filter_Search_Title::get_search_title( $args );
}?>上記コードでは $args にすべてのパラメーターを記載していますが、実際に使用する際は改変したい部分だけのパラメーターで結構です。
例
<?php
if ( class_exists( 'VK_Filter_Search_Title' ) ) {
// 改変したい項目があれば引数に指定して渡す
$args = array(
'query_title_display' => false,
'queries_after' => '',
);
echo VK_Filter_Search_Title::get_search_title( $args );
}?>ブロックテーマの場合
「Search Result Title 」ブロックを配置すれば同様の事がノーコードで実現可能です。
インナーブロックにカスタムHTMLブロックなどを許可する
VK Filter Search ブロックの中には、あらかじめ許可されているブロック以外は配置できなくなっています。
しかし、任意のブロックや、カスタムHTMLブロックを配置してそこにコードを書いてカスタマイズしたい時などは以下の方法で可能です。
JavaScriptで改変する場合
以下のコードでは カスタムHTMLブロックを使う事ができるようになります。
const AllowHtmlToVKFS = (settings, name) => {
if (name === 'vk-filter-search-pro/filter-search-pro') {
const { allowedBlocks = [] } = settings;
return {
...settings,
allowedBlocks: [...allowedBlocks, 'core/html'],
};
}
return settings;
};
wp.hooks.addFilter(
'blocks.registerBlockType',
'core/html',
AllowHtmlToVKFS,
10
);PHPで改変する場合
上記のように、改変用のJavaScriptファイルを用意してそれを読み込むのが面倒という人は、functions.php などのPHPファイルから以下のように書いても対応可能です。
function my_allow_html_block_to_vkfs_editor_scripts() {
// インラインJavaScriptコード
$inline_script = <<<EOD
const AllowHtmlToVKFS = (settings, name) => {
if (name === 'vk-filter-search-pro/filter-search-pro') {
const { allowedBlocks = [] } = settings;
return {
...settings,
allowedBlocks: [...allowedBlocks, 'core/html'],
};
}
return settings;
};
wp.hooks.addFilter(
'blocks.registerBlockType',
'core/html',
AllowHtmlToVKFS,
10
);
EOD;
// スクリプトを登録後、インラインスクリプトを追加
wp_add_inline_script( 'vk-filter-search-pro-block', $inline_script );
}
add_action( 'enqueue_block_editor_assets', 'my_allow_html_block_to_vkfs_editor_scripts' );注意
VK Filter Search Pro はインナーブロックの幅制御処理が入っています。
独自にカスタマイズして利用できるようにしたブロックにはそれが反映されませんので、自身でCSSなどを書いて調整が必要です。
独自にインナーブロックを追加して配置している場合の崩れはサポート対象外となりますで予めご了承願います。