検索キーワードをハイライト表示させる3ステップ
検索結果ページで検索キーワードをハイライト表示させる3ステップは以下の通りです。
- functions.phpにコードを追記する。
- 検索キーワードを装飾する。
- 検索キーワードがハイライトされている確認する。
個別に解説をしていきます。
手順1:functions.phpにコードを追記する
functions.phpに以下のコードを追記してください。
function wps_highlight_results($text) {
if(is_search()){
$sr = get_query_var('s');
$keys = explode(" ",$sr);
$text = preg_replace('/('.implode('|', $keys) .')/iu', '<span class="search-highlight">'.$sr.'</span>', $text);
}
return $text;
}
add_filter('the_title', 'wps_highlight_results');
add_filter('the_content', 'wps_highlight_results');
参考サイト:ONZE/BLOG
上記のコードを記述すると、検索結果の検索キーワードがハイライト表示されるようになります。
手順2:検索キーワードを装飾する
上記のコードを追記することで、検索キーワードが以下のSPAN要素で囲まれるようになります。
<span class="search-highlight">検索キーワード</span>
【.search-highlight】を装飾することで、検索キーワードを自由にハイライトできます。
例えば、以下のように装飾してやると
.search-highlight {
font-weight: bold;
background: linear-gradient(transparent 60%, #ffff66 60%);
}
以下のように検索キーワードをハイライト表示することができます。
検索キーワード
装飾はサイトのデザインなどを考慮して自由に設定してください。
手順3:検索キーワードがハイライトされている確認する
検索窓から適当なキーワードで検索してみましょう。

上記の様に検索結果ページで検索キーワードがハイライト表示されていれば成功です。
ハイライトの装飾は手順2で設定した内容によって異なります。
上記の画像は、当サイトの検索キーワードのハイライト表示です。
まとめ
検索結果ページの検索キーワードをハイライトして表示させる方法をご紹介しました。
- functions.phpにコードを追記する。
- 検索キーワードを装飾する。
- 検索キーワードがハイライトされている確認する。
3ステップで行える簡単なカスタマイズです。
検索結果ページで検索キーワードをハイライト表示したい方はぜひ挑戦してみてください。
コメントを残す