WordPress 検索ワードをハイライト表示する方法
最終更新日 - 公開日 2023.11.24
by
WordPress で検索結果ページやタグのアーカイブページで、検索ワードをハイライト表示する方法を紹介します。
検索結果ページの使い勝手を向上したい場合におすすめです。
検索ワードをハイライト表示する方法
検索ワードをハイライト表示する場合は function.php に次のコードを追加します。
実行した場合、ハイライトしたい検索ワードは mark タグで囲われるので、装飾は各自で行ってください。
注意として strip_tags でタグの削除を行うと mark タグが削除されるのでご注意ください。
検索結果で検索ワードをハイライト表示する方法
検索結果ページでハイライト表示する場合は次のコードを function.php に追加してください。
/*【検索カスタマイズ】検索ワードをハイライトする */
function highlight_search_word($text){ // 関数「highlight_search_word」を定義
if (is_admin()) {
return $text; // 管理画面の場合は何も変更せずにそのまま返す
}
if (is_search()){ // 検索ページが表示されている時に実行
$keys = implode('|', explode(' ', get_search_query())); // 検索ワードの分割して配列にして返す
$text = preg_replace('/('. $keys .')/iu', '<mark>/*【検索カスタマイズ】検索ワードをハイライトする */
function highlight_search_word($text){ // 関数「highlight_search_word」を定義
if (is_admin()) {
return $text; // 管理画面の場合は何も変更せずにそのまま返す
}
if (is_search()){ // 検索ページが表示されている時に実行
$keys = implode('|', explode(' ', get_search_query())); // 検索ワードの分割して配列にして返す
$text = preg_replace('/('. $keys .')/iu', '<mark>\0</mark>', $text); // 該当ワードを mark で囲む
}
return $text; // 変更した値を呼び出し元に戻す
}
add_filter('the_title', 'highlight_search_word'); // タイトルに適用
add_filter('the_content', 'highlight_search_word'); // 本文に適用
add_filter('the_excerpt', 'highlight_search_word'); // 抜粋に適用
</mark>', $text); // 該当ワードを mark で囲む
}
return $text; // 変更した値を呼び出し元に戻す
}
add_filter('the_title', 'highlight_search_word'); // タイトルに適用
add_filter('the_content', 'highlight_search_word'); // 本文に適用
add_filter('the_excerpt', 'highlight_search_word'); // 抜粋に適用
管理画面で実行されないように is_admin で管理画面を対象外にします。
タグアーカイブで検索ワードをハイライト表示する方法
タグアーカイブページでハイライト表示する場合は次のコードを function.php に追加してください。
/*【検索カスタマイズ】検索ワードをハイライトする */
function highlight_search_word($text){ // 関数「highlight_search_word」を定義
if (is_admin()) {
return $text; // 管理画面の場合は何も変更せずにそのまま返す
}
if (is_search()){ // 検索ページが表示されている時に実行
$keys = implode('|', explode(' ', get_search_query())); // 検索ワードの分割して配列にして返す
$text = preg_replace('/('. $keys .')/iu', '<mark>/*【検索カスタマイズ】検索ワードをハイライトする */
function highlight_search_word($text){ // 関数「highlight_search_word」を定義
if (is_admin()) {
return $text; // 管理画面の場合は何も変更せずにそのまま返す
}
if (is_search()){ // 検索ページが表示されている時に実行
$keys = implode('|', explode(' ', get_search_query())); // 検索ワードの分割して配列にして返す
$text = preg_replace('/('. $keys .')/iu', '<mark>\0</mark>', $text); // 該当ワードを mark で囲む
} elseif (is_tax()){
$keys = single_term_title("", false); // タームタイトルをハイライトの対象に指定
$text = preg_replace('/('. $keys .')/iu', '<mark>\0</mark>', $text); // 該当ワードを mark で囲む
}
return $text; // 変更した値を呼び出し元に戻す
}
add_filter('the_title', 'highlight_search_word'); // タイトルに適用
add_filter('the_content', 'highlight_search_word'); // 本文に適用
add_filter('the_excerpt', 'highlight_search_word'); // 抜粋に適用
</mark>', $text); // 該当ワードを mark で囲む
} elseif (is_tax()){
$keys = single_term_title("", false); // タームタイトルをハイライトの対象に指定
$text = preg_replace('/('. $keys .')/iu', '<mark>/*【検索カスタマイズ】検索ワードをハイライトする */
function highlight_search_word($text){ // 関数「highlight_search_word」を定義
if (is_admin()) {
return $text; // 管理画面の場合は何も変更せずにそのまま返す
}
if (is_search()){ // 検索ページが表示されている時に実行
$keys = implode('|', explode(' ', get_search_query())); // 検索ワードの分割して配列にして返す
$text = preg_replace('/('. $keys .')/iu', '<mark>\0</mark>', $text); // 該当ワードを mark で囲む
} elseif (is_tax()){
$keys = single_term_title("", false); // タームタイトルをハイライトの対象に指定
$text = preg_replace('/('. $keys .')/iu', '<mark>\0</mark>', $text); // 該当ワードを mark で囲む
}
return $text; // 変更した値を呼び出し元に戻す
}
add_filter('the_title', 'highlight_search_word'); // タイトルに適用
add_filter('the_content', 'highlight_search_word'); // 本文に適用
add_filter('the_excerpt', 'highlight_search_word'); // 抜粋に適用
</mark>', $text); // 該当ワードを mark で囲む
}
return $text; // 変更した値を呼び出し元に戻す
}
add_filter('the_title', 'highlight_search_word'); // タイトルに適用
add_filter('the_content', 'highlight_search_word'); // 本文に適用
add_filter('the_excerpt', 'highlight_search_word'); // 抜粋に適用
例えば、特定のカスタムタクソノミーのみで実装したい場合は is_tax() に、次のような任意のスラッグ is_tax('exsample-tag') を追加してください。
まとめ
WordPress で検索結果ページやタグのアーカイブページで、検索ワードをハイライト表示する方法を紹介しました。
