【WordPress】ユーザーが検索したキーワードをハイライトして表示させる。

Ads by Google

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;} 

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

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google

Leave a Replyコメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です