●回答

この要望は不可能です。Cocoonだからではありません。

ブラウザ上では単なる文面に見えても、実際にはHTMLコードでページが構成されています。
検索キーに該当する文字列をハイライト表示させるには、<span>タグを追加する必要があります。

しかし、ページは複数のHTMLコードで構成されているため、単純に検索キーを<span>で囲むだけでは問題が発生します。

例えば、次のようなコードがあった場合

<span class="red">この文字は赤色</span>

このような構造の中で「class」というキーワードを検索してハイライトしようとすると、次のようにネストされた不正なタグ構造が生成されてしまいます。

<span <span>class</span>=red>この文字は赤色</span>

結果として、レイアウトが崩れ、ページが正しく表示されなくなる可能性があります。

このため、ページ内の検索は、一般的にブラウザの検索機能（Ctrl + Fなど）を使い、再度検索キーを入力して該当部分を探すことになります。

また、ネット掲載されているキーワード検索結果のハイライトは、主にカードのスニペットが対象となっています。
これは、スニペットが通常、HTMLタグを含まず、単なる文字列で構成されているため、タグの追加による問題が発生しないからです。

●ご参考

上記のことから、検索キーワードにコードを指定した場合、レイアウトが崩れます。
キーを全角を必ず含む文字列とか限定すれば可能かも笑笑

// 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);

●改善

検索キーが全角のみのとき、ページ内検索のキーを渡す。

// 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;
});

特定の文字列部分をハイライトするライブラリを調べてみたらmark.jsというがありました。

https://qiita.com/gp333/items/c5831f1b966895979cca

上記ライブラリを使えば多少楽できそうですが、依然実装は結構大変そうです。

要望カテゴリへの投稿ですが、テーマの機能として実装するにはニッチなのかなぁと思いました。

技術的に不可能とまでは言えませんが、結構大規模な開発が必要そうです。

短時間にこのような詳細のご教授、心から感謝いたします。シニア（私は80歳ジャストです）にとってこのフォーラムはホームページ制作に大変有意義で、大変勉強になります。サイトのページ検索は難しいと思っていましたが、私の能力以上でした。でもチャレンジしたいと思います。教えて頂いたことを実際にやってみます。幸い、さくらサーバーはステージングサーバーがありますので、色々弄繰り回してみます。有難うございます。

投稿者:: @kobat

↑

でもチャレンジしたいと思います。

恐れ入りますが、フォーラムの注意書きにも記載されている通り、本来、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;

  }
});

ご親切に色々アイデアを頂き感謝いたします。html・cssやプラグインかなと気楽に考えPHPやJavaScriptに関する質問になっているとは分かっていませんでした。お詫び申し上げます。ページ内検索が大変難しい問題との認識を新たにしました。色々試しますが、当面はご教授の中に記載されているプラウサーの検索（chromaやedgeのctrl+f）で凌げます。

重ねて感謝申し上げます。

kobatさん

こちらの状況はいかがでしょうか。
このトピックは宙ぶらりんになっております。

「解決済」「クローズ」など、できるのであればしたいところです。

@mk2_mk2 さん

本文はHTMLタグの集合体で、ハイライト表示のspanを追加するのには現実的ではありません。
このため、テーマ機能としてサポートは難しいです。
結果、本件はクローズかと思います。

投稿者:: @chu-ya

↑

テーマ機能としてサポートは難しいです。

はい、そう思っています。
ただ、「色々試す」とありましたので、一応ご本人のお返事をお待ちしようと思いました。
（もし進展があれば、その後の状況を書いていただくのも、フォーラムの活用にはなりますので）

基本的には、トピックをお立てになった方のご意向で判断したいと思っています。
あまり強制的にクローズということはしたくないという感じです。

一応、今回1週間という期限は設定させていただきましたので、それでクローズするつもりはあります。
（それ以前に、わいひらさんのご判断で・・・ということもありだと思いますけれど）

ご返事したつもりになっていました。色々助かりました。今後も十宜しくお願い足します。

kobatさん

お返事ありがとうございます。
「解決済」にしていただきまましたので、クローズさせていただきますね。

お手数お掛けしました。