検索キーワードをハイライト表示させる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ステップで行える簡単なカスタマイズです。
検索結果ページで検索キーワードをハイライト表示したい方はぜひ挑戦してみてください。
WordPressカスタムメニューからIDやクラスを削除する方法
コメントを残す