WordPressの質問（q10306916）の続

質問

質問画面の確認画面のCSS をチェックしているのですが、確認画面の title-partial-parts にのみ margin-top: 25px; を適応させる方法が分かりません。
質問画面は div id="input_area" 回答画面は div id="confirm_area" を親クラスとして CSS を分けたい場合、どのように書けばよいか分かりますでしょうか？
下記コードで試してみたのですが効かず悩んでおります…

div#confirm_area.text-partial-parts {
margin - top: 25px;
}

※ 最新コード
https://github.com/i6Grja3R/sample_theme.git

回答No.11

dell_OK

・質問一覧画面を修正してみたのですが、クリックしても記事が表示されず回答画面にも表示されませんでした。

URLが「質問みる」のままですね。
GitHubにsingle-que_list.phpを追加されたようですが、
私が持っているファイルはbbs_que_list.phpです。
WordPressの設定で質問一覧画面がどのファイルなのか確認してみてください。

・php echo にして echo '</div>'; で締めるべきか、<?php echo '</div>'; ?> のままいくのか悩んでおります。

どちらもPHP出力なので同じことだと思いますが、

HTML出力で書くか、
</div>
PHP出力で書くか、
<?php echo '</div>'; ?>
ということでしょうか。

補足

Q.URLが「質問みる」のままですね。
GitHubにsingle-que_list.phpを追加されたようですが、
私が持っているファイルはbbs_que_list.phpです。
WordPressの設定で質問一覧画面がどのファイルなのか確認してみてください。

A.回答ありがとうございます、原因を調べて functions.php を修正したところ質問一覧画面から回答画面へのアクセスは成功いたしました。
$result['items'][] = ['title' => $row->title, 'img1' => $url, 'type' => $type, 'url' => home_url('質問回答画面?' . $row->unique_id)];

回答画面では変わらず何も表示されず原因となりそうな $query = $wpdb->prepare($sql, $unique_id); コードを var_dump($unique_id); と var_dump($sql); で調べてみたのですが、どちらも値が返ってきておりどのコードに問題があるのか分かりません…
アドバイスお願い致します。

Q.HTML出力で書くか、
</div>
PHP出力で書くか、
<?php echo '</div>'; ?>
ということでしょうか。

A.回答ありがとうございます。
回答画面全体を外枠で囲う際に質問内容を PHP 出力で書いて、回答機能を HTML 出力で書く方法かどちらも PHP echo で書く方法どちらがよいか悩んでおります。
これから返信機能を書いていく際の方針にも関係するのでアドバイス頂きたいです。

※ 最新コード
https://github.com/i6Grja3R/sample_theme.git

※ 質問一覧表示画面
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/

※ 質問回答画面
http://www.irasuto.cfbx.jp/%e8%b3%aa%e5%95%8f%e5%9b%9e%e7%ad%94%e7%94%bb%e9%9d%a2/

回答No.10

dell_OK

・unique_id のデータは存在するようで何が原因か分かりません

質問一覧画面はこちらでよかったでしょうか。
https://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/

子供二人の写真をクリックしてみましょう。
遷移先のＵＲＬにデータベースに登録されているunique_idは含まれています。
https://www.irasuto.cfbx.jp/%E8%B3%AA%E5%95%8F%E3%81%BF%E3%82%8B?b0412a83-70f2-11ef-a17b-e4434ba51b4c
（https://www.irasuto.cfbx.jp/質問みる?b0412a83-70f2-11ef-a17b-e4434ba51b4c）

質問者さまが回答画面はこちらでしょうか。
https://www.irasuto.cfbx.jp/%e8%b3%aa%e5%95%8f%e5%9b%9e%e7%ad%94%e7%94%bb%e9%9d%a2/
（https://www.irasuto.cfbx.jp/質問回答画面/）
ＵＲＬにはunique_idが含まれていません。

質問一覧画面からの遷移先のＵＲＬが「質問みる」と「質問回答画面」で違うようです。
質問一覧画面の遷移先ＵＲＬのところを変更してみてください。
－－－－変更前
<a href="'.home_url('質問みる?'.$row->unique_id).'">
－－－－変更後
<a href="'.home_url('質問回答画面?'.$row->unique_id).'">
－－－－

ＵＲＬがこうなると画像などが表示されてきます。
https://www.irasuto.cfbx.jp/%E8%B3%AA%E5%95%8F%E5%9B%9E%E7%AD%94%E7%94%BB%E9%9D%A2/?b0412a83-70f2-11ef-a17b-e4434ba51b4c
（https://www.irasuto.cfbx.jp/質問回答画面?b0412a83-70f2-11ef-a17b-e4434ba51b4c）

補足

回答ありがとうございます。
質問一覧画面を修正してみたのですが、クリックしても記事が表示されず回答画面にも表示されませんでした。
dell_ok さんに教えて頂いた URL では表示されているのですが…
https://www.irasuto.cfbx.jp/%E8%B3%AA%E5%95%8F%E5%9B%9E%E7%AD%94%E7%94%BB%E9%9D%A2/?b0412a83-70f2-11ef-a17b-e4434ba51b4c

※ 最新コード
https://github.com/i6Grja3R/sample_theme.git

回答No.9

dell_OK

・$unique_id = substr($_SERVER['REQUEST_URI'], -36); の36はどのような意味があるのでしょうか？

36ではなく-36です。
https://www.php.net/manual/ja/function.substr.php
「offset が負の場合」をご覧ください。

・両方に width; height; を書いてよいものか悩んでおります。

heightだけのものや、widthだけのもので試してみると、
違いがわかると思います。

・div class="quest_container を外枠で囲いたいわけではなく

「なぜquest_containerには外枠が付かないのかと言うと、」の文言がよくなかったですね。
私が伝えたかったのは、IDとクラスの使い分けです。

ここにはクラスquest_containerを書かれています。
echo '<div class="quest_container">';

ですが、スタイルシートのセレクタ#quest_containerは#なのでIDとみなされます。
そのためクラスquest_containerには反映されません。
/* 雑談掲示板 回答画面全体の配置位置 */
div#quest_container {

反映されないので「外枠が付かない」と言ったのです。

div#quest_container {を
div#main_container {に変えてそれは解決しました。

ですが、#quest_containerが残っていますので.にしておいてくださいね。
－－－－
/* 雑談掲示板 回答画面タイトル装飾 */
div#quest_container .quest_header_title {
/* 雑談掲示板 回答画面スタンプ配置位置 */
div#quest_container .quest_usericon_img {
－－－－
div.quest_container .quest_header_title {
div.quest_container .quest_usericon_img {
－－－－

・HTML クラスのみ id になることが多かったので真似てみたのですが

それで上記のような間違いが起こり、余計な説明をしてしまったようです。

・クラスの方が後々を考えると良さそうでしょうか…？

使い分けができていればどちらでもいいと思いますが、
参考にされたサイトでの１番目のidはスタイルのためではない使い方がされていなかったでしょうか。

私は、個人的にですが、
JavaScriptでページにただひとつの要素を取得するgetElementById()のためにidを使い、
スタイルのためにはclassを使っています。
目的を区別して使い分けるルールにしています。
なので、どちらも使う場合は、それぞれ書きます。
<div id="main_container_id" class="main_container_class">
そのためCSSのセレクタでは#を使うことはありません。

「css id class 一般的」で検索するとAIが見つけてきた情報がこちらです。
https://dezasuta.com/columns/id-class/#:~:text=1.%20CSS%E3%81%A7%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B,%E4%BD%BF%E3%81%A3%E3%81%A6%E8%89%AF%E3%81%84%E3%81%A7%E3%81%97%E3%82%87%E3%81%86%E3%80%82
このサイトでもclassをすすめていらっしゃいますね。

質問者さまが納得されれば、
ご自分のルールにされることで今後悩むこともなくなるかと思います。
echo '<div class="main_container">';

<?php echo '</div>'; ?>についてはまた後日。

補足

Q.36ではなく-36です。
https://www.php.net/manual/ja/function.substr.php
「offset が負の場合」をご覧ください。

A.回答ありがとうございます、unique_id の後ろから数えて 36番目から始まる文字列を取得してそのIDを条件にしたということで理解致しました。
実行してみたのですが何も表示されず var_dump($sql); で確認したところ string(43) "SELECT * FROM sortable WHERE unique_id = %s" array(0) { } と表示されております。
unique_id のデータは存在するようで何が原因か分かりません… アドバイスお願い致します。

※ 現在のデータベース
https://imgur.com/ar5oULu.png

Q.両方に width; height; を書いてよいものか悩んでおります。

A.質問画面と回答画面でCSSを分けていることに気が付きました。

Q.私が伝えたかったのは、IDとクラスの使い分けです。

ここにはクラスquest_containerを書かれています。
echo '<div class="quest_container">';

ですが、スタイルシートのセレクタ#quest_containerは#なのでIDとみなされます。
そのためクラスquest_containerには反映されません。
反映されないので「外枠が付かない」と言ったのです。

A.回答ありがとうございます。
そういうことだったんですね勘違いしておりました、.quest_container に修正し忘れておりました申し訳ありません。

Q.使い分けができていればどちらでもいいと思いますが、
参考にされたサイトでの１番目のidはスタイルのためではない使い方がされていなかったでしょうか。

私は、個人的にですが、
JavaScriptでページにただひとつの要素を取得するgetElementById()のためにidを使い、
スタイルのためにはclassを使っています。
目的を区別して使い分けるルールにしています。
なので、どちらも使う場合は、それぞれ書きます。
<div id="main_container_id" class="main_container_class">
そのためCSSのセレクタでは#を使うことはありません。

A.アドバイスありがとうございます、goo 質問を確認してみたところ全体の間隔のみ指定されているようです。
dell_ok さんがおっしゃる通りスタイルのためには class を使う方が良さそうです。
AI の回答も参考にさせて頂きます。

※ 最新コード
https://github.com/i6Grja3R/sample_theme.git

回答No.8

dell_OK

・1,回答画面全体を質問画面と同じく外枠で囲いたいが、質問内容と回答機能で離れて php を書いているため修正が必要。

コミットupdate75でquest_containerとmain_containerが入れ変わったようですが、
外側がmain_containerなので、スタイルシートのIDを変更してみてください。
/* 雑談掲示板 回答画面全体の配置位置 */
div#main_container {
width: 1140px;
margin: 0 auto 50px;
padding: 23px 23px 23px 23px;
background-color: #fff;
border: 2px solid #999;
overflow: hidden;
clear: both;
}

なぜquest_containerには外枠が付かないのかと言うと、
quest_containerはクラスです。
echo '<div id="main_container">';
echo '<div class="quest_container">';

クラスは#ではなく.で書いてください。
div.quest_container {
width: 1140px;
margin: 0 auto 50px;
padding: 23px 23px 23px 23px;
background-color: #fff;
border: 2px solid #999;
overflow: hidden;
clear: both;
}

どちらかというとmain_containerもクラスにした方がいいような気はします。

補足

Q.どちらかというとmain_containerもクラスにした方がいいような気はします。

A.アドバイスありがとうございます、説明が不足しておりました申し訳ありません…
div class="quest_container を外枠で囲いたいわけではなく、これから作成していく回答返信機能も含めて全体を囲いたいです。
外枠の事を考慮せずに進めていたので回答機能は HTML で書いているのですが、php echo にして echo '</div>'; で締めるべきか、dell_ok さんに考えて頂いた <?php echo '</div>'; ?> のままいくのか悩んでおります。
どちらが良いと思われますでしょうか？（bbs_que_answer.phpに現在のコードをsample.phpにechoでまとめたものを書きました）
クラス名を goo 質問やテラテイルを参考にしておりまして、1番初めの HTML クラスのみ id になることが多かったので真似てみたのですが、クラスの方が後々を考えると良さそうでしょうか…？

回答No.7を読み返してみて勘違いに気がつきました申し訳ないです。
質問画面のCSSと回答画面のCSSで区別するためにクラス名を付け加えたんですね。

※ 最新コード
https://github.com/i6Grja3R/sample_theme.git

回答No.7

dell_OK

・2,タイトルの次に表示したいスタンプ画像の高さが height で調節できない。

そうですね。
この高さはここで設定されていて、対象の要素はlabelです。
/* 雑談掲示板 入力画面スタンプ画像デザイン */
input[type=radio]+label:before {
content: "";
display: inline-block;
background-color: rgba(0,0,0,0.4);
background-size: contain;
background-repeat: no-repeat;
/* margin-top: 25px; */
width: 80px;
height: 80px;
}

回答画面のスタンプの場合はこれを上書きするようにしてみましょう。

labeにクラスquest_stamp_labelを追加します。
echo '<div class="quest_usericon_img"><input type="radio" name="stamp" value="' . $row->stamp . '" id="stamp"><label for="stamp" class="quest_stamp_label"></label></div>'; // スタンプ画像

style.cssにクラスquest_stamp_labelのスタイルを追加します。
input[type=radio]+label.quest_stamp_label:before {
width: 20px;
height: 20px;
}

補足

Q.labeにクラスquest_stamp_labelを追加します。
echo '<div class="quest_usericon_img"><input type="radio" name="stamp" value="' . $row->stamp . '" id="stamp"><label for="stamp" class="quest_stamp_label"></label></div>'; // スタンプ画像

style.cssにクラスquest_stamp_labelのスタイルを追加します。
input[type=radio]+label.quest_stamp_label:before {
width: 20px;
height: 20px;
}

A.解説ありがとうございます。
クラスを追加した意図が分からないので憶測になるのですが、input[type=radio]+label:before は要素の大きさを調整する際に使用して、quest_stamp_label は高さを調整する際に使うという事でしょうか？
両方に width; height; を書いてよいものか悩んでおります。

回答No.6

dell_OK

・3,アップロードファイルを質問画面と同様に画像の数で並び方を変化させたい。

画像表示のためにこの配列を使っていますね。
$views = []; //ＨＴＭＬをため込む配列の初期化する

画像の数はこの配列の要素数でわかります。
$count = count($views);

HTMLを生成しているところで、
$countの値を判断してスタイルを調整してみてください。

補足

回答ありがとうございます。
旧コードだと ++$image_count; で別途カウントしていたようですが、$views から直接カウントすることも可能なのですね勉強になりました。
1～4までの問題を修正したコードを最後に載せさせて頂きます。

回答No.5

dell_OK

・4,質問内容が foreach を使うことにより繰り返し表示されている可能性がある。

そうですね。
問題はここです。
$sql = 'SELECT * FROM sortable';
$query = $wpdb->prepare($sql);
このSQL文には条件がないためsortableの全レコードを取得しています。
いまはすべての質問が表示されているのではないでしょうか。

回答画面では対象の質問のみを表示するために条件が必要です。
URLから対象となる質問のIDを取得して、そのIDを条件にしましょう。
$unique_id = substr($_SERVER['REQUEST_URI'], -36);
$sql = 'SELECT * FROM sortable WHERE unique_id = %s';
$query = $wpdb->prepare($sql, $unique_id);
これで取得するレコードは１件になり繰り返し表示されなくなります。

ですが、回答画面には対象の質問だけではなく、
その質問に対してすでに投稿されている回答も表示しますよね。
それらを表示するためにforeachで繰り返し表示する処理は必要になってきます。
そのためのSQLや表示処理は複雑になりますが、それをされるときに考えていきましょう。

補足

A.回答ありがとうございます、データベースでの出力には全く気が付きませんでした。
全レコードを取得になっていたんですねそちらから見るべきでした申し訳ありません。
$unique_id = substr($_SERVER['REQUEST_URI'], -36); の36はどのような意味があるのでしょうか？
REQUEST_URI で現在の URL を取得可能なことは分かったですが…

回答No.4

dell_OK

・アイコン画像をアップロードした後に画像の大きさを指定した際に右上に意図せず移動してしまいます。

タイトルに付いている回り込みのせいではないでしょうか。
.board_form_partial div#confirm_area .title-partial-parts p {
float: left;

お礼

こちらが最新の質問になります。
現在回答画面の CSS を書いていて、4つほど問題が生じており解決策を考えています。
sample.php に修正コードを書いてみました。

1,回答画面全体を質問画面と同じく外枠で囲いたいが、質問内容と回答機能で離れて php を書いているため修正が必要。
2,タイトルの次に表示したいスタンプ画像の高さが height で調節できない。
3,アップロードファイルを質問画面と同様に画像の数で並び方を変化させたい。
4,質問内容が foreach を使うことにより繰り返し表示されている可能性がある。

1の問題についてですが、質問内容と回答機能と返信機能までの全ての php コードを echo で出力すれば可能ではないかと思いました。
Javascript コードもこれから増えるため負荷がかかりそうで別の方法で軽くすることが出来るのか dell_ok さんにお聞きしたいです。

2の高さに関しては質問画面と同じように CSS でタイトルとスタンプ画像を並べる際両方に display: inline-block; を書いて、そこからスタンプ画像を height で調節する方法を考えました。
ファイルの大きさにも用いる height では駄目だったので、margin top を指定してみたのですが効果がなくアドバイスお願い致します。

3は質問画面の際にアドバイス頂いたものと同じ内容になります。回答画面では CSS をアップロードファイルの数に応じて変化させるコードがなく、旧コードを参考に書いてみました。
間違っている部分はありますでしょうか？

※ 旧コード
https://wandbox.org/permlink/7oZ3JE784sojoLG4

4の問題に関して回答画面全体を外枠で囲っている際に気が付いたのですが、foreach ($rows as $row) を表示部分まで囲っている事が原因ではないかと考えております。
後文で $row の中身が必要だと思い下記コードを追加しました。
アドバイスお願い致します。

//データベースからタイトルを取得
$title = $row["title"];
//データベースからスタンプ画像を取得
$stamp = $row["stamp"];
//データベースからコメントを取得
$text = $row["text"];
//データベースからコメントを取得
$name = $row["name"];

※ 質問内容
https://imgur.com/AikMjPg.png

※ 最新コード
https://github.com/i6Grja3R/sample_theme.git

補足

回答ありがとうございます、修正したところ上手くいき助かりました。

回答No.3

dell_OK

・アイコン画像なしでダミー画像を表示させた時にエラーとなってしまいます。

原因はここです。
usericonImg.src = "<?php echo $noimage_url; ?>";
共通化で引っ越したコードにPHPコードが含まれていました。

JavaScriptのスクリプトファイルにはPHPコードは書けません。
対応方法としては以下のふたつ。
noimage.pngへのURLを絶対パスまたは相対パスを直接書く方法
PHP変数$noimage_urlの値をJavaScriptに渡す方法

パスを直接書く方法は、
ローカルでも実行できることを考え、
相対パスがいいと思います。
これは私の環境で動作した相対パスです。
usericonImg.src = "../wp-content/uploads/noimage.png";
質問者さまのローカル環境とレンタルサーバー環境で動作するか確認してください。
パスが通らない場合は先頭の ../ をいくつ書くかで調整してください。
修正が簡単なのはこちらの方法です。

次にPHP変数の値をJavaScriptに渡す方法です。
ひと手間必要ですが他の場合に使うことがあるかもしれませんので、
方法として知っておくために試してみてください。
bbs_quest_input.phpでJavaScript変数にPHPコードを使って値を代入します。
<script>のすぐ下がいいと思います。
<script>
const usericonImgUrl = "<?php echo $noimage_url; ?>";
response.jsではこのJavaScript変数を使って画像のURLを代入します。
usericonImg.src = usericonImgUrl;

私の環境ではどちらも試して動作確認しました。

補足

A.修正ありがとうございます、どちらの方法も動作いたしました。
JavaScript変数にPHPコードを使って値を代入することは出来るのですね初めて知りました。
以後使う気がしますので覚えておきます。
回答画面の CSS を修正後に回答表示機能を作成していきます。

※ 最新コード
https://github.com/i6Grja3R/sample_theme.git

回答No.2

dell_OK

・確認画面でも可能ではないかと思いました…

確認画面の生成でchangeImgのクラス名がいくつあるかでそれらしい処理があるのですでにされていると思います。
－－－－
const image_count = image_area.getElementsByClassName("changeImg").length;
if (image_count == 1) {
divImagePartial.style.float = "left";
} else if (image_count == 2) {
divImagePartial.style.float = "left";
divBodyPartialParts.style.height = "728px"; // コメント欄外枠
} else if (image_count == 3) {
Array.from(divImagePartial.children).forEach(x => x.style.float = "left"); // divImagePartial の子要素を取得する、与えられた関数を配列の各要素に対して一度ずつ実行
}
－－－－

お礼

こちらが最新の質問になります。
質問画面で２点分からないところがありアドバイスお願い致します。
１点目はアイコン画像なしでダミー画像を表示させた時にエラーとなってしまいます。
ディレクトリには設置済みだと思うのですが、原因は分かりますでしょうか？

※ 設置階層
public_html/wp-content/uploads/noimage.png

２点目はアイコン画像をアップロードした後に画像の大きさを指定した際に右上に意図せず移動してしまいます。
<div class="name-partial-parts"></div> に問題が生じている気がするのですが、解決策が分からず悩んでおります。

※ 最新コード
https://github.com/i6Grja3R/sample_theme.git

補足

回答ありがとうございます、確認したところ適応されておりました申し訳ありません。