WordPressの検索ハイライト表示の仕方。(functions.phpに追加するだけ。)ブログメモ デザイナー、コーチ、ディレクター|井川

igawa design.

Memo

WordPressの検索

です・ます調の文章でなくてすみません。当初は個人的なメモ書きだったためです。

検索キーワードでのハイライト表示はとても簡単。

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年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真は主にUnsplashPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。

デザイナー、ディレクター、講師、コーチ / 井川宜久

お問い合わせ CONTACT..

    免責事項について

    • 記事ページ(Memosのページ)は当初は文字通りメモ書きでした。その後、修正や更新をしております。
    • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ早急に対応いたします。
    • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。

    個人情報について

    • 個人情報はお問い合わせやお客さま対応のみでの利用とさせていただいております。
    • こちらから営業目的でご連絡することはありません。
    • ご本人様の了解や、法に基づいた理由がない限り、第三者へ開示することはありません。