
WordPressの検索ハイライト表示の仕方。(functions.phpに追加するだけ。)
です・ます調の文章でなくてすみません。当初は個人的なメモ書きだったためです。
Contents - 目次
検索キーワードでのハイライト表示はとても簡単。
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のフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。