検索結果ページでキーワードをハイライト表示する

検索結果ページにおいて、検索に使われた条件（ターム、カスタムフィールド、キーワードetc.）をマーカーのようにハイライト表示するには、以下の方法をお試しください。

まず、検索結果ページで検索条件を出力する関数の引数 feas_search_query に以下のように引数を記述して、各キーワードをspanタグで囲う設定にしてください。
feas_search_query( true, ',', '<span>', '</span>' );
次に、下記のコードをフッターのwp_footer()より後に記述してみてください。

<script>
var keywords = jQuery( 'h1.page-title span' ).get(); // キーワードを取得
jQuery.each( keywords, function( i ) {
    jQuery( '.entry-summary' ).each( function() { // ハイライト対象
        var str = jQuery( this ).html().replace( new RegExp( keywords[i].innerHTML, 'g' ),
'<mark>' + keywords[i].innerHTML + '</mark>' );
        jQuery( this ).html( str );
    });
});
</script>

太字の部分はご利用のテーマに合わせてください。
「キーワードを取得」のjQueryのセレクタ（カッコの中）は、検索結果ページで「○○の検索結果…」と表示される部分を囲んでいる箇所のclass、HTMLタグです。
「ハイライト対象」のjQueryのセレクタは、ループされる各記事の本文部分を想定しています。

以上で、検索語句に該当する箇所が<mark>タグでjQueryにより動的にマークアップされますので
markタグに対してCSSでデザインを適用してください。

• このトピックは FirstElement 宮澤が5 ヶ月前に変更しました。
• このトピックは FirstElement 宮澤が5 ヶ月前に変更しました。