jQuery内でPHPを含んだコードを変数の中に入れ、出力するとなぜかコメントアウトしてしまう。

現状やっていること
Wordpressで最新投稿を画像付きで表示させようとしています。
①Widgetを管理画面から選択した際に、選択したwidgetのHTMLが挿入される
②Jqueryで特定のクラス名を持っていたら画像取得、表示させるなどのPHPコードを挿入する処理に入る

かなり力技で正攻法ではないのは確かですが。。プラグインは使いたくないです。

うまくいかない部分
jQuery内でPHPを含んだコードを変数の中に入れて、変数に入れた内容をそのまま吐き出させたいのですがなぜかPHPの部分だけコメントアウトされてしまいます。

こういう場合、コメントアウトさせない方法ってあるのでしょうか？

  function addImage() {
    const image = '<div class="p-sidebar__postWrap"><h3 class="c-heading">こんな記事もあります<?php query_posts(array("orderby" => "rand", "showposts" => 3)); if (have_posts()) : while (have_posts()) : the_post(); ?><div class="p-sidebar__post"><?php $article_url = wp_get_attachment_url(get_post_thumbnail_id());$article_bg = "style="background-image:url(".$article_url.");"";?><a href="<?php the_permalink(); ?>"><p class="p-sidebar__image__sumbnails" <?php echo $article_bg; ?>></p><p class="p-sidebar__discription"><?php the_title(); ?></p></a></div ><?php endwhile; endif; wp_reset_postdata();?></div> '

    if ($('.p-widget_recent_entries').length) {
      $('.p-widget_recent_entries').append(image);
      console.log(image);
    }

行動規範の内容に同意します

回答2件

ベストアンサー

ブラウザの仕様です。WordPressやPHPの問題ではありません。
過去質問にあります。
ブラウザの解釈【<? php】は【<!--? php】となぜ変換されるか？

ただのHTMLファイルに書いても同様になります。

html
1<body>
2<?php ?>
3</body>

Firefox 91.0.1 (64 ビット),Chrome 92.0（64 ビット）で確認済み。

そもそも、PHPは.phpの中に書かれて、且つPHPコードとして記述されて動作します。
jsコード内に書いたとしてもそれは「そういう文字列」としてしか認識されません。
PHPはサーバーサイド、JavaScriptは基本クライアントサイド
Webサーバーにリクエスト（URL）を送ってそれを受けてWebサーバーが結果を返すわけですから実行のタイミングはサーバーサイドが圧倒的に先です。

「JavaScriptでPHPの実行結果を使う」対応としてはおおよそ下記