Home フォーラム 使い方全般 検索結果ページでキーワードをハイライト表示する

  • 投稿者
    投稿
  • #929
    FirstElement 宮澤
    キーマスター

    検索結果ページにおいて、検索に使われた条件(ターム、カスタムフィールド、キーワード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でデザインを適用してください。

1件の投稿を表示中 - 1 - 1件目 (全1件中)
  • このトピックに返信するにはログインが必要です。
'絞り込み検索'プラグイン for WordPress FE Advanced Search

"絞り込み検索"プラグイン for WordPress
FE Advanced Search

¥59,800

  • インストール数無制限
  • 技術サポート無料
  • アップデート永久無料

「こんな検索できる?」「PHPやCSS詳しくないのだけど…」など、わからないことやご不安がありましたらお気軽にご相談ください。