- 締切済み
WordPressの質問（q1023581）の続
回答が遅くなってしまい申し訳ありません… 確認画面で分からないところがあり、アドバイスお願い致します。 ➀アップロードされたファイルを表示画面と同じ大きさ（height: 350px; width: 528px;）で表示したい場合どうすれば良いでしょうか？ HTML を書き換えるコードの画像サイズを変更しても変化がないためどうすべきか悩んでおります。 ➁名前と画像アイコンの表示順を逆にしたいのですが、bbs_quest_input.php の452行目の divNamaePartialParts.appendChild(usericonImg); と 455行目の divNamaePartialParts.appendChild(child); コードで順番を変更させる方法が分からず教えて頂きたいです。 上記とは別の疑問になるのですが、質問文、質問タイトル、名前それぞれ残り1文字入力可能な状態で制限がかかってしまいます。 これは以内というコードになっているからでしょうか？何が原因となっているのか分からずアドバイス頂きたいです。 ※現在のコード https://wandbox.org/permlink/piR82q0rnnWvVphI ※確認ページ表示画面 https://imgur.com/AucGqLf.png ※質問掲示板 http://www.irasuto.cfbx.jp/%e8%b3%aa%e5%95%8f%e6%8e%b2%e7%a4%ba%e6%9d%bf/
- php_learn
- お礼率35% (474/1340)
- PHP
- 回答数23
- ありがとう数29
- みんなの回答 （23）
- 専門家の回答
みんなの回答
- dell_OK
- ベストアンサー率13% (740/5646)
確認画面と結果画面の表示内容が同じなら、 ＳＴＥＰを完了にして、ボタンを非表示にする方法もあります。 要素を生成する必要もないのでコードもすっきりします。 －－－－ const confirm_button_click = function() { const formData = new FormData(); formData.append("action", "bbs_quest_confirm"); const opt = { method: "post", body: formData } fetch("<?php echo home_url('wp-admin/admin-ajax.php'); ?>", opt) .then(response => { return response.json(); }) .then(json => { if (json.error != "") { alert(json.error); return; } change3(); const buttons = document.querySelectorAll('.post-button'); buttons.forEach(x => x.style.display = "none"); }) .catch(error => { console.log(error); }); } －－－－
- dell_OK
- ベストアンサー率13% (740/5646)
以下のコードがなくなっています。 どのタイミングでなくなったのかわかりませんが、 適切な箇所にこれが複数必要ですし、 result_area.appendChild(～); // result_area の末尾に div を追加 これが最後に必要です。 confirm_area.style.display = "none";
お礼
こちらが最新の質問になります。 質問の回答期限が切れてしまい、下記リンクからアドバイスよろしくお願い致します。 https://okwave.jp/qa/q10255357.html
補足
回答ありがとうございます、bbs_quest_input.phpの600,601行目にアドバイス頂いたコードを追加してみたのですが画面が進行せず原因が分からない状態です… result_area.appendChild(～);はボタンがないため1か所のみ追加しております。 1点お聞きしたいのですが確認画面でconst 宣言を行ったものは完了画面では宣言する必要はないのでしょうか？ ※最新コード https://wandbox.org/permlink/SA4VNHu1aOPQKV3q
- dell_OK
- ベストアンサー率13% (740/5646)
とはいっても、画像は関係ないかもしれないですね。 よくみたら </script>のところでもエラーになっているような感じです。
- dell_OK
- ベストアンサー率13% (740/5646)
開発モードでみていただけましたか。 ほかに、 https://www.gsdfgsdgs.cfbx.jp/wp-content/uploads/2022/07/1-19.jpg がないようです。
補足
アドバイスありがとうございます、修正いたしました。
- dell_OK
- ベストアンサー率13% (740/5646)
・エラーを取得する必要があると思われるのですが、どこから取得すればいいのでしょうか？ 開発モードで見てください。 ここでエラーになっているようです。 step03.pngの画像ファイルがないか、ＵＲＬが間違っているかだと思います。 －－－－ step_img.src = "http://www.irasuto.cfbx.jp/wp-content/themes/sample_theme/images/step03.png"; －－－－
補足
アドバイスありがとうございます。 仮の画像を設定してみたのですが、結果画面へ進むボタンが機能せず別の箇所に問題があるようです… ※該当ページ https://www.irasuto.cfbx.jp/%e8%b3%aa%e5%95%8f%e6%8e%b2%e7%a4%ba%e6%9d%bf/
- dell_OK
- ベストアンサー率13% (740/5646)
・原因を調べるためにエラーを表示したいのですが functions.php の169行目のコードをどのように変更すれば良いでしょうか？ 試していませんが、$wpdb->last_errorを追加してみてください。 －－－－変更前 $result['error'] = '登録できませんでした'; －－－－変更後 $result['error'] = '登録できませんでした'.$wpdb->last_error; －－－－
補足
アドバイスありがとうございます、追加したところ question と title のカラムがないとエラーが表示されたため追加してみたのですが、結果画面へ進むボタンを押しても止まったままで何か問題が生じているようです。 エラーを取得する必要があると思われるのですが、どこから取得すればいいのでしょうか？ ※最新コード https://wandbox.org/permlink/0oHYtr0tTnKi3MNZ ※該当ページ https://www.irasuto.cfbx.jp/%e8%b3%aa%e5%95%8f%e6%8e%b2%e7%a4%ba%e6%9d%bf/
- dell_OK
- ベストアンサー率13% (740/5646)
・何か原因として考えられるコードはありますでしょうか？ 試していませんが、こうだと思います。 －－－－変更前 divBodyPartialParts.fontSize = "150%"; －－－－変更後 divBodyPartialParts.style.fontSize = "150%"; －－－－
補足
訂正ありがとうございます。修正したところCSSを設定することが出来ました。
- dell_OK
- ベストアンサー率13% (740/5646)
間違えて投稿してしまいました。 どこで設定しているかはわかりましたが、 消えることなく表示されているように見えます。
補足
回答ありがとうございます。タイトルではCSSは設定できるのですが、コメントでCSSを書いた際に文字の大きさの指定コードのみ消えていて原因が分からず困っております… .board_form_partial div#confirm_area .body-partial-parts { background-color: #FCF2F4; border: 2px solid #F7859C; /* margin: 5px 0 20px 5px; */ /* padding: 10px; */ width: 98%; font-weight: 700; letter-spacing: 0.1em; }
- dell_OK
- ベストアンサー率13% (740/5646)
・何故文字の大きさのみCSSが消えてしまうのか原因は分かりますでしょうか？ 文字の大きさをどこで指定しているのかわかりません。
お礼
こちらが最新の質問になります。 確認画面のコメントの文字の大きさを Javascript で調整できるのではないかと思いコードを書いてみたのですが反映されず、何か原因として考えられるコードはありますでしょうか？ ※最新コード（bbs_quest_input.phpの430行目に追加いたしました） https://wandbox.org/permlink/QEXufhK1NRoercLJ 上記とは別にお聞きしたいことがあるのですが、結果画面へ進むボタンを押したところ登録できませんでしたとダイアログに表示されてしまい結果画面を表示することができませんでした。 原因を調べるためにエラーを表示したいのですが functions.php の169行目のコードをどのように変更すれば良いでしょうか？
補足
回答ありがとうございます、説明不足で申し訳ありません。 bbs_quest_input.phpの494行目のコードで指定している CSSとHTMLは下記になります。 /* 雑談掲示板 確認画面コメント定義 */ .board_form_partial div#confirm_area .body-partial-parts { background-color: #FCF2F4; border: 2px solid #F7859C; /* margin: 5px 0 20px 5px; */ /* padding: 10px; */ width: 98%; font-size: 150%; font-weight: 700; letter-spacing: 0.1em; } <div> <div class="body-partial-parts"><p>コメントテストコメントテストコメントテストコメントテスコメントテストコメントテストコメントテストコメントテストコメントテストコメントテストコメントテストコメントテストトコメントテストコメコメントテストコメントテストコメントテストコメントテストコメントテストコメントテストコメントテストコメントテストコメントテストントテスコメントテストコメントテストコメントテストコメントテストコメントテストコメントテストコメントテストコメントテストコメントテコメントテストコメントテストコメントテストコメントテストコメントテストコメントテストコメントテストコメントテスコメントテストコメントテストコメントテストコメントテストコメントテストコメントテストコメントテストコメントテストコメントテストトコメントテストストトコメントテストコメントテストコメントテストコメントテストコメントテストコメントテストコメントテスコメントテストコメントテストコメントテストコメントテストコメントテストコメントテストコメントテストコメントテストコメントテストトコメントテストコメコメントテストコメントテストコメントテストコメントテストコ</p> </div> <div class="title-partial-parts"><p>タイトルテストタイトルテストタイトルテストタイトルテストタイトルテストタイトルテストタイトルテストタ</p> </div>
- dell_OK
- ベストアンサー率13% (740/5646)
・何故 Array.from(divImagePartial.children).forEach(x => x.style.float = "left"); は子要素を取得しているのでしょうか？ その子要素とは、ここで用意されている divImageCameraIcon です。 －－－－ const divImagePartial = document.createElement("div"); // div (子)を生成 （省略） for (let i = 0; i < blobType.length; i++) { （省略） const divImageCameraIcon = document.createElement("div"); // div (孫)を生成 divImageCameraIcon.classList.add("image-camera-icon"); // classの追加 divImageCameraIcon.appendChild(changeImg); // image_camera_icon (子要素) の末尾に changeImg を追加 divImagePartial.appendChild(divImageCameraIcon); // image_partial (親要素) の末尾に image_camera_icon を追加 （省略） } （省略） if (image_count == 3) { Array.from(divImagePartial.children).forEach(x => x.style.float = "left"); －－－－ divImageCameraIcon はこのfor()ループ内で定義した定数のためループの外では使えません。 そのため、ループの外で定義した親要素 divImagePartial から、子要素を取得して処理しています。
お礼
回答が遅くなり申し訳ありません。 確認画面のメッセージの文字の大きさをCSSで指定したのですが、CSSが消えてしまいます。 何故文字の大きさのみCSSが消えてしまうのか原因は分かりますでしょうか？ ※最新コード https://wandbox.org/permlink/CPSltlejs5huZ47M ※該当ページ https://www.irasuto.cfbx.jp/%e8%b3%aa%e5%95%8f%e6%8e%b2%e7%a4%ba%e6%9d%bf/
補足
Q.divImageCameraIcon はこのfor()ループ内で定義した定数のためループの外では使えません。 そのため、ループの外で定義した親要素 divImagePartial から、子要素を取得して処理しています。 A.解説ありがとうございます、for()ループ内で定義しているからなのですね。 勉強になりました覚えておきます。
関連するQ&A
- WordPressの質問（q10217484）の続
アップロードされたカメラ画像を非表示にするコードを追加したのですが、表示するためのURLを追加するコードが抜けており追加いたしました。 上記とは別にアップロードされたファイルをエンコードするコードも抜けているのではないかと思っております。 旧コードでは対象ファイルではない場合にアラートで警告ダイアログを表示するコードとは別にエンコードするコードがあるため最新コードにも追加すべきではないかと考えております… 下記のコードは追加すべきでしょうか？（single-input.php の15行目から38行目まで） $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; } } } ※最新コード https://wandbox.org/permlink/my2wffcXlhMQZFvW ※旧コード https://wandbox.org/permlink/cfzsJgBFcYrcIDI1
- ベストアンサー
- PHP
- 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
- ベストアンサー
- PHP
- WordPressの質問（q10187929）の続
blob を使いファイルアップロード機能を考えてみたのですが、画像と動画をどのように識別させるのかが分かりませんでした。 データ URI 形式で表示する方法と、Blob URL で表示する方法の2種類があるようです。 Data URI で動画を表示する方法は対応ブラウザの関係で避けた方が良いと思っております。 アドバイスお願い致します。 ※blob.php にコードを追加いたしました。 ※最新コード https://wandbox.org/permlink/PSXWslcYugaPqtjK ※参考サイト https://mixltd.jp/blog/how_to_make_thumbnail_from_input_video/ https://lab.syncer.jp/Web/JavaScript/Snippet/17/ https://qiita.com/azu369yu/items/8998e1e1536a5acfb7b3
- ベストアンサー
- PHP
- WordPressの質問（q10245849）の続
回答が遅れてしまい申し訳ありません、こちらが最新の質問になります。 質問入力画面に画像をアップロードした場合と動画をアップロードした場合で大きさが変わってしまうのですが、統一することは可能でしょうか？ こちらは以前 dell_ok さんにお聞きした覚えがあり難しいとアドバイスを頂いた記憶があるのですが… 質問入力画面にファイルをアップロードする場合クリックして選択する方法だけでなくドラッグ＆ドロップも追加することは可能でしょうか？ ※最新コード https://wandbox.org/permlink/IM6IiiwxaS6eXwXY
- 受付中
- PHP
- WordPressの質問（q10135525）の続
名前に50文字で文字数制限を設けたいのですが、メッセージの500文字の文字数制限のコードとまとめるべきでしょうか？ ※現在のデザイン http://www.irasuto.cfbx.jp/%e6%8e%b2%e7%a4%ba%e6%9d%bf%e3%83%86%e3%82%b9%e3%83%88/ ※現在のコード https://wandbox.org/permlink/9nnn2wsXBXo9CgdG ※single-index.php const NAME_MAX_LENGTH = 50; ※single-input.php <div id="name_partial"></div> <script> const name_partial = document.getElementById('name_partial'); name.addEventListener('input', contactForm); contactForm(); function contactForm() { const contactsignature = <?php echo NAME_MAX_LENGTH; ?> ; const input = contactsignature - name.value.length; if (input >= 0) { name.innerHTML = 'あと<strong>' + input + '</strong>文字'; submit_button.disabled = name.value.length === 0; } else { name.innerHTML = '<strong class="err">' + -input + '</strong>文字超過しています'; submit_button.disabled = true; } } </script>
- ベストアンサー
- PHP
- WordPressの質問（q10044117）の続
タイトルから表示されていない状態ですが、先にページナビの修正から行うのでしょうか？ ※現在表示されている記事 https://imgur.com/IupD3AB.jpg ※現在のコード https://wandbox.org/permlink/VReuDuARbgCZ1OJM ※確認の際に使用したコード SELECT distinct post.* FROM wp_posts AS post INNER JOIN wp_postmeta AS meta ON post.ID = meta.post_id WHERE meta.meta_key = 'single_rss_feed1' AND post.post_type = 'post' AND post.post_status = 'publish' AND (post.post_title LIKE '%イ%') ORDER BY post.post_date DESC
- ベストアンサー
- PHP
- WordPressの質問（q10155839）の続
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>'; } －－－－ 昨日教えて頂いた質問掲示板 登録結果画面のタイトルから飛べるページをリンク先として考えておりました。 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/
- ベストアンサー
- PHP
- WordPressの質問（q10197680）の続
DOM-based XSS に関するコードについて考えているのですが、関数の「巻き上げ」が可読性と保守性を損なうようで funcion について修正すべきか考えております。 関数宣言を関数式にして const 変数に代入する方法で修正してみたのですが問題はなさそうでしょうか？ 57、62、109、212行目を変更いたしました。 ※関数宣言での巻き上げについて https://qiita.com/kerupani129/items/b2c3619856b048c13394 ※DOM-based XSSのシンクとして働く機能 https://gihyo.jp/dev/serial/01/javascript-security/0006 ※以前アドバイス頂いたコード ※元のコード function lengthCheck() { const left = this.dataset.maxlength - this.value.length; if (left >= 0) { this.nextElementSibling.innerHTML = 'あと<strong>' + left + '</strong>文字'; this.dataset.submit_disabled = this.value.length === 0; } else { this.nextElementSibling.innerHTML = '<strong>' + -left + '</strong>文字超過しています'; this.dataset.submit_disabled = true; } ↓ ※エスケープ処理 function escapeHTML(値) { _ var a = document.createElement('span'); _ a.textContent = 値; _ return a.innerHTML; } 要素.innerHTML = '<strong>' + escapeHTML(文字列) + '</strong>'; ※最新コード https://wandbox.org/permlink/ozofFRK7rkjCXV76
- ベストアンサー
- JavaScript
- WordPressの質問（q10054200）の続
display.phpでコメントにハートマークをつけていいねボタンをカウントを実装したいのですが、Font Awesomeとカウントアップを結びつける構造が分かりませんでした。アドバイスお願い致します。 functions.phpにfunction set_post_views_days()と3,7日間のカウンターをまとめているのですが、そちらと合体させたほうがいいでしょうか？ 別に実装すべきでしょうか？毎回関係のないコメントのグッドカウントを読み込むのか、別途関数を作成して読み込ませるどちらが負担が軽いのか悩んでいます。 ※カスタムフィールド(view_good_count）でカウント function view_good_btn() { global $cat; $sql = " SELECT c.*, cc.*, vv.meta_value AS good_count FROM wp_commentmeta AS c INNER JOIN wp_comments AS cc ON c.comment_ID = cc.comment_ID WHERE meta_key = 'view_good_count' AND meta_value != 0 ORDER BY vv.meta_value DESC "; $query = $wpdb->prepare($sql); $commentmeta = $wpdb->get_results($query); foreach ($commentmeta as $comment) { $url = get_term_link($comment); <a href=\"{$url}\" width: 97px;height: 130px;> <div class=\"btn-good-wrap\">{$commentmeta->button}</div> </a> <div class=\"container\"> </div> "; } ※Font Awesomeのハートマーク <i class="fa fa-heart" aria-hidden="true"></i> ※ボタンカウントで悩んでいるコード https://wandbox.org/permlink/7AQ5Sunt8Ok2NQhE
- ベストアンサー
- PHP
- WordPressの質問（q10124692）の続
https://wandbox.org/permlink/xgiSHSJPTNlBrtmO $mime_type から $ext を決めて、テンポラリファイルを $data に読み込めばPDFと動画にも適応できるようです。間違えていたらアドバイスお願い致します。 以前dell_okさんにバイナリーデータがどうしても必要だとお伝えしていたのですが、finfo_open（finfoクラス）はmime_typeを返すのに、拡張子では判断せずバイナリを読み込んでチェックするのでバイナリーのチェックは要らないようですね、申し訳ありません。 名前とメッセージはエラーチェックやtokenがあるためdell_okさんから教えて頂いたコードを使うように考えています。 アップロードファイルについてはおそらくこちらのコードを使うか参考に組み替える必要があると考えております。 //mime_typeを返すのに、拡張子では判断せずバイナリを読み込んでチェック //ファイルの種類を表示するために宣言 $finfo = new finfo(FILEINFO_MIME_TYPE); $mime_type = $finfo->file($path); if (FILE_EXT_PNG == $ext && 'image/png' == $mime_type) { } elseif (in_array($ext, [FILE_EXT_JPEG, '.jpg']) && 'image/jpeg' == $mime_type) { $ext = FILE_EXT_JPEG; } else { // バイナリー文字列確認 $contents = file_get_contents($path); if (FILE_EXT_PDF == $ext && 'application/pdf' == $mime_type) { } elseif (FILE_EXT_MP4 == $ext && 'video/mp4' == $mime_type) { } else { $ext = null; } } return $ext; if (isset($ext)) { $_SESSION['attach_name'][$key] = md5($data) . $ext; $_SESSION['attach_data'][$key] = $data; $_SESSION['attach_mime'][$key] = $mime_type; } else $err[] = '画像形式は png, jpg のみです。'; } } }
- ベストアンサー
- PHP
お礼
回答が遅れてしまい申し訳ありません、こちらが最新の質問になります。 質問入力画面に画像をアップロードした場合と動画をアップロードした場合で大きさが変わってしまうのですが、統一することは可能でしょうか？ こちらは以前 dell_ok さんにお聞きした覚えがあり難しいとアドバイスを頂いた記憶があるのですが… 質問入力画面にファイルをアップロードする場合クリックして選択する方法だけでなくドラッグ＆ドロップも追加することは可能でしょうか？ ※最新コード https://wandbox.org/permlink/IM6IiiwxaS6eXwXY
補足
アドバイスありがとうございます、この方法が良さそうですね。 完了画面はこれで完成ということで、質問一覧表示画面と回答者が見るページを作成する予定です。