【WordPress】検索結果ページで検索キーワードをハイライトして表示させる方法

この投稿は2019/12/07に加筆修正いたしました。

WordPressの検索結果ページで検索キーワードをハイライト（強調して）表示させたいと考えたことはありませんか？

私も以前から検索結果の検索キーワードが強調できれば、訪問者も必要な情報が見つけやすくなるのにな～と考えていました。

検索キーワードをハイライト表示したいとお考えの方のために、検索結果ページで検索キーワードをハイライト表示させる方法をまとめてみました。

コピペとCSSの調整だけで行える簡単なカスタマイズです。
興味のある方は、ぜひ挑戦してみてください。

この記事は約 3 分で読めます。

WordPressのカスタマイズはお任せください。

WordPressのカスタマイズを格安で代行いたします。ご希望のカスタマイズがあればご相談ください。

詳しくはこちらをクリック

検索キーワードをハイライト表示させる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サイトのカスタマイズで
お困りではありませんか？

あなたのWordpressサイトを、ご希望に沿ってカスタマイズいたします。
次に該当する方は、お気軽にご相談下さい。

Wordpressサイトをカスタマイズしたいが、やり方が分からないで困っている。カスタマイズの知識が豊富な人に任せたい。
Wordpressサイトをカスタマイズしたいが、自分でカスタマイズする暇がない。カスタマイズが得意な人に丸投げしたい。
Wordpressサイトをカスタマイズしてみたが、上手くカスタマイズできなかった。カスタマイズ経験が豊富な人に任せたい。
Wordpressサイトをカスタマイズしてみたら、バグが発生して困っている。正常に動作するように正しくカスタマイズしてほしい。

一つでも該当する方は、以下のリンクからチェックしてみてください。

詳細を確認する

著者：takaya kondo

岡山在住のWordPress専門フリーランサーです。Wordpressを使ったWEBサイト制作を中心に10年間ほど活動させていただいています。

Wordpress関連の記事でお役に立てれば幸いです。

【関連記事】あなたが興味のありそうな関連記事をご紹介します。

2020/10/04
WordPressの検索機能でカスタムフィールドを検索対象にする方法
WordPressの検索機能でカスタムフィールドの値を検索対象にする方法をまとめてみました。紹介しているコードをコピペ＋微調整するだけのお手軽なカスタマイズです。興味のある方は、挑戦してみてください。記事を読む
2020/10/30
RSSフィードでショートコードを無効にする2つの方法
RSSフィードでショートコードを無効化したいことってありませんか？このコンテンツでは、RSSフィードでショートコードを無効化する方法を2つご紹介しております。興味のある方はコンテンツをご覧ください。記事を読む
2020/10/30
WordPressの固定ページに独自テンプレートを設定する方法
WordPressの固定ページにオリジナルテンプレートを設定する方法をご紹介しています。テンプレートの作り方から設置方法まで詳しく解説してみましたので、興味のある方は参考にしてください。記事を読む
2020/10/04
保護中: セキュリティ対策全手法
この投稿はパスワードで保護されているため抜粋文はありません。記事を読む
2020/10/04
WordPressのショートコードがコンテンツの最上部に表示される不具合の解決方法
WordPressでオリジナルショートコードが変な位置に出力されて困っていませんか？このコンテンツではこの問題の解決方法をご紹介しています。興味のある方は、コンテンツをご覧ください。記事を読む