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

dell_OK · ベストアンサー

・ポップアップで表示するコンテンツだったので Javascript で書いたのですがその場合も直接 HTML で書く方法で良いのでしょうか？

ポップアップそのものは HTML で書かれていますよね。
ポップアップ全体が JavaScript で生成されているのでしたら、
テキストボックスとボタンもそうなりますが、
あえて後から追加しなくてもいいように思います。

・下記の非同期通信はどちらにあたるのでしょうか？

JavaScript ですね。
jQuery は $() みたいな書き方で始まるものが多い気がします。

・申し訳ありません質問に対するいいねカウントなので bbs_que_answer.php に初めから書くべきでした。

いえいえ。それで大丈夫です。
いいねボタンのコードを書いたり動作を試したりするのは必要なことですので、
それ用の固定ページ（bbs_lile_count.php）を作られるのはかまいません。
ただ、bbs_lile_count.php も sample.php も、
先頭のコメントが、こうなっているので、
Template Name: bbs_lile_count
WordPressの設定で固定ページのテンプレートを変更しないと動かなかったものですから。

次の回答は、１月４日以降になります。

お礼

Q.ポップアップ全体が JavaScript で生成されているのでしたら、
テキストボックスとボタンもそうなりますが、
あえて後から追加しなくてもいいように思います。

A.アドバイスありがとうございます。
HTML で要素を記述してみて希望通りの動作にすることが出来たのですが、コードをもう少しまとめてみてはどうかというアドバイスを頂きました。

頂いたアドバイス ➀ と ➁ をどのように修正すべきか悩んでおります。
➂ の一貫性に関して dell_ok さんであれば addEventListener で統一されますでしょうか？
innerHTML は HTMLエスケープを行っていない場合にクロスサイト・スクリプティング攻撃の対象になるようなので、下記コードに修正致しました。

//旧コード
divShapeText.onclick = function() {
divShapeText.innerHTML = "コピーされました";
};
↓
//新コード
divShapeText.onclick = function() {
divShapeText.textContent = "コピーされました";
};

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

※ 参考サイト
https://qiita.com/RYO_nami/items/4543edfc7febe88 …

https://dubdesign.net/javascript/execcommand-copy/

※ 頂いたアドバイス
➀ const textboxHref = location.href;
let url = location.href
と同じ内容を、別の変数に代入しているのは無駄に思えます。

➁ jQueryを読み込んでいるようですが、最後の数行を除いて、ほとんど利用していませんよね？

➂ イベントのバインドも、「addEventListener」であったり「onclick」であったりと一貫性が感じられません。
ご提示のスクリプトに限って言えば、「textContent」と「innerHTML」も同様です。

要素取得のためだけに、jQueryを読み込むのであれば、例えば自前で
　const QS = s => document.querySelector(s);
のような関数を定義しておけば、読み込みは不要になりますし、「要素を取得する関数」とだけ覚えておけば、個別に要素の変数を多数作成するよりもわかりやすくなる可能性がありますし、スクリプトも全体的に短縮化が可能です。
（jQueryに慣れているなら、関数名を$にしておいてもよい）

Q.JavaScript ですね。
jQuery は $() みたいな書き方で始まるものが多い気がします。

A.回答ありがとうございます。
JavaScript で覚えておきます。

Q.いいねボタンのコードを書いたり動作を試したりするのは必要なことですので、
それ用の固定ページ（bbs_lile_count.php）を作られるのはかまいません。
ただ、bbs_lile_count.php も sample.php も、
先頭のコメントが、こうなっているので、
Template Name: bbs_lile_count
WordPressの設定で固定ページのテンプレートを変更しないと動かなかったものですから。

A.回答ありがとうございます。
テンプレート名を変更し忘れておりました申し訳ありません。
bbs_lile_count.php でコードを書いてみます。

回答No.38

dell_OK

・PHPとAjaxでいいねボタンを作ってみたというサイトを参考にコードを書いてみたのですが、投稿記事ではなく質問へのいいねカウントなので設計から違う可能性があり心配しております。

そうですね。
いいねボタンだけの画面でやっても意味がありません。
質問回答画面に付けた方がいいと思います。

・sample.php にコードを書いてみたのですがおかしなところなどありますでしょうか？

sample.php にしないでください。
実行するのに手間がかかります。
bbs_lile_count.php に手を加えたのであれば、
git で差分も見れるのでそれでいいです。

いただいたコードは実行できなかったので、
最新のものと合っているかどうかわかりませんが、
カウントの更新は非同期でしているので、
functions.php に書くべきですね。

お礼

こちらが最新の回答になります。
質問の期限が切れていたことに気が付かず申し訳ありません。
下記のページからアドバイスお願い致します。

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

補足

Q.sample.php にしないでください。
実行するのに手間がかかります。
bbs_lile_count.php に手を加えたのであれば、
git で差分も見れるのでそれでいいです。

いただいたコードは実行できなかったので、
最新のものと合っているかどうかわかりませんが、
カウントの更新は非同期でしているので、
functions.php に書くべきですね。

A.回答ありがとうございます。
申し訳ありません質問に対するいいねカウントなので bbs_que_answer.php に初めから書くべきでした。
非同期通信部分は bbs_que_answer.php に書いて、オブジェクトに関するコードがある場合に functions.php へ書くという形で想像しておりました。

※ bbs_que_answer.php から抜粋
//サーバーにデータを送信する際に使用するオブジェクトを生成
const formData = new FormData(answer_Input_form);
//オブジェクト内の既存のキーに新しい値を追加
formData.append("action", "bbs_answer_submit");

回答No.37

dell_OK

・カウントに関して2パターン見つけたのですが、1つ目は Ajax を使いリアルタイムで反映させる、2つ目はカウントをカラムに集計して一定期間でカウント？するというものでした。
参考サイトに書かれていたことを正確に理解できていないため意味を間違えているかもしれません…

そうですね。
リアルタイムの意味がわからないですね。

・いいねボタンの連続カウント防止方法も2パターンあるようです。
・2つ目の方法が簡単だと思ったのですが、2度押ししていいねカウントの取り消しを行う場合は1つめの方法で記載したカラムが必要になるのではないかと感じております。

そうですね。
１つめの方法しかないと思います。

補足

回答ありがとうございます。
Ajax を使う方法で考えていきます。

回答No.36

dell_OK

・svg画像を使用してクリックの前後で css を変更する方法と、HTMLの書き換えを行い通常の img(png) 画像を非同期通信で変更する方法があるようです。

非同期とは話しが違う気がします。
画像の変更は css（クラス）か html（src）のどちらを変更するか程度の違いしかないように思います。
クリック直後には連打禁止のために css か html の変更が必要になります。
非同期で行うのは、
カウントに成功したら画像を変えること、
カウントに失敗したら画像はそのままでクリックできるようにすること、
ではないでしょうか。

補足

A.解説ありがとうございます。
クリック直後には連打禁止のために HTML の書き換えが必要ということで覚えておきます。

回答No.35

dell_OK

・Ajax に関して jQuery か JavaScript どちらでコードを書いていくのか悩んでおります。
どちらの方法が良いと思われますでしょうか？

それは今後のためにも質問者さまのポリシーとして決めておいた方がいいと思います。
どちらも使えるのであれば臨機応変に両方を使うのがいいと思います。
どちらか一方なら使えるのであればそちらを優先するといいと思います。
どちらも使えていないから悩まれているのでしょうか。

私は最初はどちらも使えていませんでした。
いろいろやっていくうちに慣れたのは JavaScript でした。
他の言語にも近いですし、私には読みやすいです。
その間にも JavaScript の機能改善などがあり、
あくまで私のしたいことの範囲でですが、
JavaScript 標準ですべてできています。

jQuery にメリットは感じていません。
jQuery は何を書いているのかわかりません。
自分で書くことができません。
jQuery を読み込む必要があることからして面倒です。
jQuery を使わないのが私のポリシーとなっています。

JavaScript でやりたいことを検索して、
見つかった情報が jQuery だった場合は無視しています。
jQuery の情報しか見つからなければ、
JavaScript 標準に書き直していたくらいです。

使いたい JavaScript 向けのライブラリが jQuery 必須となっている場合に jQuery を使ってはいますが、
自分が書くコードの部分は jQuery では書きません。

JavaScript 標準でも Ajax は簡単に使えるようになっているので、
Ajax のためだけに jQuery を使わなくてもいいと思います。

ですが、WordPress は最初から jQuery を読み込んでいますし、
他のページではすでに jQuery を使われていたように思いますので、
参考サイトのコードをベースにしている間は、
それが jQuery ならそのままを使った方が問題が少ないと思います。
ただしそのコードをむやみに変更しないことです。
変数名やクラスや id を変更する場合は慎重にしてください。

補足

Q.jQuery にメリットは感じていません。
jQuery は何を書いているのかわかりません。
自分で書くことができません。
jQuery を読み込む必要があることからして面倒です。
jQuery を使わないのが私のポリシーとなっています。

JavaScript でやりたいことを検索して、
見つかった情報が jQuery だった場合は無視しています。
jQuery の情報しか見つからなければ、
JavaScript 標準に書き直していたくらいです。

JavaScript 標準でも Ajax は簡単に使えるようになっているので、
Ajax のためだけに jQuery を使わなくてもいいと思います。

A.アドバイスありがとうございます。
jQuery は分からないコードが多く扱いにくいと感じました。
Javascript に書き直す方法で今回のコードも書いております。
以前 dell_ok さんから教えて頂いたコードを参考にさせていただいたのですが、下記の非同期通信はどちらにあたるのでしょうか？

※ bbs_que_answer から抜粋
//サーバーにデータを送信する際に使用するオブジェクトを生成
const formData = new FormData(answer_Input_form);
//オブジェクト内の既存のキーに新しい値を追加
formData.append("action", "bbs_answer_submit");
const opt = {
method: "post",
body: formData
}
//非同期通信
fetch("<?php echo home_url('wp-admin/admin-ajax.php'); ?>", opt)
.then(response => {
//ボタンを使用可にしています「非同期通信が完了して応答があった時」の処理です。
submit_button.disabled = false;
//ボタンのクラスからwaitを削除しています（もとのボタンに戻ります）
submit_button.classList.remove('wait');
return response.json();
})
.then(json => {
if (json.error != "") {
alert(json.error);
return;
}
name_value = json.name;
text_value = json.text;

回答No.34

dell_OK

・キャッシュせずに共有ボタンを押すたびにテキストボックスとコピーするボタンが生成されてしまうのですがどうすれば良いでしょうか？

キャッシュと言われているのがなんのことかわかりませんが、
テキストボックスとコピーするボタンは生成せずに、
ポップアップの中に直接 HTML で記述していいと思います。

でなければ、生成しているものは、
ポップアップを閉じる時に削除するかです。

補足

Q.キャッシュと言われているのがなんのことかわかりませんが、
テキストボックスとコピーするボタンは生成せずに、
ポップアップの中に直接 HTML で記述していいと思います。

でなければ、生成しているものは、
ポップアップを閉じる時に削除するかです。

A.アドバイスありがとうございます。
キャッシュはブラウザの履歴削除のことになります説明不足で申し訳ありません。
ポップアップで表示するコンテンツだったので Javascript で書いたのですがその場合も直接 HTML で書く方法で良いのでしょうか？
閉じるときに削除する発想はありませんでしたが良さそうですね。

回答No.33

dell_OK

・id を追加した場合もクラスの有無での判定になるのでしょうか？

id を追加して id で判定する方法をあげたのは、
このコードが id で判定しているので、
e.target.id === popupWrapper.id || e.target.id === close.id
これにならっていただければ、
質問者さまにわかりやすいと思ってのことです。

このコードでは、
!e.target.classList.contains("shape-text")
「クラスに含まれていないかで判定する発想はありませんでした」と思われましたよね。

でも、このコードだったら、
e.target.id !== divShapeText.id
もしかしたら発想できたかも知れないですよね。

ですが、id 判定のためには他にも直すコードがあるため控えて、
１行直すだけのクラス判定をお伝えしました。

クラス判定は複数を対象にできるメリットがあるので、
id 判定はデメリットと考えることもできます。

これらのことをふまえると、クラス判定でいいと思います。
他の用途で id が必要でなければ、
id を追加することもありません。

補足

Q.このコードが id で判定しているので、
e.target.id === popupWrapper.id || e.target.id === close.id
これにならっていただければ、
質問者さまにわかりやすいと思ってのことです。

でも、このコードだったら、
e.target.id !== divShapeText.id
もしかしたら発想できたかも知れないですよね。

クラス判定は複数を対象にできるメリットがあるので、
id 判定はデメリットと考えることもできます。

これらのことをふまえると、クラス判定でいいと思います。

A.解説ありがとうございます。
おっしゃる通り id であれば想像できそうです。
クラスのみ複数対象に出来るんですね覚えておきます。

回答No.32

dell_OK

・popup-wrapper を spread-information に変えると SNSのシェアリンクアイコンのみ消えてしまい、close にするとｘ のみ消えてしまいどうすればよいか分かりません…

あまり手を加えずにするとこのようになります。
if ((e.target.id === popupWrapper.id || e.target.id === close.id) && !e.target.classList.contains("shape-text")) {

divShapeText かどうかを直接判定する方法がないため、
クラスに shape-text が含まれているか判定しています。

他の方法だと、
divShapeText に id を追加して、
id で判断した方がただひとつのものとしての確実性があります。

ですが、もし、他にクリックしても閉じないようにすることになった場合、
id を増やして判定コードが増えるよりも、
クラスの方が同じクラスを設定できて便利です。

とりあえず、いまのところはクラスのままでいいと思います。

お礼

こちらが最新の回答になります。
PHPとAjaxでいいねボタンを作ってみたというサイトを参考にコードを書いてみたのですが、投稿記事ではなく質問へのいいねカウントなので設計から違う可能性があり心配しております。
sample.php にコードを書いてみたのですがおかしなところなどありますでしょうか？
クラス名を変更する流れが理解出来ずアドバイスお願い致します。

※ 参考サイト
https://qiita.com/kanasann1106/items/4ea0675afde639e6d540

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

複数疑問となる点があったのですが調べたところ問題なさそうだったので役割は変えずにコードを書きました。
投稿に data属性を持たせてそこから投稿IDを判定しているようで、IDはデータベースに保存しているのですが、消してはいけないコードではないかと思いそのまま使用しております。
※ 該当コード
<section class="post" data-postid="<?php echo sanitize($p_id); ?>">

クエリ実行で queryPost が使われていたのですが wordpress では非推奨とのことで $query = $wpdb->query($wpdb->prepare($sql, $data)); に変更しております。

※ エスケープ処理されたSQL文をクエリ実行
https://noveltyinc.jp/media/wpdb-basic

参考サイトではデータベースで PDO を使用されているため、 rowCount() でクエリ処理後に該当の件数を取得しているのですが、wordpress の SQL で接続を行いたいということで代わりとして $count = $wpdb->query($sql); を書いてみました。

※ 該当コード
$resultCount = $stmt->rowCount();

※ クエリで影響を受ける行数を取得方法
https://stackoverflow.com/questions/48035224/how-to-get-affected-row-count-on-wordpress-query

補足

Q.divShapeText かどうかを直接判定する方法がないため、
クラスに shape-text が含まれているか判定しています。

他の方法だと、
divShapeText に id を追加して、
id で判断した方がただひとつのものとしての確実性があります。

A.修正ありがとうございます。
クラスに含まれていないかで判定する発想はありませんでした勉強になります。
id を追加した場合もクラスの有無での判定になるのでしょうか？

キャッシュせずに共有ボタンを押すたびにテキストボックスとコピーするボタンが生成されてしまうのですがどうすれば良いでしょうか？
addEventListener を使用してみたのですが重複して生成されてしまいます。

divShapeText.addEventListener("click", function() {
divShapeText.innerHTML = "コピーされました";
});

今のところは教えて頂いたコードにしてみます。

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

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

いいねボタンについて調べて幾つか分かったことがあり dell_ok さんにアドバイスを頂きたいです。

いいねボタンの表示方法は2つあるようで、svg画像を使用してクリックの前後で css を変更する方法と、HTMLの書き換えを行い通常の img(png) 画像を非同期通信で変更する方法があるようです。
前者の方法だとコードが短縮出来そうだと思ったのですが、リアルタイムでいいねカウントを反映させたい場合 Ajax は必須になるため、HTMLの書き換えを行う方法で画像も変更した方が統一されて分かりやすいと考えております。

カウントに関して2パターン見つけたのですが、1つ目は Ajax を使いリアルタイムで反映させる、2つ目はカウントをカラムに集計して一定期間でカウント？するというものでした。
参考サイトに書かれていたことを正確に理解できていないため意味を間違えているかもしれません…

いいねボタンの連続カウント防止方法も2パターンあるようです。
1つ目の方法では3つのカラムを必要としており、➀ユーザーID（ipアドレス）、➁質問ID、➂カウント数を結合して、ユーザーID（ipアドレス）が登録されていたらはじくというものでした。
2つ目の方法は disabled でクリック制限を行いカウントを押せないようにするというものでした。

2つ目の方法が簡単だと思ったのですが、2度押ししていいねカウントの取り消しを行う場合は1つめの方法で記載したカラムが必要になるのではないかと感じております。

Ajax に関して jQuery か JavaScript どちらでコードを書いていくのか悩んでおります。
jQuery Ajax は、JavaScript の Ajax より簡単に操作出来るというメリットがあるのですが、JavaScript より処理速度が遅いというデメリットもあり、どちらの方法が良いと思われますでしょうか？

※ 参考サイト
https://qiita.com/kanasann1106/items/4ea0675afde639e6d540

https://zenn.dev/torihazi/articles/2fefc4b673aea7

https://zenn.dev/cota_hu/articles/how-to-count-so-many

回答No.31

dell_OK

・何故 URL だと value になるか教えて頂きたいです。

URL だからではありません。
divScopeRenderer は input タグだからです。
input タグは value 属性で値の取得や設定をします。

補足

回答ありがとうございます。
input タグだからと教えて頂き理解出来ました。

回答No.30

dell_OK

・問題➁ コピーするボタンをクリックするとポップアップが閉じてしまう

popup-wrapper の中に divShapeText があるので、
popupWrapper.addEventListener('click' のイベントが発生するようです。

ここで e.target が divShapeText の場合は回避するようにしてみてください。
if (e.target.id === popupWrapper.id || e.target.id === close.id) {

補足

アドバイスありがとうございます。
popup-wrapper を spread-information に変えると SNSのシェアリンクアイコンのみ消えてしまい、close にするとｘ のみ消えてしまいどうすればよいか分かりません…
アドバイスお願い致します。

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

回答No.29

dell_OK

・問題➀ テキストボックス内に URL が表示されない

以下のように変更してみてください。
－－－－変更前
divScopeRenderer.innerHTML = 'textboxHref';
－－－－変更後
divScopeRenderer.value = textboxHref;
－－－－

補足

回答ありがとうございます。
.value で 表示することが出来ました、何故 URL だと value になるか教えて頂きたいです。