検索キーワードでのハイライト表示はとても簡単。

WordPressの検索機能は比較的簡単に設置できる。ただ、デフォルトの状態だと少々検索結果が分かりにくい。そこで何か良い方法はないものかと探していたら、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_excerpt', 'wps_highlight_results');
add_filter('the_content', 'wps_highlight_results');

参考：株式会社オンズさま 【WordPress】ユーザーが検索したキーワードをハイライトして表示させる。

装飾はcssで、こちらも簡単に。

functions.phpに上記コードを追記すると、サーチフォームから検索した時に、自動的に「search-highlight」というclassが追加される。色や文字の太さを変えたい場合はcssで「.search-highlight」という名前のクラスセレクタで指定すれば良い。

（例： .search-highlight { color: green; }
（例： .search-highlight { color: #0f0; }
（例： .search-highlight { color: rgb(0, 255, 0); }

これで一覧ページ（archive.php）で検索キーワードが緑色で表示される。class名は自由に変更可能。phpの関数名も変更は可能。もちろん変更せずにそのままでも利用できます。

（例： cssのクラス名 .search-highlight → .highlight
（例： phpの関数名 wps_highlight_results → highlight_results

backgroundプロパティにlinear-gradientを指定することにより、マーカー的に装飾することもできます。

CSS例

.search-highlight {
background: linear-gradient(transparent 60%, rgb(0, 255, 0) /*#0f0*/ 60%);
}

当サイトでも利用させていただいております。感謝です。

※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。（元々はメモ書きでしたので順次見直し、更新しています。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。