Simplicityを少し改造してみた 番外編 part23 コメントのカスタマイズ

Simplicity公式フォーラムに「コメントの名前欄にデフォルトで名前を入れておくには」というトピックが立ちまして、そういやあんまりコメント欄はいじっていなかったなと言うことでcodexを読み漁りました。

該当のトピックでは、投稿する時に予め「匿名」なりと最初から名前を入れておきたいと言う内容でした。添付されている画像を見るとコメント欄と名前だけがあり、おそらくは誰でもが気軽にコメントできるような構成にしたいのではなかろうかと想像できます。

まずここで、コメント欄、名前欄だけにするにはどうするかと言うことから始めないといけません。
確かに、名前とメールは必要なのはわかりますが、ウェブサイトはそんなに重要ではありませんよね。コメントの中に書いてもよいわけですし。codexのfieldの部分を見ると、デフォルトで、

このように設定されているらしいです。

で、urlの部分がなくなったらどうなるんだろうと言うことで、無くしてみると、名前とメールだけになりました。ここで設定されていると言うのがわかったので、ひとまず名前だけにしてみます。

このauthorと言う配列を見ると中にinputタグがあって、valueの部分に$commenter[‘comment_author’]というのがあります。ここに、名前が入ると言うことは、

このようにして、名前がない場合に匿名、すでに何かしら入れてある場合はそれを表示すれば良い感じになるだろうと言うことで、書いておきます。form部分なのでcookie等でブラウザに保存されている内容が入るような感じです。cookieで保存して無い場合は上記の場合「匿名」と言うのが名前欄にセットされます。

構造的には、

このような感じです。

ここで、

この部分にて必須項目が$reqの値によって入ったり入らなかったりと言うのはわかりますが、$reqは勝手に何かしらが判断しているものと思ったら、codexに続きが書いてあって、

このようになってました。最初にフォーラムに返信した時はこれを見逃していたんですが、なるほど$reqというのはディスカッション設定の、名前とメールの設定が有効になっているかどうかを判断していると言うわけですね。
フォーラムの返信を見るにjQueryの方でなんとか行けたみたいだったので、まぁ良いかと思っていたんですが、最初に僕がレスをした内容が親テーマのcomments-default.phpをいじる内容であったため、親テーマのアップデートで上書きされてなくなってしまい、また設定し直さないといけないと言う事なので、何かしら子テーマfunctions.phpに書くことでそれを回避できないものかと思っていました。

codexには上記記載しかありませんでしたが、フォームの中で使われている$html_reqを利用するためには、

が必要です。requiredとはブラウザで入力必須にし、何かしらを入力するまで投稿できないようにする仕組みです。

codexには、その関数がwordpressのどのファイルに書かれているかのソースコードへのリンクがあり、そこをちらほら眺めていると、comment_form_defaultsと言うフックがあったので、それを検索してみますと、どうやらwordpress4.6より「デフォルトコメントフォームアクション /wp-comments-post.php は comment_form_defaults フィルターを介して変更可能です」とありました。なるほど、と言うことで早速そこに向けて関数を書いてみることにしました。それが以下です。

ひとまずできあがったコメントフォームを変更する関数

最初この関数は、コメントの注意書きを変更しようとしていたものだったので関数名がそのままですが、まぁいいやと言うことでそこに追記しています。関数名は各々良い感じにつけてください。

これらは、フォーラムの該当トピックの最初にレスした内容を少し変更・修正して、以下のような内容になっています。

内容的には、$fields部分で名前とメール欄の設定をして、$argの中で、

として、展開してます。同じくして、$argの設定がコメントフォームの内容になります。設定できる内容は、codexのcoment formのパラメータ部分に書いてあります。

コメント、名前、メールと言う並びを名前、メール、コメントの並びにする関数

ディスカッションの設定で名前とメール必須部分に対応するようにした

これは、gravatarを利用しようとする際にメールが必要になるので、メール欄を無くしてしまうと、コメント欄にアバターアイコンを表示する際全部一定になってしまう事から、名前欄と同様に、匿名のメールアドレス(anonymous_guest@example.com)を入れるようにしました。
ここは何かしら入っていれば投稿できるわけですが、元々の質問内容が「手軽に投稿できるように」と言うのが目的であれば必要ない部分なんですけれども、中には常連さんとか知り合いの人が投稿する場合もあるだろうと言うことで、入れてあります。

placeholderとpattern属性、require属性追加

何かしら入っていれば投稿できると言う点で、仮にメールアドレスの体をなしていない何かしらの文字が入った場合に弾くことができるように、念の為pattern属性も入れておきました。これは、もし、@example.comしか入っていないとして投稿すると(送信ボタンを押すと)、ブラウザが「@の前を入力してください」みたいなメッセージがでて投稿を阻止できます。
他にもanonymous_guest@の場合、@の後ろを入れてくださいというようなメッセージも出ます。

名前欄には、requireが入っており、名前が何も入っていない状態では投稿できないようになっています。関数で名前を入れることを必須にと言うこともできるわけですが、ブラウザで弾くのが良いだろうと言うことです。
メール欄にはrequireの代わりにpattern属性を入れてありますが、実質名前だけは必須にすることでメールは適当でもその形になっていればokというようにしました。

投稿時の注意書きの変更

上記の変更に併せて、注意書きを変更しています。ここらは好きに書いても良い部分なので上記関数の「comment_notes_before」の配列の内容を書き換えれば良いだけです。一応cssで非表示にもできるように、class等も入れたりしています。

スタイルのサンプル

See the Pen xEqJaP by Hidekichi (@Hidekichi) on CodePen.

上記の関数を適用して、スタイルするとこんな感じにできます。関数内の出力するhtml部分を変更してjQuery等を利用するともっと色々と手を加えることが可能です。

コメントフォーム書き換え関数とスタイルをテストで適用する場合の注意点

コメントフォームは投稿テスト時にcookieを発行するので、必ずプライベートウィンドウやシークレットウィンドウを利用してcookieを受けないようにして、テストしてみてください。

名前欄は空欄にはできませんが(requireが入っているため)設定で入っている「匿名」が残ったり、メール欄は適当な体をなしていれば投稿できるので、これらを通常利用の時に反映させないようにするためです。

スポンサーリンク

シェアする

フォローする