WordPressの検索ハイライト表示の仕方。（functions.phpに追加するだけ。） / メモ / いがわ

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

2021.08.25 2024.06.15更新。

Contents - 目次

1 検索キーワードでのハイライト表示はとても簡単。
2 ハイライトの装飾は、CSSでデザインでき。
3 WordPress 関連メモ。

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

WordPressの検索結果をハイライト表示で。

見た目でもわかりやすく。

WordPressの検索機能は比較的簡単に設置できる。ただ、デフォルトの状態だと少々検索結果が分かりにくい。

そこで何か良い方法はないものかと探していたところ、functions.phpに下記の記述を追加するだけで、検索キーワードのハイライト表示が簡単に実装できた。

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でデザインでき。

CSSで色や文字のスタイルをデザイン。

検索結果のclass名を活用する。

functions.phpに上記コードを追記すると、サーチフォームから検索した時に、自動的に「search_highlight」というclassが追加される。

色や文字の太さを変えたい場合はcssで「.search_highlight」という名前のクラスセレクタで指定すれば良い。

例）

.search_highlight { color: green; }
.search_highlight { color: #0f0; }
.search_highlight { color: rgb(0, 255, 0); }

これで検索結果ページで検索キーワードが緑色で表示される。

下記のように、search.phpで「the_title()」や「the_excerpt()」によって出力されたテキストの中にspanタグが挿入され、ハイライト用のCSSが適用される。

PHP

<article>
<h1><?php the_title(); ?></h1>
<div><?php the_excerpt(); ?></div>
</article>

CSS

.search_highlight {
background: linear-gradient(transparent 60%, rgb(0, 255, 0) /*#0f0*/ 60%);
}

補足。

上記のsearch.php用のコードは簡略化したものなので、<?php if(have_posts()〜のループで括る必要あり。

class名は自由に変更でき、PHPの関数名も変更可能。

検索キーワードを装飾するイメージ画像。

例）

CSSのクラス名 .search_highlight → .highlight
PHPの関数名 wps_highlight_results → highlight_results

backgroundプロパティにlinear-gradientを指定することにより、マーカー的に装飾することも可能。

WordPressの検索ハイライト表示の仕方。幸運を。

以上、参考になれば幸いです。

※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。（元々はメモ書きでした。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。