●回答

この要望は不可能です。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）で凌げます。

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