サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL:
相談内容:
不具合の発生手順:
解決のために試したこと:
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え(FAQ)
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw)
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2024年10月23日 15:05
tozankai.comのページの中に大きな表がありまして、ワードにある検索機能の様なものを実装したいと希望しています。例えば山の名前とか駅名で検索して、検索された文字がマーカーされたような表示にしたいと思っています。サイト内検索はウイジェットのサイドバーに実装していますが、検索に入れた文字があるページしか表示されていなくて目的の文字までたどり着けません。それよりページ内の検索を実装したい。
2024年10月23日 17:38
●回答
この要望は不可能です。Cocoonだからではありません。
ブラウザ上では単なる文面に見えても、実際にはHTMLコードでページが構成されています。
検索キーに該当する文字列をハイライト表示させるには、<span>タグを追加する必要があります。
しかし、ページは複数のHTMLコードで構成されているため、単純に検索キーを<span>で囲むだけでは問題が発生します。
例えば、次のようなコードがあった場合
<span class="red">この文字は赤色</span>
このような構造の中で「class」というキーワードを検索してハイライトしようとすると、次のようにネストされた不正なタグ構造が生成されてしまいます。
<span <span>class</span>=red>この文字は赤色</span>
結果として、レイアウトが崩れ、ページが正しく表示されなくなる可能性があります。
このため、ページ内の検索は、一般的にブラウザの検索機能(Ctrl + Fなど)を使い、再度検索キーを入力して該当部分を探すことになります。
また、ネット掲載されているキーワード検索結果のハイライトは、主にカードのスニペットが対象となっています。
これは、スニペットが通常、HTMLタグを含まず、単なる文字列で構成されているため、タグの追加による問題が発生しないからです。
kobat reacted
2024年10月23日 17:42
●ご参考
上記のことから、検索キーワードにコードを指定した場合、レイアウトが崩れます。
キーを全角を必ず含む文字列とか限定すれば可能かも笑笑
// Cocoonテーマの 'entry-card' テンプレートに検索クエリ 's' を追加するフィルター add_filter('cocoon_part__tmp/entry-card', function($content) { // 検索クエリ 's' を取得 $search_query = isset($_GET['s']) ? $_GET['s'] : ''; // 正規表現で<a href="URL">部分に?s=検索クエリを追加 $content = preg_replace( '/(<a\s+href="[^"]+)"/i', '$1?s=' . urlencode($search_query) . '"', $content ); return $content; }); // 検索クエリを 'the_content' 内でハイライトする関数 add_filter('the_content', function($content) { // 検索クエリ 's' を取得し、空でない場合に処理 if (isset($_GET['s']) && !empty($_GET['s'])) { $search_query = sanitize_text_field($_GET['s']); // 検索クエリをハイライト用の <span> タグで囲む $highlighted = '<span class="highlight" style="background-color: yellow;">' . esc_html($search_query) . '</span>'; // 正規表現で、検索クエリに一致する部分をハイライト (大文字・小文字を無視して検索) $content = preg_replace('/(' . preg_quote($search_query, '/') . ')/iu', $highlighted, $content); } return $content; }, 99);
●ブラウザで検索
kobat reacted
2024年10月23日 18:43
●改善
検索キーが全角のみのとき、ページ内検索のキーを渡す。
// Cocoonテーマの 'entry-card' テンプレートに検索クエリ 's' を追加するフィルター add_filter('cocoon_part__tmp/entry-card', function($content) { // 検索クエリ 's' を取得 $search_query = isset($_GET['s']) ? $_GET['s'] : ''; // 検索クエリが全角文字のみの場合 if (preg_match('/^[^\x01-\x7E]+$/u', $search_query)) { // 正規表現で<a href="URL">部分に?s=検索クエリを追加 $content = preg_replace( '/(<a\s+href="[^"]+)"/i', '$1?s=' . urlencode($search_query) . '"', $content ); } return $content; });
kobat reacted
2024年10月23日 19:03
特定の文字列部分をハイライトするライブラリを調べてみたらmark.jsというがありました。
https://qiita.com/gp333/items/c5831f1b966895979cca
上記ライブラリを使えば多少楽できそうですが、依然実装は結構大変そうです。
要望カテゴリへの投稿ですが、テーマの機能として実装するにはニッチなのかなぁと思いました。
技術的に不可能とまでは言えませんが、結構大規模な開発が必要そうです。
kobat reacted
トピックスターター 2024年10月23日 19:49
短時間にこのような詳細のご教授、心から感謝いたします。シニア(私は80歳ジャストです)にとってこのフォーラムはホームページ制作に大変有意義で、大変勉強になります。サイトのページ検索は難しいと思っていましたが、私の能力以上でした。でもチャレンジしたいと思います。教えて頂いたことを実際にやってみます。幸い、さくらサーバーはステージングサーバーがありますので、色々弄繰り回してみます。有難うございます。
大門未知子 reacted
2024年10月23日 20:29
でもチャレンジしたいと思います。
恐れ入りますが、フォーラムの注意書きにも記載されている通り、本来、PHPやJavaScriptに関する質問にはお答えできません。ご自身で、調べ対応願います。
また本件ですが、業者に依頼し有償にて対応するレベルの要望かと思います。その点はご理解ください。
●改善版
はるさんの言われる「mark.js」にハイライト表示を任せてみました。単なる私の興味本位です。
前述のような問題は解決されたかと思います。
ただ確認不十分です。
// Cocoonテーマの 'entry-card' テンプレートに検索クエリ 's' を追加するフィルター add_filter('cocoon_part__tmp/entry-card', function($content) { // 検索クエリ 's' を取得 $search_query = isset($_GET['s']) ? $_GET['s'] : ''; // 検索クエリをエスケープ処理 $escaped_search_query = esc_attr($search_query); // ?s=検索クエリを追加するための部分を構築 $query_string = $search_query ? '?s=' . urlencode($escaped_search_query) : ''; // 正規表現で<a href="URL">部分に検索クエリを追加 $content = preg_replace( '/(<a\s+href="[^"]+)"/i', '$1' . $query_string . '"', $content ); return $content; }); add_action('wp_footer', function() { if (isset($_GET['s']) && !empty($_GET['s'])) { $search_query = sanitize_text_field($_GET['s']); echo <<<EOF <script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js"></script> <script> let contexts = document.querySelector(".entry-content"); let instance = new Mark(contexts); instance.mark("{$search_query}", { "element": "span", "className": "highlight" }); </script> <style> .highlight { background-color: yellow; } </style> EOF; } });
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。
(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。