WordPressの質問（q10255357）の続

質問

クライアント側の3番についてお聞きしたいのですが、1週間で質問をリセットする場合こちらは必要なくなるのでしょうか？
データベースの容量から考えて定期的に質問を削除するように考えております。
4番の画像ファイルというのは画像、動画、PDF それぞれにあったタグに Javascript で変更するということでしょうか？

サーバー側のコードは bbs_que_list.php を想定しております。

※最新コード
https://wandbox.org/permlink/a5reYrjPHQnrGXXi

回答No.36

dell_OK · ベストアンサー

・見落としておりました申し訳ありません。

当時のfunctions.phpをそのまま使ってもだめです。
途中で、以下の変更が入りましたよね。
ここは変更しておいてください。
$result['items'][] = ['title' => $row->title, 'img1' => $url, 'type' => $type, 'url' => home_url('質問みる?'.$row->unique_id)];

・console に書いてあるエラーの読み方が分からず教えて頂きたいです。

どのようなエラーが出ていますか。

お礼

こちらが最新の回答になります。
質問の期限が切れてしまいました、下記のリンクからアドバイスよろしくお願い致します。

https://okwave.jp/qa/q10271965.html

補足

A.回答ありがとうございます。
過去の回答は見たつもりだったのですが変更点が抜けておりました申し訳ありません…
Uncaught ReferenceError: group_id is not defined　と書かれておりエラー文を調べようと思ったのですが、該当箇所が分からずどこを修正すべきなのか分かりませんでした。

※表示されているエラー文
➀jQuery.Deferred exception: group_id is not defined ReferenceError: group_id is not defined
at add (http://www.irasuto.cfbx.jp/%e9%9b%91%e8%ab%87%e6%8e%b2%e7%a4%ba%e6%9d%bf%e3%80%80%e8%b3%aa%e5%95%8f%e4%b8%80%e8%a6%a7%e8%a1%a8%e7%a4%ba%e7%94%bb%e9%9d%a2/:130:32)
at HTMLDocument.<anonymous> (http://www.irasuto.cfbx.jp/%e9%9b%91%e8%ab%87%e6%8e%b2%e7%a4%ba%e6%9d%bf%e3%80%80%e8%b3%aa%e5%95%8f%e4%b8%80%e8%a6%a7%e8%a1%a8%e7%a4%ba%e7%94%bb%e9%9d%a2/:118:9)
at e (http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js?ver=6.5.5:2:30005)
at t (http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js?ver=6.5.5:2:30307) undefined

➁Uncaught ReferenceError: group_id is not defined
at add (雑談掲示板　質問一覧表示画面/:130:32)
at HTMLDocument.<anonymous> (雑談掲示板　質問一覧表示画面/:118:9)
at e (jquery.min.js?ver=6.5.5:2:30005)
at t (jquery.min.js?ver=6.5.5:2:30307)

※該当ページ
http://www.irasuto.cfbx.jp/%e9%9b%91%e8%ab%87%e6%8e%b2%e7%a4%ba%e6%9d%bf%e3%80%80%e8%b3%aa%e5%95%8f%e4%b8%80%e8%a6%a7%e8%a1%a8%e7%a4%ba%e7%94%bb%e9%9d%a2/

回答No.25

dell_OK

回答が先走りしていました。
＝＝＝＝
おそらく、ＵＲＬは、以下のようになると思います。
home_url('質問みる?'.$row->unique_id);
＝＝＝＝

これはＰＨＰのコードなのでfunctions.phpに追加するものです。
－－－－
$result['items'][] = ['title' => $row->title, 'img1' => $url, 'type' => $type, 'url' => home_url('質問みる?'.$row->unique_id)];
－－－－

おそらくaタグがどこかに追加されることになると思いますが、
その　href　に　item.url　を設定することになります。

補足

Q.おそらくaタグがどこかに追加されることになると思いますが、
その　href　に　item.url　を設定することになります。

A.解説ありがとうございます。href　に設定するということで調べたところ Javascript で href属性に値を入れる方法を見つけました。
dell_ok さんに教えて頂いた上記のコードは回答する方が見る画面のコードではないかと思うのですが、無限スクロールで表示されたコンテンツとどのように結びつくのでしょうか？

※参考サイト
https://chogo2017.egoism.jp/2023/04/12/programming_insertsentenceinhrefwithjavascript/

回答No.24

dell_OK

・画像とタイトルがリンクになっていない

まずは、そのＨＴＭＬがどのようになるか検討してください。
それができれば、createElement()を組み合わせるだけです。

おそらく、ＵＲＬは、以下のようになると思います。
home_url('質問みる?'.$row->unique_id);

以前にもお願いしましたが、
今後、他のページを作成する際に、
もしまだcreateElement()をご自分で容易に組み合わせられないようでしたら、
期待通りのデザインで表示できるようになるまでは、
ＨＴＭＬを直接出力してデザインを完成させるようにしてください。
それから後々時間がある時にcreateElement()へ変更する方がいいと思います。
デザインが完成しないうちから、
createElement()を追加したり削除したり組み合わせるのは苦労しかないと思います。

・画像を並べる際の margin

これは私にはわかりません。

・無限スクロールの下にコンテンツを入れる場合外枠の終わらせ方

無限スクロールの下と言うのはどこのことでしょうか。
またその外枠と言うのもどこのことかわかりません。

ページフッターのことでしたら、
以前見ていたどこかの参考サイトで、
無限スクロールにするとフッターが出せないようなことが書いてあったような気がします。

期待しているＨＴＭＬを以下のコードに追記できますか。
<div id="feed4-layout">
<div class="image-inline-player">
<div class="image-card-wrap">
</div>
</div>

・表示端末が変わって横に拡大された場合の対応

レスポンシブ的な話しでしょうか。
これは私にはわかりません。

・ファイルがアップロードされなかった場合の代替え画像表示方法

それはたぶんこれでできそうな気がします。
ファイルがない時は　item.type　が空っぽなので、
以下の３つのどれでもない場合となります。
最後に追加している　else　の処理がそうです。
ただ、代替え画像のＵＲＬをJavaScriptで生成するのか、
ＰＨＰで生成するのかは検討する必要があると思います。
if (item.type == "img") {
　省略
} else if (item.type == "video") {
　省略
} else if (item.type == "iframe") {
　省略
} else {
const img = document.createElement("img");
img.style.height = "100px";
img.src = "代替え画像のＵＲＬ";
imageThumbnailCard.appendChild(img);
}

ＣＳＳのこの行はなにか間違っているような気がしますが大丈夫ですか。
inline-block;*display:inline;*zoom:1 /* <li>要素を横に並べる */

最新のコードを見ましたが、
動画とＰＤＦのサイズの設定に間違いがあります。
img.～になっているので、以下のようにしておいてください。
video.style.height = "150px";
video.style.width = "260px";
iframe.style.height = "150px";
iframe.style.width = "260px";

補足

Q.まずは、そのＨＴＭＬがどのようになるか検討してください。
それができれば、createElement()を組み合わせるだけです。

今後、他のページを作成する際に、
もしまだcreateElement()をご自分で容易に組み合わせられないようでしたら、
期待通りのデザインで表示できるようになるまでは、
ＨＴＭＬを直接出力してデザインを完成させるようにしてください。

A.アドバイスありがとうございます。
Javascript で出力することばかり考えておりました。リンクは PHP でも可能なんですね…
申し訳ありません、以後 HTML で先に書いてみるように致します。

<div id="feed4-layout">
<div class="image-inline-player">
<div class="image-card-wrap" style="display: inline-block;">
<div class="image-thumbnail-card"><a href=""><img src="http://www.irasuto.cfbx.jp/wp-content/uploads/attach/153_0.png" style="height: 150px; width: 260px;"></a>
</div>
<div class="image-title-link"><a href=”リンクを貼りたいURL”>タイトルテスト1タイトルテスト1タイトル...</a>
</div>
</div>
</div>
</div>

Q.無限スクロールの下と言うのはどこのことでしょうか。
またその外枠と言うのもどこのことかわかりません。
ページフッターのことでしたら、
以前見ていたどこかの参考サイトで、
無限スクロールにするとフッターが出せないようなことが書いてあったような気がします。

A.回答ありがとうございます、コンテンツを囲っているグレーの外枠になります。
フッターは恐らく出せないんですね…　デザインを再度見直してみます。

Q.期待しているＨＴＭＬを以下のコードに追記できますか。
<div id="feed4-layout">
<div class="image-inline-player">
<div class="image-card-wrap">
</div>
</div>

A.回答ありがとうございます。
<div id="feed4-layout"> の下にコードを追加できれば良いなと考えておりました。

Q.レスポンシブ的な話しでしょうか。
これは私にはわかりません。

A.回答ありがとうございます。別途質問してみます。

Q.ファイルがない時は　item.type　が空っぽなので、
以下の３つのどれでもない場合となります。
ただ、代替え画像のＵＲＬをJavaScriptで生成するのか、
ＰＨＰで生成するのかは検討する必要があると思います。

A.アドバイスありがとうございます。
流れに沿うと Javascript で生成する方が自然だと思いました。
セキュリティ上の問題について調べたところ URLパースを行う場合のみ対策が必要だと思われます。

※参考サイト
https://efcl.info/2022/12/15/url-cheatsheet/

Q.ＣＳＳのこの行はなにか間違っているような気がしますが大丈夫ですか。
inline-block;*display:inline;*zoom:1 /* <li>要素を横に並べる */

A.回答ありがとうございます。
「*」の意味について調べてみたのですが、すべての要素にスタイルを適用すると書かれており意味がよく分からずそのまま書いております。
初めは書き間違えではないかと考えておりました。

inline-block;
/* display:inline; */
zoom:1

※参考サイト
https://ecsiter.com/limage

※「*」の意味
https://kredo.jp/media/css-symbol-meaning/#:~:text=%E3%80%8C*%E3%80%8D%E3%81%AF%E3%80%81%E3%81%99%E3%81%B9%E3%81%A6%E3%81%AE,%E8%A6%81%E7%B4%A0%E3%81%AB%E9%81%A9%E7%94%A8%E3%81%95%E3%82%8C%E3%81%BE%E3%81%99%E3%80%82

Q.最新のコードを見ましたが、
動画とＰＤＦのサイズの設定に間違いがあります。
img.～になっているので、以下のようにしておいてください。

A.修正ありがとうございます。

※最新コード
https://wandbox.org/permlink/KoMmVMc75QeOdvBk

回答No.23

dell_OK

回答No.21の補足でいただいた最新コードでは、
https://wandbox.org/permlink/b8oKHwDZpq9VpKzH
image-inline-player　をＨＴＭＬで出力することにされたのではないのですか。
それを尊重して前回の回答をしました。
－－－－
<div id="feed4-layout">
<div class="image-inline-player"></div>
</div>

$(".image-inline-player").append(imageCardWrap);
－－－－

必ず出力するただひとつの要素はＨＴＭＬでいいと思いますので、
createElement()　に戻さなくていいと思います。

お礼

こちらが最新の質問になります。
いくつか分からない点があり別途質問を作成するべきか悩んでおります…
参考サイトを見ながらCSSを考えてみたのですが表示端末が変わった場合のことも並行して考える必要がある為、コンテンツの間隔をどう空けるほうが良さそうか dell_ok さんの意見をお聞きしたいです。
アドバイスよろしくお願い致します。

1,画像とタイトルがリンクになっていない
2,画像を並べる際の margin
3,無限スクロールの下にコンテンツを入れる場合外枠の終わらせ方
4,表示端末が変わって横に拡大された場合の対応
5,ファイルがアップロードされなかった場合の代替え画像表示方法

※最新コード
https://wandbox.org/permlink/vEbEWcHvEIPxnv80

※ブラウザの横幅に合わせて横並び画像数を変化（参考サイト）
https://ecsiter.com/limage

※現在設定しているCSS
/* スクロール高さテスト */
div#feed4-layout {
height: 500px;
}

/* 雑談掲示板　一覧表示画面本体定義 */
.image-inline-player {
width: 1140px;
margin: 0 auto 50px;
background-color: #fff;
border: 2px solid #999;
clear: both;
}

/* 雑談掲示板　一覧表示画面本体定義 */
.image-inline-player .image-card-wrap {
width:260px; /* 枠の横幅 */
margin: 23px 0px 23px 19px; /* 枠のスペース */
vertical-align:top; /* 上端に揃える */
word-wrap:break-word; /* 文字を改行し枠内に収める */
inline-block;*display:inline;*zoom:1 /* <li>要素を横に並べる */
}

/* 雑談掲示板　一覧表示画面配置位置 */
.image-inline-player .image-card-wrap .image-title-link {
font-size: 150%;
font-weight: 700;
letter-spacing: .1em;
}

※該当ページ
http://www.irasuto.cfbx.jp/%e9%9b%91%e8%ab%87%e6%8e%b2%e7%a4%ba%e6%9d%bf%e3%80%80%e7%99%bb%e9%8c%b2%e7%b5%90%e6%9e%9c%e7%94%bb%e9%9d%a2/

補足

A.アドバイスありがとうございます。申し訳ありません以前のリンクを載せておりました。
修正いたしました。

※最新コード
https://wandbox.org/permlink/A3VgL8586KzSH7CI

回答No.22

dell_OK

・想像では全コンテンツを囲うために1つだけ <div class="image-inline-player"></div> が追加されると考えていたのです

そうでしたか。
でしたら、ひとまずここは戻しておいてください。
$("#feed4-layout").append(imageCardWrap);

・<div id="feed4-layout"></div> を親クラスにする方が自然ではないかと思っております。

それでいいと思います。
なのでこうなりますかね。
<div id="feed4-layout">
<div class="image-inline-player"></div>
</div>

ただ、私には　<div class="image-inline-player"></div>　の用途や必要性がわかっていません。

もしこうするのであれば、
上記で戻すようにお願いしたところは、
$(".image-inline-player").append(imageCardWrap);
のようにしておいてください。

補足

Q.ただ、私には　<div class="image-inline-player"></div>　の用途や必要性がわかっていません。

もしこうするのであれば、
上記で戻すようにお願いしたところは、
$(".image-inline-player").append(imageCardWrap);
のようにしておいてください。

A.回答ありがとうございます。
用途としては全コンテンツを囲う為になります。
質問入力画面と同様にヘッダーの下に質問一覧表示を囲う外枠を設定したいです。
<div id="feed4-layout"></div> は height: 500px; で現在設定しており上位数件に対しての高さなので、それと別に CSS を設定する必要がある為に新たにクラスを追加いたしました。
現在のコードだと image-inline-player がコンテンツの下にずれてしまい外枠として囲うことが出来ないのですがどうすれば良いでしょうか？

※質問入力画面
https://imgur.com/XzkJbzt.png

※設定予定のCSS
.image-inline-player {
width: 1140px;
margin: 0 auto 50px;
background-color: #fff;
border: 2px solid #999;
overflow: hidden;
clear: both;
}

※現在のコード
https://wandbox.org/permlink/44Bt3Xky6tIeQGES

※質問一覧表示画面
http://www.irasuto.cfbx.jp/%e9%9b%91%e8%ab%87%e6%8e%b2%e7%a4%ba%e6%9d%bf%e3%80%80%e7%99%bb%e9%8c%b2%e7%b5%90%e6%9e%9c%e7%94%bb%e9%9d%a2/

回答No.21

dell_OK

こうですかね。

imageimageInlinePlayer.appendChild(imageCardWrap);
↓
imageInlinePlayer.appendChild(imageCardWrap);

$("#feed4-layout").append(imageCardWrap);
↓
$("#feed4-layout").append(imageInlinePlayer);

補足

修正ありがとうございます。imageimageInlinePlayer 読み落としておりました申し訳ありません…

想像では全コンテンツを囲うために1つだけ <div class="image-inline-player"></div> が追加されると考えていたのですが、個別に追加されてしまいどうすべきか悩んでおります。

コードを書いてみたのですが、<div class="image-inline-player"></div> の表示位置がコンテンツの下にずれてしまいアドバイスお願い致します。

コンテンツに1つ <div class="image-inline-player"></div> を追加するという事で、HTML を Javascript で生成せず、<div id="feed4-layout"></div> の下に書いております。

※最新コード
https://wandbox.org/permlink/b8oKHwDZpq9VpKzH

上記と別にお聞きしたいのですが、
スクロール用に <div id="feed4-layout"></div>
全コンテンツを囲う用に <div class="image-inline-player"></div>
としたい場合、どちらを親クラスにした方が良いでしょうか？

上位数件を除いてスクロールを発生させるという事で、<div id="feed4-layout"></div> を親クラスにする方が自然ではないかと思っております。

回答No.20

dell_OK

こんな感じかと。
－－－－
for (let idx = 0; idx < json.items.length; idx++) {
count++;
const item = json.items[idx];
const imageCardWrap = document.createElement("div");
imageCardWrap.classList.add("image-card-wrap");
imageCardWrap.style.display = "inline-block";
imageCardWrap.style.width = "400px";
const imageThumbnailCard = document.createElement("div");
imageThumbnailCard.classList.add("image-thumbnail-card");
if (item.type == "img") {
const img = document.createElement("img");
img.style.height = "100px";
img.src = item.img1;
imageThumbnailCard.appendChild(img);
} else if (item.type == "video") {
const video = document.createElement("video");
video.style.height = "100px";
video.src = item.img1 + "#t=0.1";
imageThumbnailCard.appendChild(video);
} else if (item.type == "iframe") {
const iframe = document.createElement("iframe");
iframe.style.height = "100px";
iframe.src = item.img1;
imageThumbnailCard.appendChild(iframe);
}
imageCardWrap.appendChild(imageThumbnailCard);
const imageTitleLink = document.createElement("div");
imageTitleLink.classList.add("image-title-link");
imageTitleLink.textContent = truncate(item.title, 4);
imageCardWrap.appendChild(imageTitleLink);
$("#feed4-layout").append(imageCardWrap);
}
－－－－

補足

修正ありがとうございます。表示することが出来ました。
CSS を考えている際に <div> クラスを１つ追加したところ何も表示されなくなってしまいました。
アドバイスお願い致します。

質問画面と同じようにヘッダーと同じ横幅で質問一覧ページの外枠を用意したいと考えております。
<div id="feed4-layout"></div> はスクロールを発生させ高さを制限する為に低く設定しているので、コンテンツを全部囲う枠には使用せずにその下にクラスを作成する予定です。

※設定予定のCSS
/* スクロール高さテスト */
div#feed4-layout {
height: 500px;
}

image-inline-player {
width: 1140px;
margin: 0 auto 50px;
background-color: #fff;
border: 2px solid #999;
overflow: hidden;
clear: both;
}

※最新コード（bbs_que_list.php の37,38,65行目にコードを追加いたしました）
https://wandbox.org/permlink/QsZW76kmQiVzy8zk

※現在の表示画面
http://www.irasuto.cfbx.jp/%e9%9b%91%e8%ab%87%e6%8e%b2%e7%a4%ba%e6%9d%bf%e3%80%80%e7%99%bb%e9%8c%b2%e7%b5%90%e6%9e%9c%e7%94%bb%e9%9d%a2/

回答No.19

dell_OK

・画像を複数横に並べて画像の下にタイトルを表示したい場合、画像１つ１つに display: inline-block; を設定するだけでよいと思われますでしょうか？

「画像」という言葉が不適格に思えるので、
画像は単なる「画像」、画像とタイトルを組み合わせたものを「コンテンツ」と呼ぶことにします。
このコンテンツが私の言ったもうひとつのdivでくくったものです。

画像１つ１つではなく、このコンテンツに display: inline-block; を設定すればいいと思います。
あとは縦列がそろって配置されるように横幅を指定すればいいと思います。

私のサンプルサイトに実装してみましたので確認してみてください。

補足

修正ありがとうございます。
何と表現すれば良いか分からず画像と伝えておりました、以後はコンテンツとして回答するように気を付けます。

document.createElement() に変更するということについてお聞きしたいのですが、bbs_que_list.php の46,47,48行目の表示コードはどのように書けばよいでしょうか？

※修正コード
const imageCardWrap = document.createElement("div");
const imageThumbnailCard = document.createElement("div");
const imageTitleLink = document.createElement("div");

content =
imageCardWrap;
imageThumbnailCard + img1;
imageTitleLink + + truncate(item.title, 4);

divimageCardWrap.classList.add("image-card-wrap"); // classの追加
divimageThumbnailCard.classList.add("image-thumbnail-card"); // classの追加
divimageTitleLink.classList.add("image-title-link"); // classの追加

※最新コード
https://wandbox.org/permlink/qbCFfjG2bTxxoHgZ

回答No.18

dell_OK

・PHPで表示する際に .mb_strimwidth($row->title, 0, 40, '･･･'). で制限していたコードを Javascript でも行いたいのですが、現在のコードにどのように組み込めばよいでしょうか？

JavaScriptにはmb_strimwidthにかわる関数はないのかもしれないですね。
近いのは、「文字数が多い時に最後に出す「...」」でしょうか。
https://qiita.com/bstyle6130/items/9285be93482a5fa809d7
ただ、この参考サイトは実装と使い方がわかりにくいような気がします。
欲しいコードはここだけですね。
－－－－
function truncate(str, len){
return str.length <= len ? str: (str.substr(0, len)+"...");
};
－－－－

それで、使い方は、こんな感じかと。
－－－－
'<div class="image-title-link">' + truncate(item.title,12) + "</div>";
－－－－

補足

A.アドバイスありがとうございます。
function{} で関数名を宣言してから表示させるんですね勉強になりました。

※最新コード
https://wandbox.org/permlink/TQJaS3pSFgSonct5

回答No.17

dell_OK

詳しくは見ていませんが、差分を見る限り、
const formData = new FormData();
がなくなっていますね。
これを戻して試してみてください。

お礼

こちらが最新の質問になります。
回答No.17の補足について、bbs_que_list.php の8行目<div id="content"></div>を<div id="feed4-layout"></div>に変更したことで何も表示されなかったようです。勘違いしておりました申し訳ありません。

document.createElement() に変更する場合、最新コード bbs_que_list.php の46,47行目の表示コードを修正することになると思うのですが、書き方がよくわからず dell_ok さんにアドバイス頂きたいです。

※修正コード
const imageThumbnailCard = document.createElement("div");
const imageTitleLink = document.createElement("div");
imageThumbnailCard + img1;
imageTitleLink + item.title;
divimageThumbnailCard.classList.add("image-thumbnail-card"); // classの追加
divimageTitleLink.classList.add("image-title-link"); // classの追加

※最新コード
https://wandbox.org/permlink/r3MGBoOt21KrjQQq

※HTMLMetaElementについて
https://developer.mozilla.org/ja/docs/Web/API/HTMLMetaElement/content

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

コンテンツを並べる際にタイトルの文字数を12文字前後で制限したいと考えております。
PHPで表示する際に .mb_strimwidth($row->title, 0, 40, '･･･'). で制限していたコードを Javascript でも行いたいのですが、現在のコードにどのように組み込めばよいでしょうか？

※文字列を任意の文字数で丸める
http://note.favorite-color.net/2019/201906181567/

※文字数が多い時に最後に出す「...」
https://qiita.com/bstyle6130/items/9285be93482a5fa809d7

※旧コード（bbs_que_list.php）
https://wandbox.org/permlink/L3vLoCmJHP931Wnw
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

dell_ok さんから頂いた横並びにはできないので、最低でももう一つ<div>が必要になってくるというアドバイスについて考えてみたのですが、デザイン参考サイトのCSSを見ると画像全体に position: relative; 画像1つ1つに position: absolute; が使われているようです。
画像を複数横に並べて画像の下にタイトルを表示したい場合、画像１つ１つに display: inline-block; を設定するだけでよいと思われますでしょうか？

※デザイン参考サイト
https://www.bilibili.com/

※CSSで横並びレイアウトを実現簡単にするinline-block
https://www.sejuku.net/blog/52822

補足

回答ありがとうございます。
申し訳ありませんコードが抜けておりました。
戻してみたのですが何も表示されず原因を探しております…

※表示画面
https://imgur.com/0BDoI6P.jpg

回答No.16

dell_OK

画像を表示するためのパスを取得するコードを作ってみました。

functions.php
－－－－
function bbs_que_list_items()
{
global $wpdb;
$count = $_POST['count'];
$sql = 'SELECT * FROM sortable LIMIT %d,10';
$query = $wpdb->prepare($sql, $count);
$rows = $wpdb->get_results($query);
$result = [];
$upload_dir = wp_upload_dir();
foreach ($rows as $row) {
$pattern = $upload_dir['basedir'].'/attach/'.$row->ID.'_0.*';
$files = glob($pattern);
if (empty($files)) {
$url = '';
$type = '';
} else {
$info = pathinfo($files[0]);
$url = $upload_dir['baseurl'].'/attach/'.$info['basename'];
$ext = $info['extension'];
switch ($ext) {
case 'jpeg':
case 'png':
$type = 'img';
break;
case 'mp4':
$type = 'video';
break;
case 'pdf':
$type = 'iframe';
break;
default:
break;
}
}
$result['items'][] = ['title' => $row->title, 'img1' => $url, 'type' => $type];
}
echo json_encode($result);
exit;
}
－－－－

bbs_que_list.php
－－－－
.then(json => {
for (let idx = 0; idx < json.items.length; idx++) {
count++;
const item = json.items[idx];
if (item.type == "img") {
img1 = '<img style="height:100px;" src="' + item.img1 + '">';
} else if (item.type == "video") {
img1 = '<video style="height:100px;" src="' + item.img1 + '#t=0.1"></video>';
} else if (item.type == "iframe") {
img1 = '<iframe style="height:100px;" src="' + item.img1 + '"></iframe>';
} else {
img1 = "";
}
content =
'<div style="height:100px;">' + img1 + "</div>" +
"<div>" + item.title + "</div>";
$("#content").append(content);
}
})
－－－－

雰囲気がわかればいいと思ったので、
最小限の文字列でＨＴＭＬを生成しています。
ひとまずこれで動作確認してみてください。
私のサンプルサイトにもあげています。

これはメンテナンスしにくいので、
できればdocument.createElement()などを使う方がいいような気がします。
ＨＴＭＬが期待通りに作成されることがわかれば、
document.createElement()に変更するのも簡単になってくると思います。

おそらくですが、このままですと、横並びにはできないので、
最低でももう一つ<div>が必要になってくると思います。
期待通りのデザインで表示できるようになったら、
document.createElement()に変更してみてください。

お礼

質問一覧表示画面のリンクが抜けておりました申し訳ありません。

http://www.irasuto.cfbx.jp/%e9%9b%91%e8%ab%87%e6%8e%b2%e7%a4%ba%e6%9d%bf%e3%80%80%e7%99%bb%e9%8c%b2%e7%b5%90%e6%9e%9c%e7%94%bb%e9%9d%a2/

補足

修正ありがとうございます。
<div>を追加して document.createElement() に変更しようと考えていたのですが、wordpress のバージョンをアップデートしたところ何も表示されなくなってしまいました…
console を見てもエラーが書かれていない為、下記サイトでエラーがないか確認したところセミコロンが抜けていると書かれていたので追加したところ、console にエラーが表示されたのですが質問一覧表示画面と関係ないファイルのようで原因が特定できておりません。
エラーの原因を見つける方法はありますでしょうか？

※Javascriptチェック
https://jshint.com/

※コード比較（左がdell_okさんが考えたコード、右がセミコロンを加えたコードになります）
https://difff.jp/kbhuf.html