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

Memo

WordPressの検索ハイライト表示の仕方。(functions.phpに追加するだけ。)

WordPressの検索

WordPressの検索ハイライト表示の仕方。(functions.phpに追加するだけ。)

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

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

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

お問い合わせ CONTACT..

    Name(required)お名前 (必須)
    Furigana(required)ふりがな (必須)
    Email(required)メールアドレス (必須)
    Phone Number(required)電話番号 (必須)
    Message(required)ご質問・ご要望 (必須)


    免責事項について

    • 事実や経験、調査や検証を基にしていますが、私はただの人間です。万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。
    • 万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。