-
投稿者投稿
-
2019年7月9日 00:23 #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でデザインを適用してください。-
このトピックは
FirstElement 宮澤が2年、 10ヶ月前に変更しました。
-
このトピックは
FirstElement 宮澤が2年、 10ヶ月前に変更しました。
-
このトピックは
FirstElement 宮澤が2年、 10ヶ月前に変更しました。
-
このトピックは
-
投稿者投稿
1件の投稿を表示中 - 1 - 1件目 (全1件中)
- このトピックに返信するにはログインが必要です。