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

このトピックには0件の返信が含まれ、1人の参加者がいます。5 ヶ月前 FirstElement 宮澤 さんが最後の更新を行いました。

1件の投稿を表示中 - 1 - 1件目 (全1件中)
  • 投稿者
    投稿
  • #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件中)

このトピックに返信するにはログインが必要です。