今回はサイト内検索を足がかりに目的のページを探すユーザーを手助けするユーザービリティ向上のためのカスタマイズをご紹介します。
探しているキーワードを蛍光ペンなどでハイライト表示してあげればおそらくユーザーも見つけやすいと思いますので導入してあげるといいかもしれませんよ。

ユーザーが検索したワードをハイライトして表示するプラグイン「Highlight Search Terms」

tcd201610120001

ダウンロード

プラグイン＞新規追加　で「Highlight Search Terms」を検索しインストールし有効化します。
有効化するだけで、ユーザーがWordPress内の検索機能で検索したキーワードをハイライトしてくれます。

サイト内検索を利用してみるとこういう感じで検索したキーワードが蛍光ペンでハイライトされています。

背景色などを変更したい場合はCSSで.hilightを指定してあげてください。

.hilight {
         background:#D3E18A;
}

その他font-sizeやborderなどを指定してあげれば応用が利きます。
あなたのサイトイメージにあったものに変更してあげてください。
TCDのテーマをしている方はテーマオプション＞カスタムCSSに記述してあげるといいでしょう。

プラグインを使わずに検索ワードのハイライトを実装するPHPのカスタマイズ

こちらはテーマファイルをカスタマイズするため、最初にバックアップを取っておくことをお勧めします。子テーマを作成している方はそちらに記述してあげてください。

Function.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="searchhighlight">'.$sr.'</span>', $text);
	}
	return $text;
}
add_filter('the_title', 'wps_highlight_results');
add_filter('the_content', 'wps_highlight_results');

［<?php the_title(); ?> ］または［<?php the_content(); ?>］で表示される内容の中から、ユーザーが検索したキーワードにを付与するようにします。

それをテーマオプションのカスタムCSSにて下記コードを追加する形で色指定してあげるという流れになります。

.searchhighlight {
         background:#D3E18A;
}

以上です。ぜひ活用してみてください。

もしカスタマイズに失敗するなどで画面が真っ白になってしまったらこちらの記事を参考に焦らず対処しましょう。
https://tcd-theme.com/2016/08/error.html