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.21

dell_OK

・require_once でファイルを読み込んでいたようです。

このコードのことでしょうか。
require_once 'finish.php';

finish.phpの中を見てみないとはっきりしたことは言えませんが、
共通で使えそうでしたら、こちらの方がいいです。

当時のコードは持っていないので、
よろしければアップロードしてください。

回答No.20

dell_OK

・データがみつからないときはエラー画面に飛ばす機能を考えてみたのですが、どのようなコードになるのか見当がつきません…

こんな感じでしょうか。
データが０件の時にホームにリダイレクトしています。
どのページだったか覚えていませんが、
以前も何かの時にリダイレクトしていたと思いますので、
リダイレクト方法やリダイレクト先はそちらを参考にしてください。
－－－－
/*
Template Name: bbs_que_answer
固定ページ: 回答画面
*/
$unique_id = substr($_SERVER['REQUEST_URI'], -36);
$sql = 'SELECT * FROM sortable WHERE unique_id = %s';
$query = $wpdb->prepare($sql, $unique_id);
$rows = $wpdb->get_results($query);
if (count($rows) == 0) {
header("Location: " . home_url());
exit;
}
header('X-FRAME-OPTIONS: SAMEORIGIN');
get_header();
－－－－

・質問が削除された際一緒にデータベースから回答も消えるのではないかと考えております。

そうですね。
質問と回答（返信）は一緒に削除する必要があります。

補足

Q.こんな感じでしょうか。
データが０件の時にホームにリダイレクトしています。
どのページだったか覚えていませんが、
以前も何かの時にリダイレクトしていたと思いますので、
リダイレクト方法やリダイレクト先はそちらを参考にしてください。
－－－－
/*
Template Name: bbs_que_answer
固定ページ: 回答画面
*/
$unique_id = substr($_SERVER['REQUEST_URI'], -36);
$sql = 'SELECT * FROM sortable WHERE unique_id = %s';
$query = $wpdb->prepare($sql, $unique_id);
$rows = $wpdb->get_results($query);
if (count($rows) == 0) {
header("Location: " . home_url());
exit;
}
header('X-FRAME-OPTIONS: SAMEORIGIN');
get_header();
－－－－

A.回答ありがとうございます。
リダイレクトの処理を行うということで header("Location: " . home_url()); を採用したんですね。
過去のリダイレクトに関する方法について見返してみたところ、require_once でファイルを読み込んでいたようです。
この方法よりも dell_ok さんから新たに教えて頂いたコードの方が良いでしょうか？

※ リダイレクトについて
https://okwave.jp/qa/q10113307.html

回答No.19

dell_OK

PHPで完結と言ったのはクラスを切り替える方法でです。

画像数によってクラス名を変数に代入します。
－－－－
$count = count($views);
if ($count == 1 || $count == 2) {
$qm = 'quest_markdown';
$qi = 'quest_item';
} else {
$qm = 'quest_markdown_group';
$qi = 'quest_item_group';
}
－－－－

変数の値がをclassになるように出力する。
－－－－
echo '<div class="' . $qm . '">';
foreach ($views as $view) { // 個別にのみ float: left;
echo '<div class="' . $qi . '">' . $view . '</div>'; // アップロードファイル
}
－－－－

これで用意していただいたCSSを使い分けることができます。
JavaScriptで同じようなことをされていたので、PHPの方が簡単にすっきりできると思っていました。
CSSをPHPで書きかえる方法（display: <?php echo $qidisplay; ?>;）よりも、
クラスを切り替える方がいいと思います。

当初は開発中でここでしか使わないと思っていたので、
HTMLの中に書いていただいた<style>～</style>ですが、
固まりつつあるのでHTMLから除いて、
style.cssに移動した方がいいように思います。

どのように使われているかわかりませんが、
質問画面と共通で使えそうな以下のものもです。
－－－－
.hideItems {
.concealItems {
.wait {
@keyframes rotating {
－－－－

補足

Q.これで用意していただいたCSSを使い分けることができます。
JavaScriptで同じようなことをされていたので、PHPの方が簡単にすっきりできると思っていました。
CSSをPHPで書きかえる方法（display: <?php echo $qidisplay; ?>;）よりも、
クラスを切り替える方がいいと思います。

A.修正ありがとうございます。
クラス名を PHP でも切り替えられることを初めて知りました覚えておきます。

Q.当初は開発中でここでしか使わないと思っていたので、
HTMLの中に書いていただいた<style>～</style>ですが、
固まりつつあるのでHTMLから除いて、
style.cssに移動した方がいいように思います。

A.回答ありがとうございます移動させてみます。

回答No.18

dell_OK

・display: を2つ設定するのは違和感がある

そうですね。
質問者さまのサイトでソースを確認すると以下のようになっていました。
－－－－
/* 雑談掲示板 回答画面ファイルアップロードを並べる */
.quest_container .quest_item {
float: left;
display: inline-block;
display: ;
margin-bottom: 30px;
padding: 0px 18px 0px 5px;
}
－－－－

ふたつめのdisplayは値が欠落しています。
display: inline-block;
display: ;

ブラウザによって動作が異なるかも知れませんが、
Chromeではふたつめ（最後）の値が優先されます。
例えば、こうなっていると blue になります。
p {
color: red;
color: blue;
}

この原理で言うと、値のない、
display: ;
これが優先されますが、適用される値がないため、
display: inline-block;
が適用されたままになるのだと思われます。

Chromはエラーもなくそれなりに表示をしてくれていますが、
値がないのは構文として誤りですし、
意図なくひとつのセレクタに同じプロパティを記述しない方がいいでしょう。

こちらも値のないプロパティになっています。
－－－－
/* ファイルが1か2件の場合 */
.quest_container .quest_markdown {
float: ;
}
－－－－

あわせて修正するとしたら以下のようになります。
－－－－
if ($count == 1) {
// 1がtrueの場合
// ここの処理が実行される
$qmfloat = 'left'; // 画像が2つの場合のみ
$qifloat = 'none';
$qidisplay = 'block'; // 画像が2つの場合のみ
} elseif ($count == 2) {
// 1がfalseで2がtrueの場合
// ここの処理が実行される
$qmfloat = 'left'; // 画像が2つの場合のみ
$qifloat = 'none';
$qidisplay = 'block'; // 画像が2つの場合のみ
} else {
// それ以外（1、2ともにfalse）の場合
// ここの処理が実行される
$qmfloat = 'none';
$qifloat = 'left'; // 画像が3つの場合のみ
$qidisplay = 'inline-block'; // 画像が3つの場合のみ
}
－－－－

勝手ながら、値を示していると思われる Left Block Inlineblock を変数名からなくしました。
$qmdisplayInlineblock と $qmdisplayBlock はひとつの変数に統合され $qmdisplay にしました。
変数名の付け方についてですが、
$qmdisplayBlockは「quest_itemのdisplayプロパティにblockを設定するための」変数なのでblock専用になっています。
$qmdisplayInlineblockも同様にinline-block専用になっています。
そのためdisplayプロパティをふたつ書くことになってしまったのでしょうね。
私なら「quest_itemのdisplayプロパティを設定するための」変数としてblockやinline-blockを代入します。
他の値を入れても違和感のない名前になるでしょう。

次のような方法で解決することもできますが、これはこれで問題のある書き方です。。
display: <?php echo $qmdisplayInlineblock; ?><?php echo $qmdisplayBlock; ?>;

値のないプロパティにならないよう、
３つの変数に代入するようにします。
未代入だったものには none を代入していますが、
期待通りの表示にならない場合は、
適切な値を代入するようにしてください。

変数を統合したのでスタイルシートはdisplayひとつでよくなります。
－－－－
/* 雑談掲示板 回答画面ファイルアップロードを並べる */
.quest_container .quest_item {
float: <?php echo $qifloat; ?>;
display: <?php echo $qidisplay; ?>;
margin-bottom: 30px;
padding: 0px 18px 0px 5px;
}
－－－－

・アップロードファイルが1か2の場合と3の場合でクラス名を変更するコードを考えてみました。

JavaScriptにされたのですね。
動作確認されて期待通りに動作したのでしたら、それでもいいような気はしますが、
PHPで完結した方がなおよかったかなと思います。

補足

Q.この原理で言うと、値のない、
display: ;
これが優先されますが、適用される値がないため、
display: inline-block;
が適用されたままになるのだと思われます。

A.回答ありがとうございます。
2つ目が優先されるのを忘れておりました、値がないと1つめが優先されるということで覚えておきます。

Q.変数名の付け方についてですが、
$qmdisplayBlockは「quest_itemのdisplayプロパティにblockを設定するための」変数なのでblock専用になっています。
$qmdisplayInlineblockも同様にinline-block専用になっています。
そのためdisplayプロパティをふたつ書くことになってしまったのでしょうね。
私なら「quest_itemのdisplayプロパティを設定するための」変数としてblockやinline-blockを代入します。

A.回答ありがとうございます。
float と display で変数名を分けたほうが変数名が少なくて済むんですね勉強になりました。

Q.JavaScriptにされたのですね。
動作確認されて期待通りに動作したのでしたら、それでもいいような気はしますが、
PHPで完結した方がなおよかったかなと思います。

A.回答ありがとうございます。
<script></script> を質問表示の時と回答機能で2度読み込ませるよりも PHP でまとめたほうが良いと思いましたので、dell_ok さんにアドバイス頂いたコードの方を使わせて頂きます。

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

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

回答No.16 でアドバイス頂いた、質問のない回答機能が表示されたときにデータがみつからないときはエラー画面に飛ばす機能を考えてみたのですが、どのようなコードになるのか見当がつきません…

でたらめなIDから存在しない回答画面に飛ばされることを想定してみました。
これから質問と回答と返信はそれぞれ紐付けるツリー型になる場合、質問が削除された際一緒にデータベースから回答も消えるのではないかと考えております。
もし回答や返信のみ削除されないのであれば不必要なデータがずっと蓄積されてしまうので、処理を分けたとしても同じタイミングで削除することになりそうです。

dell_ok さんはどう思われますでしょうか？

回答No.17

dell_OK

・回答画面の質問表示でファイルアップロード数によって CSS を変化させることが出来ず

style.cssにPHPコードが含まれています。

.quest_container .quest_item {
float: <?php echo $buafloatLeft; ?>;

.image-partial {
float: <?php echo $bmfloatLeft; ?>;

ここには書けないのは当然なのですが、
このスタイルシートを追加する前から、
以下の処理で代入された変数$bmfloatLeftや$buafloatLeftが使われていません。
その時からずっと変化していなかったのではないでしょうか。
－－－－
$count = count($views);
if ($count == 1) {
$bmfloatLeft = 'left'; // 画像が2つの場合のみ
} elseif ($count == 2) {
$bmfloatLeft = 'left'; // 画像が2つの場合のみ
} else {
$buafloatLeft = 'left'; // 画像が3つの場合のみ
}
－－－－
もとにされたコードでこの変数がどのように使われていたかわかりますか。
おそらくstyle="～"のところをどうにかしていると思います。

スタイルシートを使うのでしたら、
画像が１つ用、２つ用、３つ用のスタイルを定義しておいて、
PHPで画像数によってclass="～"を変える方がいいと思います。

補足

Q.style.cssにPHPコードが含まれています。

.quest_container .quest_item {
float: <?php echo $buafloatLeft; ?>;

.image-partial {
float: <?php echo $bmfloatLeft; ?>;

A.アドバイスありがとうございます。
dell_ok さんの見立て通り style.css に書かれていたことが原因でした bbs_que_answer に移動させたところ反映されました。

Q.このスタイルシートを追加する前から、
以下の処理で代入された変数$bmfloatLeftや$buafloatLeftが使われていません。
その時からずっと変化していなかったのではないでしょうか。
－－－－
$count = count($views);
if ($count == 1) {
$bmfloatLeft = 'left'; // 画像が2つの場合のみ
} elseif ($count == 2) {
$bmfloatLeft = 'left'; // 画像が2つの場合のみ
} else {
$buafloatLeft = 'left'; // 画像が3つの場合のみ
}
－－－－
もとにされたコードでこの変数がどのように使われていたかわかりますか。
おそらくstyle="～"のところをどうにかしていると思います。

A.回答ありがとうございます。変数 $bmfloatLeft や $buafloatLeft の変数名は修正し忘れていたのですが、
style="～" のところはそのままで正解のようです。

Q.スタイルシートを使うのでしたら、
画像が１つ用、２つ用、３つ用のスタイルを定義しておいて、
PHPで画像数によってclass="～"を変える方がいいと思います。

A.アドバイスありがとうございます。
CSS を分岐させるコードで問題なく表示されているのですが、display: を2つ設定するのは違和感があるので、アップロードファイルが1か2の場合と3の場合でクラス名を変更するコードを考えてみました。
sample.php の199行目からコードを書いております。27、30、33行目の $views[] は配列が必要無いと思い削除して、代わりにクラスを追加しております。
どちらの方法が良いと思われますでしょうか？

※ CSS を分岐させるコード
/* 雑談掲示板 回答画面ファイルアップロードを並べる */
.quest_container .quest_item {
float: <?php echo $qifloatLeft; ?>;
display: <?php echo $qmdisplayInlineblock; ?>;
display: <?php echo $qmdisplayBlock; ?>;
margin-bottom: 30px;
padding: 0px 18px 0px 5px;
}

※ 最新コード（bbs_que_answer.phpにPHPでのCSS分岐コード、sample.phpにJavascriptでのクラス変更コードを書いております。）
https://github.com/i6Grja3R/sample_theme.git

回答No.16

dell_OK

・質問が表示されていないのも問題ない気がしております。
そのような認識であってますでしょうか？

そうですね。
あっています。

質問は表示されていませんが、回答機能は表示されているようですね。
質問が表示されていないのは、該当する質問がみつからなかったからです。
URLの後ろに適切なIDがなかったので、
$unique_id = substr($_SERVER['REQUEST_URI'], -36);
は、
e5%9b%9e%e7%ad%94%e7%94%bb%e9%9d%a2/
（アドレスバーでは /質問回答画面/ と表示されている後部）
を、$unique_idに代入して、
それでテーブルを参照したけどデータがみつからなかったということです。

それも含めて、でたらめなIDを直接入力されたこと考えると、
質問のない回答機能が表示されるのも問題ですから、
データがみつからないときはエラー画面に飛ばした方がいいですね。

補足

回答ありがとうございます。
データがみつからないときはエラー画面に飛ばす機能も作成してみます。
回答画面の質問表示でファイルアップロード数によって CSS を変化させることが出来ず困っております…
var_dump($count); で確認したところ正確な値だったのでどこに原因があるのか分かりませんアドバイスお願い致します。

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

回答No.15

dell_OK

・Javascript が動的で PHP は静的なものというイメージでした。

そうですね。
それはそれで間違いではありません。

私が言ったPHPの動的は、HTMLの静的に対してです。

HTMLでは、
－－－－
<p>こんにちは</p>
－－－－

いつでもだれにでも同じものが表示されるので静的です。
～～～～
こんにちは
～～～～

PHPでは条件によって出力内容を変えられます。
例えば、
－－－－
if(朝条件){echo "<p>おはよう</p>"};
if(昼条件){echo "<p>こんにちは</p>"};
if(夜条件){echo "<p>こんばんは</p>"};
－－－－

条件で変化するので動的です。
～～～～
おはよう
～～～～
こんにちは
～～～～
こんばんは
～～～～

PHPはウェブサーバーが出力するまでの内容を変更できますが、
ブラウザに表示されてからは変更できません。
そのためJavaScriptに対して静的なイメージがあるのでしょう。

JavaScriptが動的と言うのは、
ブラウザに読み込まれた後でページの内容を変更できるからです。
ウェブサーバーが出力したものが同じだとしても、
変化させることができます。
ボタンを押したら何かを表示するとか、
リアルタイムに時刻を表示したりとか、
もっと複雑なことも。

お礼

こちらが最新の質問になります、回答No.15の補足について誤解しておりました申し訳ありません。
回答画面のデザインの事ばかり考えていたのですが、回答画面を表示する流れとして質問一覧ページを経由する必要がある為、固定ページの回答画面で個別の URL が設定されておらず、質問が表示されていないのも問題ない気がしております。
そのような認識であってますでしょうか？

補足

Q.私が言ったPHPの動的は、HTMLの静的に対してです。

条件で変化するので動的です。

PHPはウェブサーバーが出力するまでの内容を変更できますが、
ブラウザに表示されてからは変更できません。
そのためJavaScriptに対して静的なイメージがあるのでしょう。
JavaScriptが動的と言うのは、
ブラウザに読み込まれた後でページの内容を変更できるからです。

A.解説ありがとうございます、何故 JavaScript が動的と呼ばれるか理解出来ました。

回答No.12の補足についてお聞きしたいのですが、ID を付与してみても質問内容は表示されず悩んでおります…
修正部分を間違えているのでしょうか？

もう1点お聞きしたいのですが、遷移したページのIDが付加されたURLを登録というのは質問ごとに回答画面を用意するという事でしょうか？

※ 固定ページの URL に ID を付与
https://imgur.com/1WwOtCo.png

回答No.14

dell_OK

「このPHP出力はなくなり、JavaScriptになるような気がします。」
と言いましたが、なくなるのはHTML出力の入力フォームでした。
PHP出力（質問内容と他の回答）はどうされるか検討事項になると思います。

記事へのコメントでは、返信したいコメントのボタンを押してから、入力フォームを表示するようになっていたと思います。

質問回答画面でも質問に回答したり、他の回答に返信したりあると思いますので、各所にボタンが設置されることになると想像しています。

補足

回答ありがとうございます。dell_ok さんのおっしゃられるように各所にボタンが設置することになりそうです。

※ 回答画面イメージ
https://marvelapp.com/whiteboard/urN35BK2SNIqAd9D5XwO

回答No.13

dell_OK

・回答画面全体を外枠で囲う際に質問内容を PHP 出力で書いて、回答機能を HTML 出力で書く方法かどちらも PHP echo で書く方法どちらがよいか悩んでおります。

回答機能はHTML出力でいいと思います。
もともとPHPは動的なものを表示するために開発されたものです。
それが理由というわけではありませんが、
静的なものをわざわざPHPで出力する必要はないと思います。

それと、エディタのこともあります。
HTML出力では、タグ、属性、属性値が色分けされて見やすいです。
コードフォーマットした場合でも、
HTML出力ではネストタグがインデントされ階層ができるため、
要素構造や終了タグ位置がわかりやすくなります。
PHP出力では階層ができないため、
終了タグ位置がわかりにくくなります。
とは言っても、
見やすさやわかりやすさは個人的な感覚なので一概には言えませんし、
これは開発者の都合です。

閲覧者にはインデントに意味はありませんし、
不要なスペースが通信データに含まれるのでデメリットと言うべきでしょう。

「回答画面全体を外枠で囲う」ことは意識しなくてもいいと思います。
その中のコンテンツや要素のかたまりをひとつずつの部品と考え、
部品ごとにミスなく簡単に記述することが大事だと思います。
質問内容がひとつの部品、回答機能がひとつの部品、
場合によっては、その中の細かいものも部品、です。

余計な説明をして惑わせるかもしれませんが、
私がよくやる方法を説明しておきます。

どのようないきさつでechoの多いコードになったのか覚えませんが、
私はechoをあまり書きません。

HTML出力を以下のようにすることで、
全体を囲うことを意識されても違和感があまりないかと思います。
－－－－
<div class="main_container">
<div class="quest_container">
<?php echo $quest_container; ?>
</div>
<div class="board_respond" id="js_board_respond">
<div id="input_area">
省略
</div>
<div id="confirm_area"></div>
<div id="result_area"></div>
</div>
</div>
－－－－

質問内容は１回のechoで出力します。
echo $quest_container;

$quest_containerはと言うと、echoのかわりに文字列結合代入で追記していきます。
－－－－変更前
echo '<div class="quest_header_title">' . mb_strimwidth($row->title, 0, 40, '･･･') . '</div>';
－－－－変更後
$quest_container .= '<div class="quest_header_title">' . mb_strimwidth($row->title, 0, 40, '･･･') . '</div>';
－－－－

私の方法は以上です。

echoをたくさん書くのと、ひとつにまとめて１回では、
どのようなメリットデメリットがあるのかわかりませんが、
速さだけに注目して検証されたサイトがありました。
https://wemo.tech/1549

・これから返信機能を書いていく際の方針にも関係するのでアドバイス頂きたいです。

最終的に返信機能は回答機能と同じことになると思います。
そもそもひとつの機能だと思います。
ツリー型にされるのでしたよね。
なので、以前、記事へのコメントでやった方法（と言うか手法？）に近くなると思います。
おそらく、このPHP出力はなくなり、JavaScriptになるような気がします。

補足

Q.回答機能はHTML出力でいいと思います。
もともとPHPは動的なものを表示するために開発されたものです。
静的なものをわざわざPHPで出力する必要はないと思います。

それと、エディタのこともあります。
HTML出力では、タグ、属性、属性値が色分けされて見やすいです。

A.アドバイスありがとうございます。
PHP は動的なものを表示するための言語だったんですね Javascript が動的で PHP は静的なものというイメージでした。
エディタのことも含めて HTML出力にしてみます。

Q.HTML出力を以下のようにすることで、
全体を囲うことを意識されても違和感があまりないかと思います。
－－－－
<div class="main_container">
<div class="quest_container">
<?php echo $quest_container; ?>
</div>
<div class="board_respond" id="js_board_respond">
<div id="input_area">
省略
</div>
<div id="confirm_area"></div>
<div id="result_area"></div>
</div>
</div>
－－－－

質問内容は１回のechoで出力します。
echo $quest_container;

$quest_containerはと言うと、echoのかわりに文字列結合代入で追記していきます。
－－－－変更前
echo '<div class="quest_header_title">' . mb_strimwidth($row->title, 0, 40, '･･･') . '</div>';
－－－－変更後
$quest_container .= '<div class="quest_header_title">' . mb_strimwidth($row->title, 0, 40, '･･･') . '</div>';
－－－－

私の方法は以上です。

A.解説ありがとうございます。
関数にまとめてから echo で出力するということですね分かりやすい説明を頂き理解出来ました確かに違和感を感じません。

Q.echoをたくさん書くのと、ひとつにまとめて１回では、
どのようなメリットデメリットがあるのかわかりませんが、
速さだけに注目して検証されたサイトがありました。

A.回答ありがとうございます、速度はあまり変わらないようですね勉強になりました。

Q.最終的に返信機能は回答機能と同じことになると思います。
そもそもひとつの機能だと思います。
ツリー型にされるのでしたよね。
なので、以前、記事へのコメントでやった方法（と言うか手法？）に近くなると思います。
おそらく、このPHP出力はなくなり、JavaScriptになるような気がします。

A.回答ありがとうございます。
PHP のコードのみになるのではないかと予想していました。記事へのコメントでやった方法を考えると JavaScript 中心になりそうです。

回答No.12

dell_OK

・回答画面では変わらず何も表示されず

URLがhttps://www.irasuto.cfbx.jp/質問回答画面/でIDが付加されていません。
ブラウザのお気に入りからアクセスされているのでしたら、
質問一覧画面から遷移したページのIDが付加されたURLを登録してください。

補足

回答ありがとうございます、遷移したページのIDが付加されたURLを登録という意図を理解できていないのですが、質問ごとに回答画面を用意するという事でしょうか？
回答画面の固定ページは1つで URL が複数あるというイメージでした…
ID を付与してみたのですが、質問内容は表示されず修正部分を間違えているのでしょうか？

※ 固定ページの URL に ID を付与
https://imgur.com/1WwOtCo.png