コメント欄の追加カスタマイズ

投稿日:

今回のブログカスタマイズは、去年の5月以来となるコメント欄のカスタマイズです。

前回カスタマイズしたページナビゲーションも去年同時期にカスタマイズしていたので、今回の追加カスタマイズもページナビから続けてやってしまおうと思います。
 

現在のコメント欄も、ネット上で公開されていたカスタマイズ用コードを全くそのまんま使わせて頂いただけのものだったので、これを当サイトのデザインに合ったものにしつつ、機能面でも使いやすくしていけたらいいなーと。

まぁやることはそんなに大したもんでもなく、いらない物はとっぱらって、表示される文言を少し変えようってだけです。
前回のページナビと同じような作業になるんじゃないでしょうか。

 

展開ボタンのカスタマイズ

まずはコメント展開ボタンのカスタマイズから。

具体的には、閉じた状態と開いた状態それぞれの文言を変更し、ボタンの色も変更します。
 

現時点でのコメント展開ボタンはコチラ

展開ボタン[閉]
↑閉じた状態

展開ボタン[開]
↑開いた状態

 
んじゃサクッと開いた方からカスタマイズ開始。

展開ボタン[開]2

「コメントを閉じる」→「コメントを閉じる」

‘欄’を足しただけですw

いやね、正直そのままでも良かったんだけど、せっかくカスタマイズするんだから何かしらは変えておきたいな、と。
デフォルトのまんまよりは「俺やってやったぜ感」があるじゃない? ない?
 

しかしこの「欄」の文字、潰れてますね…

背景の色を変えればマシになるかな? と思ったので、閉じた状態の文言変更の前にボタンの色を変えてみる。

展開ボタン[開]3

色はカラーコードとかなんか面倒くさそうだったので、これまた他の人が公開していたのをパクった。

うーん… 多少見やすくなったような気がしないでもないけど、きっと気のせいでしょうね(笑)
 

元々ウチのサイトのテーマカラーが緑だったこともあり、デフォルトの緑ボタンもよくマッチしていて特に不満も無かったんですが、今後サイトのテーマカラーはちょくちょく変えていこうかなと考えているので、どんな色取りにしたとしても違和感がなさそうなグレーにしておきました。 真っ黒でも良かったかも。

ただ、一気に地味になってしまいましたね…
これじゃあここが開閉ボタンだと気付かれないかも。

そこで、ちょっとボタンっぽく見えるよう細工してみました。

展開ボタン[開]4
↑開いた状態

展開ボタン[閉]2
↑閉じた状態

▼▲を上下に向かい合わせることで開閉機能があるらしいことをアッピール。(写真の並び逆にするべきだったな…)

実はコレ、今のボタン型の開閉機能のコメント欄にする前に私が使っていたコメント欄で採用されていたものなんですよね。 懐かしい。
昔やったカスタマイズも無駄ではなかったなぁ。
 

さて、些細なことですが、▼と▲の位置がなるべく揃ってほしいので、文字数を近づけることにしました。

展開ボタン[閉]3

「この記事にコメントする」→「コメントする」

うん、だいぶ良くなった気がします。
が、ちょっと腑に落ちない点も。

コメント欄を開くのってコメントを書き込む人だけじゃなく、他の人のコメントを「見る」だけの人もいると思うんですよね。
 

なので、もうちょい丁寧に書き直してみました。

展開ボタン[閉]4

「コメントする」→「コメントを見る・書き込む」

これじゃあ最初より文字数伸びてますね(-_-;)
 

考えたけど特にいい文言が思いつかなかったので、開いた状態が「コメント欄を閉じる」なら、その逆の閉じた状態なら、「コメント欄を開く」でいいんじゃないかなーと。

展開ボタン[閉]5

文字数も近くなったし、とりあえずこれでいいや。
 

次は気になっていた欄の文字潰れ。

さっきボタンの背景色を変えるために「style.css」をいじったときにもしやと思ったんですが、 'bold' という表記があったんですよね。

bold って確か「太字」だったはず。
ビジュアルエディタがたまに効かないとき、しゃーなくテキストエディタを使うのですが、そん時に見かけた気がするようなしないような?

試しにその一文を削除してみると…

展開ボタン[閉]6

直った!!

開いた状態のでも問題なく。

展開ボタン[開]5

太字じゃなくなったことでややインパクトに欠けるかなーと思ったのでフォントサイズを大きくしてみたんですが、PC上では良くなったけども、スマホサイズだと若干大きすぎるように感じたのでこれ以上は手を加えず完成で。

 
んじゃ、これにて展開ボタンのカスタマイズについては終了~
 

コメント承認制の記載

次にやるのは、このサイトのコメントは承認制ですよ、ってことを記載しておこうと思います。

承認制ってのはコメントを書き込んでもすぐには反映されず、サイトの管理人が承認(許可)をした場合にのみコメントが表示されるというシステムです。

さすがに即時反映はちょっと怖いですからね…
 

なんで今さらこんなことを記載するのかというと、
今回コメント欄のカスタマイズをするにあたり、自分ちのコメントフォームがどういう動作をしてるのかを知っておく必要があるだろうと思い、自分で自分のサイトにコメントを書き込んでみました。 …むなしい……

んで、コメントを送信した直後には以下の画面になるのですが、

コメント送信画面

この画面の後は記事トップへ戻るだけで、「コメントの送信が完了しました」とか「コメントは承認されるまでは表示されません」といった類のメッセージが何も出なかったんですよね。

こりゃいかんじゃろう、ってわけで今回のカスタマイズなのです。
 

なお、テストを繰り返した結果、
「メールアドレス」を入力した場合に限り承認待ちのメッセージが表示されるようになっているようです。↓

コメント送信テスト

…実はこの後のカスタマイズで、メールアドレス入力欄を削除しようと考えていたので、これには悩まされました(  ̄~ ̄;)

まーまーこれは次のカスタマイズなんでね、後で考えましょう。
 

それで承認制の注意書きを行なうスペースが問題なんですが、いろいろ書かれている入力フォームの中で、文言を自由に書き換えられるのは「コメントを残す」の一箇所だけでした。

他に選択肢もなさそうなので、とりあえずそれっぽく書き直してみたのがコチラ。

コメント承認制

(入力フォームをお試しで「ダークカラー」に変更してみました。これはナシねw)

※当サイトのコメントは承認制です。管理人が承認するまでは入力したコメントは表示されません。

…ちょっと長いですね(^^;

でかいフォントが使われてるせいもあって、スマホサイズで見るとかなりのスペースを取ってしまっていました。
もともと省スペースのためにコメント欄を展開式にしたのに、これじゃあ台無しです。
 

もうちょい文言をスリムにしてみたのがコチラ。

コメント承認制

※コメントは管理人が承認するまで表示されません。

個人的にはこれが一番しっくりきましたね。

だが、スマホサイズではまだちょーっと長い。
あと少しだけ縮めたい。
 

そんで完成形となったのがコレ。

コメント承認制(完成)

※コメントは管理人の承認後表示されます。

さっきの方が好みでしたが、字数的にこんぐらいしか思いつかなかったのでこれまた「とりあえず」で完成。
テキストの書き換え程度ならすぐにできますからね。 ここはそんな悩むとこじゃない。 問題は次。
 

「ウェブサイト」「メールアドレス」入力欄を削除

こっからが大変だった…

WordPressのコメントフォームの入力項目は、デフォルトでは「メールアドレス」「名前」「ウェブサイト」の3つ。

この内の、「ウェブサイト」はまずいらないと思うので削除したい。
あと悩んだのですが、「メールアドレス」も入力する人はめったにいないでしょうから削除してしまおうと思います。

ただ前述の通り、メールアドレスを入力しないとコメントが承認待ちで表示されないという注意書きが出ないので残そうかとも考えたのですが、アドレスを書き込まないであろう大多数の人には関係ないし、先のカスタマイズでこのサイトが承認制だという事は記載したのでスッパリ消してしまうことに決めました。

メールでの返信を望む人には問い合わせフォームの方を利用してもらえばいいのでしょうし。
 

今回のカスタマイズ前の時点でのコメント入力フォームがコレ↓

コメント入力フォーム

このコメントフォームは『Jetpack』を使用しています。

ここからメールアドレスとウェブサイトを取り除くので、最終的には「名前」だけが残ることになる予定です。
 

ではいよいよ実際の作業になるんですが、このアドレス&サイト欄の消し方については去年コメント欄を最初にカスタマイズした時に調べてあったんですよね。

そのやり方は大きく4パターン。

1.「functions.php」を編集
2.「comments.php」を編集
3.「style.css」を編集
4.プラグインを使用

上に行くほどカスタマイズの難易度が上がっていくような感じがしました。

なので一番下の「4.プラグイン」で済ませたいところなんですが、既に17個もプラグインを使用中なのでここは頑張ってコードで対処していこうと思います。
 

まずは「3.style.css」でやろうとしたんですが、調べてみると何やらこのコードは「削除」ではなく「非表示」にする方法のようです。
実際には消えていないんだけど表面上は見えなくなっているというだけ。 あまり推奨されてないっぽい?
 

仕方ないので、「2.comments.php」からやることにしました。 comments.php なら今回のカスタマイズで最初に触れていましたし。

が、こちらもよくよく調べてみると、STINGER系(AFFINGER4含む)テーマではこのやり方は対応していないとのこと。
このサイトはAFFINGER4製なのでこの方法は無理みたいです。
 

で、結局「3.style.css」でいくことにしました。 やり方も超簡単そうだったので。

style.css に、

.comment-form-email,
.comment-form-url{ display:none; }

と書き足すだけ。

楽勝だったぜぇーいとか思いながらコメントフォームの表示を確認してみましたが、メールアドレス欄もウェブサイト欄も消えていませんでした。
 

…まぁ、まだ「1.functions.php」が残っていますから。 まだあわてるような時間じゃない。

functions.php ってのはしくじると恐怖の画面真っ白が待っているので極力手を出したくはなかったんですが、こうなったら覚悟を決めるしかないですね。

ネットからコードをコピペして子テーマの functions.php へ。

が、またもアドレス・サイト欄は残ったまま
 

…なにやら嫌な雰囲気ですね。
表示が崩れるとか真っ白とかでもなく、何も反映されてない。 もうWordPressとは(一応)1年以上の付き合いになりますが、一番ドツボにはまるパターンなんですよね、コレ…。

残る手段はプラグインってことになるのですが、その前に上手くいかなかった原因を知っておきたいですね。

というわけで今まで言われるがままにコピペしてきた方法を、その解説も含めてよく見直してみる。

すると、「3.style.css」で非表示にするやり方の解説に、「消えなかった場合はクラス名が違う可能性があります。」と書かれていました。

そこで「クラス名」とやらを調べるため、右クリックから「ページのソースを表示」。 そして Ctl+F
このコマンドで「ページ内検索」ができるようです。 前回面倒くさがってやり方を調べなかったやつですね。

んでそっからコメントのウェブサイトを検索して "class" と書かれている部分を探してみたんですが、
…よく分かりませんでした。
 

なんかもう私の手に負えるレヴェルでは無くなってきていますが、せめて原因だけでもとネットを徘徊。

すると、今までのコメントフォームの消し方とは異なったやり方を見つけました。

「wp-includes」 内 「comment-template.php」 をいじるやり方。

'wp' …! コレってWordPressの中身ですよね?
今までやってきたテーマの編集よりももっとずっと深いとこにある素人が手ェ出しちゃあならねぇヤベェやつ。

いつもだったらこんなん目も通さずにスルーしとく話なんですが、さっきから全くカスタマイズ作業が進んでいないので、藁にもすがる思いでやってみることにしました。

ものっすごい量のコードが書かれていて目的の部分までスクロールして目を通して探すのは無理くさい量だったので、さっき覚えた「ページ内検索」を使ってみると一発で見つかった。 なにこれ便利。

そん中にあった 'email' と 'url' の中身を空っぽにすることで完了。
これでコメントフォームを形成する一番根っこのプログラムが無くなったはず。

確かな手応えを感じつつ、いざ入力フォームの表示を確認…!

結果は何も変化無し

……これはさすがになんかおかしいですね。
 

ネット上の方法が全て空振りだったということで、これはおそらく私の環境にデフォルトのWordPressと違うナニかがあるはずだと予想。

…そして、思い当たった節が1点。

私のコメントフォームは 『Jetpack』 を使っているという点。

つまり、今まで私がやってきたのはWordPressが用意していたデフォルトのコメントフォームのカスタマイズ法であって、本来やるべきだったのは、Jetpackの用意したコメントフォームをカスタマイズしなければならなかったみたいです。

そうと分かりゃーあとはネットで調べるだけ!

…のはずだったんですが、Jetpackのコメントフォームをカスタマイズする方法が1つも見つかりませんでした。 なぜだ!?

ただ、Jetpackの別の機能をカスタマイズするコードは見つけました。
直接的には関係無いんですが、そのコードを見ると、 'jetpack_○○' というクラス名が使われてたっぽい。

クラス名さえ分かればプラグインでもCSSから非表示にできるのでは?
と思ったので[プラグイン編集]からJetpackの中身のコードを見てみたんですが、まーったく分かりませんでした(ノ∀;`)
 

まー私にしてはよく頑張った方なんじゃないですかね。うん。
原因が特定できただけ上出来ですよ。
丸一日PCとにらめっこでもう頭フラフラですが、最後にあと1つだけ。

「4.プラグイン」を駄目元で試してみます。 原因が上記の私の考えで正しいなら、これで上手くいく訳が無いんですけどね(;´ェ`)

試すのはプラグイン『Advanced Comment Form』

Jetpackもプラグインなので、コメントフォームの機能同士で競合が起きないか心配ですが、諦めるにせよ試せる手段は全て試した上で諦めたいので、バックアップを取った後インストールしてみました。

どうやら競合は起きなかったようですが、「remove website field」、「remove email field」を有効化しても何も変わりませんでした

おしまい。

 

…といきたいのは山々ですが、これではホントにただ時間を無駄にしただけで終わってしまうので、せめて代案、いや妥協案でもいいから何かしらのカスタマイズをして終わりたいです。

んで、考えたのです。
なぜ「メールアドレス」・「ウェブサイト」入力欄を消したいのか?を。

もちろんコメントを書き込む際に不要、利用度が低い、というのはあるのですが、だからって削除までしておく必要はあるのか?

入力したくない利用者はそのまま空欄で送信すればいいだけで、本当に必要としている人ももしかしたらいるかもしれない。
実際、この作りかけのサイトにも3名ほどコメントをくれた方がいまして、内1名はメールアドレス付き、別の1名はウェブサイト付きでのコメントでした。
まさかの利用率3割ですよ。

なので、ここはもう単純に、「メールアドレスやウェブサイトの入力は任意ですよー」とでも書いておきゃー事足りる話だったんじゃーないかと。

今回入力フォームの削除法を載せていた方たちも、「メールアドレスを入力しないとコメントが書き込めないと思い込まないように」とか、要は気軽にコメントしてもらえるようにしたい、というのがそもそもの悩みの種だったわけで。
 

そうと決まれば、注意書きを付け足せばいいだけのカスタマイズです。

理想としては、「ウェブサイト(任意)」みたいに入力項目に直接書き足せればいいのですが、承認制の注意書きのカスタマイズをしたときにも言いましたが、文言を書き換えられたのは一箇所だけだったんですよね。
そしてそこは既に承認制の注意書きで使ってしまっている。

テキストを表示するとなるとウィジェットがまず候補に挙がりますが、今回はコメント欄の中、あるいは間に書き入れたいので、ウィジェットでは対応できません。(たぶん)

さーどうしたもんかと焦げついた脳ミソをしぼりあげてみる。

今回の最初のカスタマイズでいじった comments.php での展開式ボタンのコードを見て思い出したんですが、このボタンって作るとき、テキストを表示→CSSでボタンに装飾、みたいな流れだったんですよね、たしか。

なので php から直に表示させるテキストをコードとして書き入れておけるはず。

問題は私に自分でコードを作る知識なぞ無いに等しいということ。 由々しき問題ですね(-∀-`;)

とりあえず駄目もとで、私が知っているタグは<p>と<br>だけなので、<p>でテキストを囲ってみる。

そしたらなんと! コメント欄展開ボタンのすぐ下に今入力したテキストが表示されたじゃーありませんか!

php ってテキストエディタと同じタグが使えるの??

どうやらそうっぽいので、テキストエディタで装飾しておいたテキストを用意し、 comments.php のコード内のいたるところに差し込みまくっていく。
コードが読めんのでね、トライ&エラーよ。(当てずっぽうとも言う)

そうしてついに! やっと! どうにか!
形にすることができました~

コメントフォーム(完成)

…分かります? 展開ボタンのすぐ下に「※メールアドレス・名前・ウェブサイトの入力は任意です。」と書き足したのです。

これだけ!! たったこれだけの事にどれだけ…!

…いや、もういいや。 だってできたんだもの。 クソ妥協案ですが。

 

おわりに

はーい、今回のカスタマイズはこれにて完了~

結果的にはちょちょっと文字を変えたり足したりしただけですね。 めっちゃくちゃ疲れたんですが(^^;
 

それでも良いこともありましたね。
phpファイルにサイト上に表示させたい言葉を直接書き込めるというのを知れました。

これはサイトデザインの上でかなり役に立ちそうな気もします。
ウィジェットよりも細かくカスタマイズできるんじゃないでしょうか。

ま、そんなことまでやりだしたら到底今月中にサイト完成なんてできないでしょうが。
…ていうかもう来週末で3月終わりか。

ビルドダイバーズ開始前にと目標を決めてから私としてはかなりのペースで作業を進めてはいるんですが、かなり雲行きがあやしくなってきましたね(-∀-`;)
 

今はとにかく進み続けるだけですね。 止まるんじゃねぇぞってやつ。

さて、次回なんですが…

面倒くさそうな作業はだいたい終わったはずなんですよね。
なので細かいカスタマイズをいくつかまとめてやっちまいたいと思います。

-ウェブサイト作成

Copyright© ガンプラ気分 , 2020 All Rights Reserved.