wordpress-logo

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_content', 'wps_highlight_results');

上記の例では、検索結果のページ（search.php）で、［<?php the_title(); ?> ］または［<?php the_content(); ?>］で出力された情報に対して、検索されたキーワードを「<span class=”search-highlight”>〜</span>」で囲みます。

もし検索結果ページで［<?php the_content(); ?>］ではなく［<?php the_excerpt(); ?>］で抜粋文を出力させている場合は、コードの最後の行を［add_filter('the_content', 'wps_highlight_results');］に変更します。

最後に、出力された <span class=”search-highlight”>〜</span> を装飾するためにスタイルシートの設定をします。

span.search-highlight {background:yellow;}

ちょっとした一手間を加えるだけで、ユーザビリティの向上に役立ちます。
ぜひご利用ください。