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