WordPressの質問（q10165331）の続

質問

URLを連番にすべきかuuidにすべきか迷っているのですが、どちらが良いと思われますでしょうか？
一連番号のIDを避けるべきなのであればメジャーなサイトはすべてランダム文字列になっているはずではないかという意見とURLが予測しやすいと攻撃しやすいという意見があるようです。

IDを付ける際にBase58を使う、N 進数の文字列を使うなどuuid意外にも色んな方法があるようで、どうすべきか分かりません、アドバイスお願い致します。
$url = home_url('質問表示画面?'.$row->ID);

※idをautoincrementしない方が良い理由
https://zenn.dev/praha/articles/3c84e3818891c3

※ユーザIDを連番にしてURLに使っても問題ない
https://teratail.com/questions/364664
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q11270700181

※短縮URLの付け方
https://sousaku-memo.net/php-system/71
https://co.bsnws.net/article/256

※htmlspecialcharsでIDをエスケープ
http://lovee7.blog.fc2.com/blog-entry-34.html

質問一覧表示(single-que_list.php)
回答可能なページ(single-complete.php)

<?php
/*
Template Name: que_list
固定ページ: 質問一覧画面
*/
get_header();
$sql = 'SELECT * FROM sortable';
$query = $wpdb->prepare($sql);
$rows = $wpdb->get_results($query);
$upload_dir = wp_upload_dir();
foreach ($rows as $row) {
$url = home_url('質問表示画面?'.$row->ID);
$pattern = $upload_dir['basedir'].'/attach/'.$row->ID.'_0.*';
$files = glob($pattern);
if (empty($files)) {
$view = '<img src="ダミー画像パス">';
} else {
$info = pathinfo($files[0]);
$attach_url = $upload_dir['baseurl'].'/attach/'.$info['basename'];
$ext = $info['extension'];
switch ($ext) {
case 'jpeg':
case 'png':
$view = '<img style="height: 50px;" src="'.$attach_url.'">';
break;
case 'mp4':
$view = '<video style="height: 50px;" src="'.$attach_url.'">';
break;
case 'pdf':
$view = '<iframe style="height: 50px;" src="'.$attach_url.'"></iframe>';
break;
default:
$view = '';
break;
}
}
echo '<div><a href="'.$url.'">'.$row->unique_id;
echo '<div>'.$row->namae.'</div>';
echo '<div>'.$view.'</div>';
echo '<div>'.mb_strimwidth($row->message, 0, 38, '･･･').'</div>';
echo '</a></div>';
}
?>

回答No.29

dell_OK · ベストアンサー

・既存のコードから追加コードを探すのが大変になるため、追加行と追加コードを書いていきます。

私の方ではgitでソース管理しているので前回のものと比較は簡単にできるので書かなくても大丈夫ですよ。

「※最新コード」のＵＲＬが違うのか、ラジオボタンが　type="feelingListbox"　のままのようです。

ファイルのアップロードも名前やコメントやスタンプと同じところで処理すればいいので、FormDataに追加するのはそちらでやってください。

気になるのは　fetch　のＵＲＬ　/wp-admin/admin-ajax.php　ですかね。
これでうまくいくのかどうか私の方では検証ができていません。

お礼

申し訳ありません、データベースにアップロードファイルを格納する場合にサンプルコードを調べた際の参考サイトを提示しておりませんでした。

http://surferonwww.info/BlogEngine/?tag=/Upload

補足

「※最新コード」のＵＲＬが違うのか、ラジオボタンが　type="feelingListbox"　のままのようです。

A.回答ありがとうございます、gitで確認されているとのことで了解いたしました。ラジオボタンを変更したものと異なるリンクのものを修正しておりました申し訳ありません。

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

Q.ファイルのアップロードも名前やコメントやスタンプと同じところで処理すればいいので、FormDataに追加するのはそちらでやってください。

気になるのは　fetch　のＵＲＬ　/wp-admin/admin-ajax.php　ですかね。
これでうまくいくのかどうか私の方では検証ができていません。

A.アドバイスありがとうございます、最新コードのnew-complete.phpの300行目から321行目までの下記コードをnew-complete.phpの251行目に移動いたしました。
現在のsingle-input.phpと参考サイトのFetch API でファイルをアップロードするの例に上がっているコードを比べたところ入力内容をチェックする項目はほぼ同じようでした。

※修正コード
https://wandbox.org/permlink/TyE4ReXNe92MEbIF

// 送信データの準備
const formData = new FormData();
formData.append("uploadfile", uploadfile.files[0]); // ファイル内容を詰める

const param = {
method: "POST",
body: formData
}

// アップロードする
fetch("https://example.com/receive.php", param)
.then((res)=>{//成功したら(then) ,responseのデータをコンソールに表示
return( res.json() );
})
.then((json)=>{
// 通信が成功した際の処理
})
.catch((error)=>{
// エラー処理
});
});
});

ファイル送信　有無が現在のsingle-input.phpにはなく、ファイルをディレクトリに保存する方法とデータベースに保存する方法で違いがあるようです。
削除や別途表示させる場合のことも考えて、データベースに保存する方法を取りたいのですが、Javascriptで書く必要がありそうで難しいのではないかと懸念しております…

Fetch APIはネットワークエラーが起きた際に例外を投げ、それをキャッチできないとウェブアプリケーションの場合は画面が真っ白になるようで、fetch（）・then ・then .catch によりエラーをキャッチするため、この文に合わせてデータベースに保存することになりそうです。

※fetch APIを安全に使う方法
https://www.slideshare.net/i_Pride/fetch-api-255718218

※入力内容をチェックする項目
１，ファイル容量　サイズ
２，ファイル形式　タイプ
３，ファイル送信　有無
４，MYMETYPE調べる
＋α
保存（ファイル名作成）

回答No.28

dell_OK

この部分も遷移してきた時の処理なので不要です。
－－－－
<?php echo $stamp_checked['1']; ?>
－－－－

これでよさそうな気がします。
－－－－
<input type="radio" name="stamp" value="1" id="stamp_1"><label for="stamp_1"></label>
－－－－

それでと。

submitすると遷移してしまうので送信ボタンはただのボタンにしてください。
－－－－
<button type="button" id="submit_button" name="mode" value="confirm">回答を確認する</button>
－－－－

同じく、送信はしないので、ここは、
－－－－
document.forms['community_form'].addEventListener('submit', (e) => {
－－－－

送信ボタンのクリックでいいと思います。
－－－－
document.getElementById("submit_button").addEventListener('click', (e) => {
－－－－

FormDataについては詳しくないので実際のデータは確認できていませんが、
ラジオボタンの値を追加するコードは以下のような感じになると思います。
上２行はもともとあるコードで、その下に追加してください。
処理内容としては、
１．nameが'stamp'の要素を取得します（複数あるラジオボタンのオブジェクトの配列が取得されます）
２．取得した要素を順にチェックして、checkedがtrue（選択されている）のものを探します。
３．見つかったら、そのvalue値をformDataに'stamp'として追加します。
－－－－
const formData = new FormData(community_form); // フォームデータをオブジェクトに収容する
formData.append('action', 'community_form'); // サーバーのアクション名
const stamps = document.getElementsByName("stamp");
for(const stamp of stamps) {
if (stamp.checked == true) {
formData.append('stamp', stamp.value);
break;
}
}
－－－－

お礼

こちらが最新の回答になります。 質問の期限が切れてしまったので下記のURLからアドバイスお願い致します。 https://okwave.jp/qa/q10187929.html

Powered by GRATICA

補足

Q.これでよさそうな気がします。
－－－－
<input type="radio" name="stamp" value="1" id="stamp_1"><label for="stamp_1"></label>
－－－－

A.修正ありがとうございます、変更いたしました。

Q.submitすると遷移してしまうので送信ボタンはただのボタンにしてください。

A.アドバイスありがとうございます、修正いたしました。

１．nameが'stamp'の要素を取得します（複数あるラジオボタンのオブジェクトの配列が取得されます）
２．取得した要素を順にチェックして、checkedがtrue（選択されている）のものを探します。
３．見つかったら、そのvalue値をformDataに'stamp'として追加します。

A.説明ありがとうございます理解出来ました。checkedがtrue（選択されている）のものを stamp として追加するような形になるんですね勉強になりました。

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

Fetch API でファイルをアップロードするコードについて考えてみました。dell_okさんから見ておかしな部分がありましたらアドバイスお願い致します。
セキュリティのバリデーションとCORS対策は後ほど実装する予定です。
既存のコードから追加コードを探すのが大変になるため、追加行と追加コードを書いていきます。

参考サイトと現在のコードでPHPかJavascriptでアップロードファイルのセキュリティチェックがそれぞれ行われており、どちらに合わせるべきか悩んでおります…　

参考サイトではアップロードファイルをディレクトリから呼び出す形を取っているのですが、データベースから呼び出す形を取りたい為そちらについても深く調べる必要がありそうです。

※参考サイト
https://blog.katsubemakito.net/html5/fetch2

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

new-complete.phpの64行目に以下のコードを追加いたしました。
<form method="post" name="community_form" id="upload" enctype="multipart/form-data">

※id="uploadfile"は追加せずにclass="attach"を使う方がよいと思うのですが、既存のJavacriptコードのこともあるため一時的に分けております。
new-complete.phpの101,114,126行目に以下のコードを追加いたしました。
<input type="file" id="uploadfile" class="attach" name="attach[]" accept=".png, .jpg, .jpeg, .pdf, .mp4" style="display: none;">

new-complete.phpの286行目に以下のコードを追加いたしました。
<script>
const avatar = document.querySelector("#uploadfile"); // <input type="file">

/*
* ページの読み込みが完了したら実行
*/
window.onload = ()=>{
/*
* 送信イベントが発生したら実行
*/
document.querySelector("#upload").addEventListener("submit", (e)=>{
// 規定の送信処理をキャンセル(画面遷移などしない)
e.preventDefault();

// 送信データの準備
const formData = new FormData();
formData.append("uploadfile", uploadfile.files[0]); // ファイル内容を詰める

const param = {
method: "POST",
body: formData
}

// アップロードする
fetch("https://example.com/receive.php", param)
.then((res)=>{//成功したら(then) ,responseのデータをコンソールに表示
return( res.json() );
})
.then((json)=>{
// 通信が成功した際の処理
})
.catch((error)=>{
// エラー処理
});
});
});
</script>

community-form.phpの24行目に以下のコードを追加いたしました。
<?php
// 一時ディレクトリから公開先へファイルを移動
$result = move_uploaded_file($_FILES['uploadfile']['tmp_name'], 'image/file.png');

// 最終的な結果を返却
header('Content-type: application/json');
if( $result !== false ){
echo json_encode(["status"=>true]);
}
else{
echo json_encode(["status"=>false]);
}
?>

community-form.phpの37行目に以下のコードを追加いたしました。
<?php
//ファイルが送信されていない
if( ! isset($_FILES['uploadfile']) ){
error_log('ファイルが未送信');
}

//ファイル受信時にエラーが発生
if( (isset($_FILES['uploadfile']['error'])) && ($_FILES['uploadfile']['error'] !== UPLOAD_ERR_OK) ){
error_log('何らかのエラーが発生');
}

//何らかのアタックを受けている
if( ! is_uploaded_file( $_FILES['uploadfile']['tmp_name'] ) ){
error_log('何らかの攻撃を受けている');
}

//ファイルサイズ
if( $_FILES['uploadfile']['size'] > (30 * 1024) ){ // 30k byte以上ならエラー
error_log('ファイルサイズが大きすぎます');
}

//ファイル形式(画像ファイルか)
$mime = getMimeType(`$_FILES['name']['tmp_name']`);
if( $mime === null ){
error_log('画像ではないか、JPEG/GIF/PNGのいずれかでない');
}

function getMimeType($path){
list($width, $height, $mime, $attr) = getimagesize($path);
switch($mime){
case IMAGETYPE_JPEG:
return('jpeg');
case IMAGETYPE_PNG:
return('png');
case IMAGETYPE_GIF:
return('gif');
default:
return(null);
}
}
?>

_________________________________________________

※エラー処理
<script>
//ファイルが選択されているか
const avatar = document.querySelector("#avatar"); // <input type="file">

if( avatar.files.length !== 1 ){
alert("ファイルが選択されていないか、複数選択されています");
}

//ファイル容量
const avatar = document.querySelector("#avatar"); // <input type="file">

if( avatar.files[0].size > (30 * 1024) ){ // 30k byteを超えればエラー
alert("ファイルサイズが大きすぎます");
}

//ファイル形式
const avatar = document.querySelector("#avatar"); // <input type="file">

if( avatar.files[0].type !== "image/jpeg" ){
alert("ファイル形式はJPEGのみです");
}
</script>

回答No.27

dell_OK

ところで、このたび非同期通信をすることになっていますが、質問入力画面の際にはやらなかったのはどんな理由でしたか。

それと、質問する人は質問ばかりし、回答する人は回答ばかりするのであれば、私が気にすることもないのですが、質問と回答がまったく別の仕組み（操作、遷移）でもかまわないのでしょうか。
画面の項目が同じなので保存するデータベースのテーブルも同じものを使うことになりそうですし、同じ画面で全部やってしまった方がいいような気もしています。
「まとめる」と言うのはこういうことにもなると思います。
以前、クラス名を変えることで、ＳＥＯ対策とか言われていたような覚えがあるので、それであればこのまま別々でもいいかも知れませんが、これとは別の掲示板も作られる予定だったと思いますので、似たようなもの、だけど中身が全然違う、ものを量産しない方がいいと思います。
とは言っても、一方通行で作るだけ作って、それで完成と言う流れのようでもあるので、メンテナンスのことを私が気にしなくてもいいのかも知れませんが。

補足

A.回答ありがとうございます。下記が以前お答えした内容になります。
・回答者側のスペースは質問の内容を確認できる作りにしたい為に狭くなってしまうのですが、質問者側は質問をしっかり考えることができるように見やすくCSSを整えた状態で作成したいです。

dell_okさんが言われている通り、質問と雑談掲示板でデザインを分ける場合は同じ画面で全部やってしまった方がいいですね…
現在のsingle-input.phpも送信→確認を1画面で行えるように変更するような形で考えてみます。

回答No.26

dell_OK

・送信ボタンを制限するコードを文字数制限の際に書いているためまとめたほうが良いでしょうか？

どのようにまとめるのでしょうか。

・スタンプ画像をFetchでサーバーに送る方法が分かりませんでした。

その前に、スタンプ画像が表示されていません。
おそらくラジオボタンではないからだと思いますが、feelingListboxと言うのはなんでしょうか。
－－－－
<input type="feelingListbox" name="stamp" value="1" id="stamp_1" <?php echo $stamp_checked['1']; ?>><label for="stamp_1"></label>
－－－－

補足

A.回答ありがとうございます、コードを再度確認したところまとめる必要はないようでした申し訳ありません。
HTMLクラスをsingle-input.php(入力画面)から変更する際にラジオボタンも間違えて変更しておりました…

※修正後のコード
－－－－
<input type="radio" name="stamp" value="1" id="stamp_1" <?php echo $stamp_checked['1']; ?>><label for="stamp_1"></label>
－－－－

回答No.25

dell_OK

最近はfetchがはやってるみたいですし、記述がもっとも簡単ぽいので（とは言え理解してないと何を書いたらいいのかは困難ですが）、fetchがいいと思います。

補足

回答ありがとうございます、fetchについて調べてコードを考えてみます。
送信フォームの作成方法として調べたところWordPressのFetchでお問い合わせフォームを作る方法を見つけた為、まずこちらの記事を参考にコードを考えました。

※WordPress：Fetch（Ajax）でお問い合わせフォーム（プラグインなし）
https://imuza.com/enquiry-form/

参考サイトを読んだところバリデーションもセキュリティ上検討すべきだと書いてあったので、セキュリティについて気になって調べたところ異なるオリジン間でCORS対策が必要ということが分かりこの2点が主なセキュリティ対策になってくるようです。

※Fetch APIの対応ブラウザについて
https://engineering.webstudio168.jp/2023/03/how-to-use-fetch-api/

色々調べたところ参考サイトが多数あるため、その都度最新コードを変更していくように致します。
既存のコードから追加コードを探すのが大変になるため、追加行と追加コードを書いていきます。
送信ボタンを制限するコードを文字数制限の際に書いているためまとめたほうが良いでしょうか？
送信できなかった場合のエラー表示は必要ないと考えているのですが、確認のために残しております。

ボタンを送信後にJSONデータを取得してテキスト表示する場合はJSONで、アップロードファイルはMIME タイプを使うような形だと思いました。
名前とメッセージの表示方法は理解出来たのですが、スタンプ画像をFetchでサーバーに送る方法が分かりませんでした。
アドバイスお願い致します。

※JavaScript から HTTP リクエストを発行する
https://learn.utcode.net/docs/advanced/fetch-api/

※トークン処理について

※Fetch APIが対応するデータ
https://yagisuke.hatenadiary.com/entry/2018/01/28/181907

※WordPress で CORS を有効にする
https://biglinden.com/support/how-to-enable-cors-in-wordpress/

https://notemite.com/django/cors-with-fetch-js-api-and-django/

※Fetch API でファイルをアップロード
https://blog.katsubemakito.net/html5/fetch2

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

new-complete.phpの137行目に以下のコードを追加いたしました。
<!-- 入力されたフォームデータを fetch を使いサーバーに送る -->
<?php wp_nonce_field( 'community_form', '_wpnonce', false ); ?>

new-complete.phpの63,64行目に以下のコードを追加いたしました。
<p id="message"></p>
<form method="post" name="community_form" enctype="multipart/form-data">

new-complete.phpの250行目に以下のコードを追加いたしました。
/* fetch でサーバにリクエストする */
<script>
document.forms['community_form'].addEventListener('submit', (e) => {
e.preventDefault(); // イベント動作を止める
const formData = new FormData(community_form); // フォームデータをオブジェクトに収容する
formData.append('action', 'community_form'); // サーバーのアクション名
const opt = {
method: 'post',
body: formData//fetch() を使って FormData をサブミットするには、 送信オプションの body に FormData オブジェクトをセット
}

fetch('/wp-admin/admin-ajax.php', opt) // 送信先
//エラーが出た際の例外処理
.then(response => {//成功したら(then) ,responseのデータをコンソールに表示
if(!response.ok) {
throw new Error;
}
return response.text();
})
.then(text => {
document.getElementById('namae').innerHTML = text;
document.getElementById('message').innerHTML = text;
document.forms['community_form'].style.display = 'none';
})
.catch(error => {
document.getElementById('namae').innerHTML = '送信できませんでした';
document.getElementById('message').innerHTML = '送信できませんでした';
});
});
</script>

回答No.24

dell_OK

・ファイルアップロード機能は回答者にも実装する予定なので必要だと思われるのですが、要らないのでしょうか…？

ここは画面遷移した時の処理なので不要です。
画面遷移しないので、JavaScriptで非同期送信するようになると思います。
その受け取り側ではなにかしらの処理は必要になってくるでしょう。

補足

説明ありがとうございます、理解することが出来ました。JavaScriptで非同期送信する方法を調べたところAjaxを使う方法と使わずにXMLHttpRequestかfetchを使う方法があるようですが、dell_okさんから見て良い方法はどれになりますでしょうか？

※Ajaxを使う方法
https://www.webdesignleaves.com/pr/wp/wp-ajax.html

https://qiita.com/kenmaeda51415/items/5779fe70244fab5abdcf

https://agohack.com/ajax-on-wordpress/

https://norando.net/wordpress-ajax/

※XMLHttpRequestを使う方法
https://cpoint-lab.co.jp/article/201907/10808/

※fetchを使う方法
https://qiita.com/uhyo/items/91649e260165b35fecd7

回答No.23

dell_OK

ここもいらないです。
－－－－
if (empty($_SESSION['token'])) {// 悪意のある攻撃者があらかじめ作成したコードが実行されてしまうのを防ぐ
$_SESSION['token'] = bin2hex(random_bytes(16));
}
$attach = [];
if (!empty($_SESSION['attach'])) {
foreach ($_SESSION['attach']['data'] as $i => $data) {
if (!empty($data)) {
$base64 = base64_encode($data);
}
$type = $_SESSION['attach']['type'][$i];
switch ($type) {
case 'image/jpeg':
case 'image/png':
$attach[] = '<img style="height: 100px;" src="data:'.$type.';base64,'.$base64.'">';
break;
case 'video/mp4':
$attach[] = '<video style="height: 100px;" controls src="data:'.$type.';base64,'.$base64.'">';
break;
case 'application/pdf':
$attach[] = '<iframe style="height: 100px;" src="data:'.$type.';base64,'.$base64.'"></iframe>';
break;
default:
$attach[] = '';
break;
}
}
}
$stamp_checked = [];
$stamp_checked[$stamp] = 'checked';
－－－－

ここもいらないです。
－－－－
foreach ($errors as $error) {
echo "<p>{$error}</p>";
}
－－－－

補足

回答ありがとうございます、ファイルアップロード機能は回答者にも実装する予定なので必要だと思われるのですが、要らないのでしょうか…？

回答No.22

dell_OK

・single-input.php のコードからクラスと配置の順番を変更したものを張り付けることは可能でしょうか？

できなくはないですが、不要な部分やそのままでは使えない部分が多すぎるので、そのままと言うわけにはいかないと思います。

・試しに張り付けてみたところ不正アクセスと表示されてしまいどのように対応すべきかわからない状態です…

まずは不正アクセスの処理をなくしてください。
－－－－
if (!$noindexaccess) {
exit('不正アクセス');
}
－－－－

この質問表示＆回答画面には不正アクセスの処理は不要です。
質問入力画面は　single-index.php　をメインに、入力画面や確認画面の.phpを呼んで、画面遷移するタイプでした。
この回答画面は遷移せずに、そのまま表示し続けたい仕様のようなので、もう少し簡単にできる部分もあれば、反対にややこしくなる部分が出てくると思います。

まずは、不正アクセスのコードをなくして、次のステップに進んでみましょう。

補足

A.アドバイスありがとうございます、不正アクセスのチェックをなくしてみたところエラーは消えたのですが、下記のような警告文が表示されております。
おそらくsingle-index.php のコードを読み込んでいないことが原因だと思われるのですが、single-index.php からコードを加える場合どこを抜き出す必要がありますでしょうか？
single-index.php の $errors = []; は不正アクセスフラグに対してのエラーメッセージ取得になるのでしょうか？
回答機能に確認画面を設ける場合、送信と修正ボタンの2つを用意するように考えているためセッションについてのコードは必要ではないかと考えております。

※警告文
警告: /home/vqnporqs/ public_html/wp-content/主題/sample_theme/single-complete.php の43行目でforeach() に指定された引数が無効です

※該当箇所
<h2>入力画面</h2>
<?php
foreach ($errors as $error) {
echo "<p>{$error}</p>";
}
?>

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

※single-index.phpのセッションについてのコード
$mode = $_POST['mode'] ?? 'init';
switch ($mode) {
case 'regist':
$namae = $_SESSION['namae'];
$message = $_SESSION['message'];
$stamp = $_SESSION['stamp'];
check();
break;
case 'confirm':
$namae = $_POST['namae'];
$message = $_POST['message'];
$stamp = $_POST['stamp'];
check();
break;
case 'input':
$namae = $_SESSION['namae'];
$message = $_SESSION['message'];
$stamp = $_SESSION['stamp'];
break;
default:
$namae = '';
$message = '';
$stamp = '1';
$_SESSION = [];
break;
}
if ('init' !== $mode && empty($errors)) {
$_SESSION['namae'] = $namae;
$_SESSION['message'] = $message;
$_SESSION['stamp'] = $stamp;
} else {
$mode = '';
}
switch ($mode) {
case 'regist':
include 'single-regist.php';
break;
case 'confirm':
include 'single-confirm.php';
break;
default:
include 'single-input.php';
break;
}

回答No.21

dell_OK

・画像を表示したい場合<input type="radio">が別途必要ということでしょうか？
何故数字ではなく画像が表示されているのか不思議に思いました。

そうです。
入力画面や他の画面と同じです。
選択機能のあるラジオボタンをスタイルシートで画像表示しているのをお忘れですか。

補足

A.回答ありがとうございます、申し訳ありません忘れておりました…
質問を表示した下に回答機能を作っていきたいのですが、single-input.php のコードからクラスと配置の順番を変更したものを張り付けることは可能でしょうか？
試しに張り付けてみたところ不正アクセスと表示されてしまいどのように対応すべきかわからない状態です…

※single-complete.phpが現在のコードでnew-complete.phpが回答機能を加えたものになります。(54行目から回答機能コード)
https://wandbox.org/permlink/xQTYiynbgF3SWotM

※元のコード(single-input.phpとnew-complete.php)の順番を変更せずにクラスを比較したもの（クラス名だけ変更、右側が新コード）
https://difff.jp/zagdh.html

イメージしているsingle-complete.phpのデザインになるのですが、回答機能に確認画面を設ける予定です。
回答機能の確認ボタンを送信後に style.display = 'none'; で表示コンテンツを切り替えて回答機能から確認画面に切り替えてそこから送信ボタンを送信して真下に回答を表示させるような作りを考えております。

回答の表示デザインになるのですが、返信ボタンを押すと上にスクロールして回答機能から送信という形で、○件の返信ボタンを押すと収納されたコメントが開くような形で実装したいです。

エクセルで作成したものを画像にして3つ連結させたのですが、画像として書き出すときにうまくいかず見にくくなってしまい申し訳ありません…
※イメージ画像
https://imgur.com/fYEmI79.jpg

回答No.20

dell_OK

・$info['basename'] はどのような意味があるのでしょうか？
・$ext = $info['extension']; は拡張子を取得するために、キーが extension の要素の値を取り出すという意味のコードでしょうか？

var_dump　を追加して内容を確認してみてください。
他にどのようなキーがあるのか、キーごとの内容はどうなっているか、でわかると思います。
－－－－
$info = pathinfo($file);
var_dump($info);
－－－－

・コメントと名前のように<p>スタンプ：'.$row->stamp.'</p>で表示することも可能でしょうか？

スタンプの画像ではなくて値を表示したいのでしたら、それでできます。

補足

A.回答ありがとうございます、var_dump($info);で確認したところ「basename」は、ディレクトリ名とファイル名を含むパス名で、[extension]は拡張子ではないかと思いました。

e4434ba51b4c" array(4) { ["dirname"]=> string(52) "/home/vqnporqs/public_html/wp-content/uploads/attach" ["basename"]=> string(8) "3_0.jpeg" ["extension"]=> string(4) "jpeg" ["filename"]=> string(3) "3_0" }

<p>スタンプ：'.$row->stamp.'</p>で表示してみたところ数字しか表示されず疑問に思っていたのですが、画像を表示したい場合<input type="radio">が別途必要ということでしょうか？
何故数字ではなく画像が表示されているのか不思議に思いました。

回答No.19

dell_OK

・アップロードファイルも表示させることは可能でしょうか？

質問一覧画面と同じようなことをします。

質問一覧画面では　_0　でひとつ目の画像しか表示していないので、
－－－－
$pattern = $upload_dir['basedir'].'/attach/'.$row->ID.'_0.*';
－－－－
すべての画像を表示するにはこうします。
－－－－
$pattern = $upload_dir['basedir'].'/attach/'.$row->ID.'_*.*';
－－－－

画像は複数ある場合があるのでループ処理にします。
－－－－
$upload_dir = wp_upload_dir();
$pattern = $upload_dir['basedir'].'/attach/'.$row->ID.'_*.*';
$files = glob($pattern);
if (empty($files)) {
$view = '<img src="ダミー画像パス">';
} else {
foreach ($files as $file) {
$info = pathinfo($file);
$attach_url = $upload_dir['baseurl'].'/attach/'.$info['basename'];
$ext = $info['extension'];
switch ($ext) {
case 'jpeg':
case 'png':
$view = '<img style="height: 50px;" src="'.$attach_url.'">';
break;
case 'mp4':
$view = '<video style="height: 50px;" src="'.$attach_url.'">';
break;
case 'pdf':
$view = '<iframe style="height: 50px;" src="'.$attach_url.'"></iframe>';
break;
default:
$view = '';
break;
}
echo '<div>'.$view.'</div>';
}
}
－－－－

質問一覧画面でも　_0　ではなくて　_*　の方がいいような気がします。
１枚目の画像を飛ばして、２枚目の画像をアップロードした場合のファイル名は　_1　になります。
この場合　_0　ではファイルを見つけられないので表示されません。
_*　にしておけば、最初に見つかったファイルが表示されるようになります。

補足

Q.１枚目の画像を飛ばして、２枚目の画像をアップロードした場合のファイル名は　_1　になります。
この場合　_0　ではファイルを見つけられないので表示されません。
_*　にしておけば、最初に見つかったファイルが表示されるようになります。

A.回答ありがとうございます、質問一覧画面と同じようにするんですね、登録結果画面のことばかり考えておりました。
コードでわからないところがあったのですが、$info['basename'] はどのような意味があるのでしょうか？調べてみたのですが正解を見つけられずお聞きしておきたいです。

/* uploadディレクトリまでのパスを取得する方法 */
$attach_url = $upload_dir['baseurl'].'/attach/'.$info['basename'];

もう１点わからないところがあるのですが、$ext = $info['extension']; は拡張子を取得するために、キーが extension の要素の値を取り出すという意味のコードでしょうか？

※参考サイト
https://magazine.techacademy.jp/magazine/18794

アドバイスありがとうございます、質問一覧画面を修正いたしました。便利なコードになりますね覚えておきます。
前日のスタンプを表示するコードについてお聞きしたかったことがあるのですが、コメントと名前のように<p>スタンプ：'.$row->stamp.'</p>で表示することも可能でしょうか？
<input type="radio" value="'.$row->stamp.'" id="stamp" disabled><label for="stamp"></label>

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