質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

解決済

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

punkneko
punkneko

総合スコア26

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

1回答

0リアクション

0クリップ

151閲覧

投稿2022/09/28 10:57

編集2022/09/29 03:15

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になってしまうので、
ここを、投稿ごとに動的に変化するようにする必要もあるのか、
そもそも、根本的に何かが間違っているのでしょうか。

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

punkneko

2022/09/28 12:00

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

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。