WordPress 検索ワードをハイライト表示する方法

WordPress でタグのアーカイブや検索結果ページで、指定したワードをハイライト表示する方法を紹介します。
例えば、検索結果ページの使い勝手を向上したい場合におすすめな方法です。

  1. 検索ワードをハイライト表示する方法
    1. 検索結果で検索ワードをハイライト表示する方法
    2. タグアーカイブで検索ワードをハイライト表示する方法

検索ワードをハイライト表示する方法

検索ワードをハイライト表示する場合は function.php にそれぞれのコードを追加します。
紹介する方法を実行した場合は、ハイライトしたい文言には mark タグで囲われるので、装飾は各自で行ってください。
また、strip_tags などでタグの削除などを行なっていると mark タグが削除される場合もあるのでご注意ください。

検索結果で検索ワードをハイライト表示する方法

検索結果ページでハイライト表示する場合は次のコードを function.php に追加してください。

/*【検索カスタマイズ】検索ワードをハイライトする */
function highlight_search_word($text){ // 関数「highlight_search_word」を定義
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_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'); // 抜粋に適用

タグアーカイブで検索ワードをハイライト表示する方法

タグアーカイブページでハイライト表示する場合は次のコードを function.php に追加してください。

/*【検索カスタマイズ】検索ワードをハイライトする */
function highlight_search_word($text){ // 関数「highlight_search_word」を定義
if(is_tax()){
$keys = single_term_title("", false); // タームタイトルをハイライトの対象に指定
$text = preg_replace('/('. $keys .')/iu', '<mark>
/*【検索カスタマイズ】検索ワードをハイライトする */
function highlight_search_word($text){ // 関数「highlight_search_word」を定義
if(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 をタグのアーカイブや検索結果ページで、指定したワードをハイライト表示する方法を紹介しました。