Wordpressで、ajaxでの外部ファイル読み込み時の不具合

Wordpressで、カスタム投稿タイプの投稿ごとに、別々の外部ファイルを、以下のように読み込む必要があるため、

■読み込み側サイト1の外部ファイル

https://*****.com/wp-content/themes/****/inc-file.php

【出力結果】

例)
投稿1に表示させるコンテンツ

■読み込み側サイト2の外部ファイル

https://*****.com/wp-content/themes/****/inc-file.php

【出力結果】

例)
投稿2に表示させるコンテンツ

　↓

■表示側サイト

カスタム投稿タイプ　投稿一覧

【投稿1】
投稿1に表示させるコンテンツ

【投稿2】
投稿2に表示させるコンテンツ
・
・
・

foreachのループ内で、以下のように記述しました。

■wp_remote_getで外部ファイル取得

<?php
  $url = 'wp-content/themes/****/inc-file.php';

         $inc_file = wp_remote_get($url);
         echo wp_remote_retrieve_body($inc_file);
?>

　　　↓

外部ファイルの読み込みには成功するが、
100件以上の外部ファイルを読み込むため、データの読み込みが完了するまで、
サイトが何も表示されない状態になってしまう。

なので、ajaxにしたのが、以下です。

■jquery.ajaxで外部ファイル取得

<?php
  $url = 'wp-content/themes/****/inc-file.php';
?>

        <script type="text/javascript">
        $(function() {
            var $loading = $(".loading");
            var def = $.ajax({
            url:'<?=$url?>',
            dataType:"html",
            beforeSend:function(){
              $loading.removeClass("is-hide");
            }
          });
          setTimeout(function(){
            $.when(def).done(function(data){
              $loading.addClass("is-hide");
                    $('.ajax_content').append(data);
                    //console.log($url);
            });
          },1000);
        });
        </script>
        
        <div class="ajax_content"></div>　//表示用class

　↓

テストしたところ、ループ外であれば、外部ファイルの読み込みには成功するが、
ループ内で実行すると、出力結果は、

【投稿1】
投稿1に表示させるコンテンツ
投稿2に表示させるコンテンツ
投稿3に表示させるコンテンツ
投稿4に表示させるコンテンツ
・
・
・

【投稿2】
投稿1に表示させるコンテンツ
投稿2に表示させるコンテンツ
投稿3に表示させるコンテンツ
投稿4に表示させるコンテンツ
・
・
・

のように、すべての投稿の読み込み用コンテンツを、各ループ内ですべて表示してしまいます。

表示用の「.ajax_content」が、すべての投稿で同じclassになってしまうので、
ここを、投稿ごとに動的に変化するようにする必要もあるのか、
そもそも、根本的に何かが間違っているのでしょうか。

punkneko

2022/09/28 12:00

若干、訂正出力結果は、以下のようになってしまうということです。【投稿1】投稿1に表示させるコンテンツ投稿2に表示させるコンテンツ投稿3に表示させるコンテンツ投稿4に表示させるコンテンツ　・　・　・【投稿2】投稿1に表示させるコンテンツ投稿2に表示させるコンテンツ投稿3に表示させるコンテンツ投稿4に表示させるコンテンツ　・　・　・