WordPressの質問（q10145776）の続

質問

不正なトークンと表示されるため、single-regist.phpから下記のコードを削除したのですが、そちらは問題ないでしょうか？
送信時にトークンが必要だと思いますので、登録結果画面には必要ないのではないかと考えております。

//確認画面でデータが安全であることが確認された上で$_SESSIONを経由して画面遷移するが、登録結果画面へは不正アクセスできるから必須
if (empty($_SESSION['token']) || empty($_POST['token']) || $_SESSION['token'] !== $_POST['token']) {
exit('不正トークン');
}

※single-regist.phpの11行目からトークンのコードになります
https://wandbox.org/permlink/vCbUEZFcvQf2n1DK

回答No.33

dell_OK · ベストアンサー

・質問がみつかりませんと表示されています

ＵＵＩＤが付いてないようです。
http://www.irasuto.cfbx.jp/雑談掲示板%e3%80%80質問表示画面/

ＵＵＩＤが付いてこんなＵＲＬになれば表示されます。
http://www.irasuto.cfbx.jp/雑談掲示板%e3%80%80質問表示画面/?29bbf0d7-34fd-11ee-ad27-e4434ba51b4c

・この表示画面というのは必要なのでしょうか？質問一覧画面から各リンクに飛ぶことで内容を表示させるものだと思っていたのですが…

必要だと思います。
リンクの飛び先が表示画面になると思うのですが、違うのでしょうか。
リンク先のページをどのように作るつもりでしたか。
別ページになるのでしたら必要だと思います。
それとも同じページ内で表示するつもりでしたか。

・別途データベースにIPアドレスを保存したいと考えております

テーブルにカラムを追加して保存するようにしてみてください。

・質問を一覧表示する際に1番目のアップロード画像とメッセージの一部を並べていきたいのですが可能でしょうか？

こんな感じになります。
メッセージの一部、については以前やったことがあると思いますので、$row->messageから取得するようにしてみてください。
－－－－
<?php
/*
Template Name: 質問一覧画面
*/
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->URL);
$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->namae.'</a></div>';
echo '<div>'.$row->message.'</div>';
echo '<div>'.$view.'</div>';
}
－－－－

お礼

質問の期限が切れてしまったので下記のURLからアドバイスお願い致します。

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

補足

A.回答ありがとうございます、昨日教えて頂いた質問掲示板 登録結果画面のタイトルから飛べるページをリンク先として考えておりました。

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/

var_dump($row);で確認したところ登録結果画面と質問表示画面でNULLが表示されております。
コードをたどったところ質問表示画面の$sql = 'SELECT * FROM sortable WHERE URL=%s';で取得に失敗しているのではないかと考えたのですが、エラー原因は分かりますでしょうか？

※データベースにURLは格納されております。
https://imgur.com/5RmSq2Y.jpg

※該当コード
$url = substr($_SERVER['REQUEST_URI'], -36);
$sql = 'SELECT * FROM sortable WHERE URL=%s';
$query = $wpdb->prepare($sql, $url);
$rows = $wpdb->get_results($query);
var_dump($row);
if (empty($rows)) {
echo '質問がみつかりません';
exit;
}

________________________________________________________________________

Q.テーブルにカラムを追加して保存するようにしてみてください。

A.アドバイスありがとうございます、下記コードでIPアドレスは保存できるようですが、入力画面、確認画面、表示画面どのタイミングで追加すべきでしょうか？

$ip_address = $_SERVER["REMOTE_ADDR"];
//文字列形式から数値 に、数値から文字列形式に変換
$ip_long = ip2long($ip_address);

-- ipアドレスのテーブル
CREATE TABLE tbl_ips ( `ip` INT(10) NOT NULL );

$sql = "INSERT INTO tbl_ips ( ip ) VALUES ( INET_ATON( $ip ) );"

Q.こんな感じになります。
メッセージの一部、については以前やったことがあると思いますので、$row->messageから取得するようにしてみてください。

A.アドバイスありがとうございます、メッセージの一部を取得というコードを考えてみました。1点質問があるのですが、<a href="'.$url.'"></a>を名前、画像、メッセージ全体に1つだけかけたい場合どのようなコードにすればよいのでしょうか？

－－－－
<?php
/*
Template Name: 質問一覧画面
*/
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->URL);
$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->namae.'</a></div>';
　　 echo '<div>'.$view.'</div>';
echo '<div>'.mb_strimwidth($row->message, 0, 38, "･･･").'</div>';
}
－－－－

回答No.12

dell_OK

・※PHPで変更

これは何か別のモジュールが必要そうですね。
よくわからないのでひとまず除外しましょう。

・※ファイルごと切り替え

読み込むスタイルシートファイルを切り替えるのはあまりいい方法ではない気がします。
メンテナンスに手間がかかりそうだからです。
でも、この中では一番簡単な方法なのかも知れません。
とは言っても、ここまでするくらいなら、
私だとＨＴＭＬに直接 style="" を書きそうです。

・※jQueryで変更

これでもいいのかも知れませんが、やるとしたら、直書きcss( )の方法ですね。
つまり、ＨＴＭＬに直接書くのと同じ手法で、要素に直接スタイルを指定します。

追加 addClass( )、削除 removeClass( )でやると、
クラス名をbillboard_uploadFiles_areaで統一する意味があまりないような気がします。
クラスを追加削除する方法ですからね。

どちらにしてもJavaScriptが苦手な私はあまりやらない方法です。
その部分はＰＨＰでもできますし。
class=""に何を入れるか、と言うことですから、
わざわざＨＴＭＬがロードされてから設定しなくてもよさそうな気がします。

補足

回答ありがとうございます、PHPを見返してみるとRubyと書いてあり直接は使えないようでした申し訳ありません。

jQueryも良さそうだと思ったのですが、どうやらブラウザで表示が変わってしまうようですね。

あれから調べてみたのですが、PHPでも動的に変化させることは出来そうです。
別途ファイルアップロード用にPHPファイルを作成して、そちらに処理を書く方法で解決することは可能だと思われますでしょうか？

※functions.phpにcssを記述他の部分も読み込まれてしまいそう
https://fantastech.net/php-css

※colorを変化させる方法しかわからず応用できるか不明
https://tsuchippo.com/programming-phpstyle

※どのファイルに記述するのか分からない
https://www.web-officer.com/php/rewrite-the-css-only-under-the-condition-of-php.php

※使い方がよく分からない
http://103px.blog.fc2.com/blog-entry-19.html

※jQueryで対応する方法（ブラウザで表示が変わってしまう）
https://okwave.jp/qa/q7386889.html

回答No.11

dell_OK

・billboard_uploadFiles_areaのクラス名を全て統一したいことを考えて可能な限りHTMLではなくCSSのみを変更したいと考えております

なるほど。
できそうならやってみてください。
画像ふたつで縦に並べた時に、メッセージをひとつ目の画像の横から始めるのが難しいかも知れませんね。

回答No.10

dell_OK

画像ふたつは縦並びだったんですね。
読み間違えてました。
すみません。
改めてこうですかね。
http://oksample.starfree.jp/narabi/
これでよかったら、
補足にくださったようにカウントで分岐処理でいいと思います。
回り込み<div>の範囲を変えたＨＴＭＬを出力しています。
調べられているのはスタイルシートを変更する目的のようですが、
回り込みの範囲を変えるだけの方が簡単な気がします。

補足

回答ありがとうございます、周り込みの範囲を変えるというのも考えていたのですが、画像の2つ目がそれぞれ縦並びと横並びで異なること、billboard_uploadFiles_areaのクラス名を全て統一したいことを考えて可能な限りHTMLではなくCSSのみを変更したいと考えております…

<div class="billboard_article_area">
<div class="billboard_uploadFiles_area">
<!-- <label>添付ファイル#1</label> -->
<div class="viewer"><?php echo $view[0]; ?></div>
</div>
<div class="billboard_uploadFiles_area">
<!-- <label>添付ファイル#2</label> -->
<div class="viewer"><?php echo $view[1]; ?></div>
</div>
<div class="billboard_uploadFiles_area">
<!-- <label>添付ファイル#3</label> -->
<div class="viewer"><?php echo $view[2]; ?></div>
</div>

回答No.9

dell_OK

データベースのメッセージの桁があふれてるのかもしれません。
私の方ではこうなっているので、そちらもそうでしたら、
message varchar(255)
phpMyAdminで５００に上げてみてください。

お礼

CSSを動的に変更できる方法を他にも調べてみたところ、複数の方法を見つけたのですが、使用できない方法もありそうです。
PHPで変更するものが使用できそうなのですが、dell_okさんから見て使用できそうなコードはありますでしょうか？

※PHPで変更
https://opiyotan.hatenablog.com/entry/dynamically_set_css

※ファイルごと切り替え
https://www.ipentec.com/document/javascript-change-css-file

※jQueryで変更
https://qiita.com/kazTera/items/ab5dd9fb5b2579b25c4d

補足

アドバイスありがとうございます、変更したところ500文字表示することが出来ました。

1点お聞きしたいのですが、確認画面でファイルアップロード数によってCSSクラスを変更させたい場合、どのような機能を作るべきでしょうか？

以前カメラ画像をファイルアップロードされた際に消すクラス変更を行ったので、それを元に考えていたのですが、よくよく考えてみるとHTMLは変更せずにCSSを切り替えることになりそうです。

CSSのスタイルを動的に変更できる方法を見つけたのですが、実行する条件が分からずdell_okさんにアドバイス頂きたいです。
ファイルが1つ、2つ、3つアップロードされた時にイベントを実行するというのを考えてみたのですが、そのようなコードを書くのは難しく、別の条件もあるのではないかと思っております。

※参考サイト
https://www.ipentec.com/document/css-change-style-dynamic

※アップロード分岐
if ($image_count = 1) {
// 1がtrueの場合
// ここの処理が実行される

}
elseif ($image_count = 2) {
// 1がfalseで2がtrueの場合
// ここの処理が実行される
}
else {
// それ以外（1、2ともにfalse）の場合
// ここの処理が実行される
}

※表示画面でアップロード数をカウント
<?php
/* データベースを参照して表示 */
$sql = 'SELECT message,namae,stamp FROM sortable WHERE ID=%d';
/* IDを連想配列で出力 */
$results = $wpdb->get_results($wpdb->prepare($sql, $wpdb->insert_id), ARRAY_A);
$row = $results[0];
$view = [];
$image_count = 0;
foreach ($filenames as $i => $filename) {
if (empty($filename)) {
$ext = '';
} else {
$info = pathinfo($filename);
$attach_url = $upload_dir['baseurl'].'/attach/'.$info['basename'];
$ext = $info['extension'];
}
switch ($ext) {
case 'jpeg':
case 'png':
$view[$i] = '<img id="multimedia" style="height: 350px; width: 528px;" src="'.$attach_url.'">';
++$image_count;
break;
case 'mp4':
$view[$i] = '<video id="multimedia" style="height: 350px; width: 528px;" controls src="'.$attach_url.'">';
++$image_count;
break;
case 'pdf':
$view[$i] = '<iframe id="multimedia" style="height: 350px; width: 528px;" src="'.$attach_url.'"></iframe>';
break;
default:
$view[$i] = '';
++$image_count;
break;
}
}
echo $image_count;
?>

回答No.8

dell_OK

ちょっと考えてみたのですが、普通の回り込みでいいような気がします。
画像をカウントしてＨＴＭＬを作る、必要はないのかなと。
ただ、条件がありますが、それでよければスタイルシートだけでできそうです。

まずはこちらを見ていただいて、このようになればいいのですよね。
http://oksample.starfree.jp/narabi/

おそらくですが、質問者さまのサイトの作りから想像すると、サイト画面の横幅は決められていると思っています。
そこに、画像およびメッセージのすべてを入れる欄の横幅も決めてしまいます。
私のサンプルでは、こうしてます。
.group {
width: 300px;
}
この中に画像がいくつ並んでも、メッセージがどんなに長くても、300pxです。
これをこえる場合は、次の要素は自然と下に表示されるはずです。

横並びは、floatで。
.img_area {
float: left;
}

そして、画像の横幅も決めてしまいます。
私のサンプルでは、こうしてます。
.img {
max-width: 100px;
}
画像ひとつが最大100pxです。
３００÷１００＝３、なので３つまで並びます。

なので、単純に画像とメッセージを同じ階層で表示すればいいだけになるかと思います。

コードは右クリックして、ページのソースを表示、などしてみてください。

補足

Q.まずはこちらを見ていただいて、このようになればいいのですよね。
http://oksample.starfree.jp/narabi/

A.回答ありがとうございます、画像の表示形式がアップロード数によって変化するためCSSのクラス変更は必須だと思われます。
画像が2つの場合は縦並び、3つの場合はdell_okさんがあげてくださったデザインになります。

画像が2つの場合は作り終えたので、3つの場合に対応するためにif分岐コードを書く予定です。
1つ問題が生じているのですが、500文字で入力した場合も250文字しか表示されず原因が分かりません。
文字が半分に減る原因は分かりますでしょうか…？

※現在のデザイン
http://www.irasuto.cfbx.jp/blog/%e9%9b%91%e8%ab%87%e6%8e%b2%e7%a4%ba%e6%9d%bf/

※現在のコード
https://wandbox.org/permlink/8fL8clqiT8SD8kXE

回答No.7

dell_OK

・画像は横並びにする予定です。

それならいいと思います。

回答No.6

dell_OK

・画像を3つ表示させたい場合下記のような形になるのでしょうか？

登録結果画面でしょうか。
画像が縦に表示されていますが合っていますか。

補足

回答ありがとうございます、画像は横並びにする予定です。

回答No.5

dell_OK

・カウントの方法をどうすべきか分からない状態です。データベースでカウントすることは可能なのでしょうか？

そもそもどこで表示する話しかわかりませんが、例えば確認画面ですでにそれをしたいのであれば、こんな感じでカウントできます。
－－－－
<?php
$view = [];
$image_count = 0;
foreach ($_SESSION['attach']['data'] as $i => $data) {
$base64 = base64_encode($data);
$type = $_SESSION['attach']['type'][$i];
switch ($type) {
case 'image/jpeg':
case 'image/png':
$view[$i] = '<img id="fileupload_image_view" style="height: 350px; width: 520px;" src="data:'.$type.';base64,'.$base64.'">';
++$image_count;
break;
case 'video/mp4':
$view[$i] = '<video id="fileupload_image_view" style="height: 350px; width: 520px;" controls src="data:'.$type.';base64,'.$base64.'">';
++$image_count;
break;
case 'application/pdf':
$view[$i] = '<iframe id="fileupload_image_view" style="height: 350px; width: 520px;" src="data:'.$type.';base64,'.$base64.'"></iframe>';
++$image_count;
break;
default:
$view[$i] = '';
break;
}
}
echo $image_count;
?>
－－－－
最後のechoは確認のためのものなので、確認できたら削除しておいてください。

登録確認画面でも似たようなコードのところでカウントできます。

どちらも　default:　の場合にはカウントせず、他の場合は　++$image_count;　でカウントします。

データベースには画像の情報はありませんのでカウントできません。
登録確認画面ではＩＤに基づいてファイルを探しているので、これ以外の画面（閲覧画面など）でも同じ方法になります。

補足

アドバイスありがとうございます、画像の情報はディレクトリにあるのを忘れておりました。
CSSの方がまだ完成していないため、今日修正後にコードを分岐コードを考えてみます。

回答No.4

dell_OK

確認画面に進むと３つ目の画像が表示されるべきところに１つ目の画像が表示されています。

補足

回答ありがとうございます、画像を3つ表示させたい場合下記のような形になるのでしょうか？

https://wandbox.org/permlink/7Zz3NzgMz24UVMwI

回答No.3

dell_OK

質問には関係ありませんが、名前は必須なのに、プレースフォルダが「未入力の場合は、匿名で表示されます」となっているのはおかしい気がします。

補足

回答ありがとうございます、名前は必須項目から外す予定だったのですが見落としておりました。申し訳ありません…