はぴすぷ

【WordPress】コメント入力フォームのカスタマイズ①ウェブサイトを削除する（メールアドレスにも対応）

      2015/09/22

最近スマホで自分のブログがどういう風に表示されるのかをチェックしてまして、コメントの入力フォームがやたらでかくて邪魔だなーと思いました。

IMG_5319

画面全体でも収まっていない…。

特にコメントなんてしてくれる人は、ごく僅かだろうし、面倒くさい人たちが現れると厄介なので、いっそ取っ払ってしまおうかとも考えました。

でも良識のある読者の方と、コミュニケーションが取り辛くなるのは少しもったいない。

そんな事を考えていると、1件のコメント通知がきた。

この記事に助けられたのでコメントでお礼を言わせて頂きます！
ちょっとwordpressを触ってみたいと思い立ち
サーバーを用意せずとも試すだけならXAMPPにてローカルで出来るとの事で試してみたのですが
数ある解説サイト通りの画面にならず困っていました。

ここを見て無事にwordpressのインストールができて触れるようになりました。
知識0なのでwordpressはこれから色々と学ばないといけないですが
まずは入り口に立てた事に喜んでいます。

ありがとうございました。

よし！コメントフォームを改善しよう( ･`д･´)

スポンサーリンク

コメント入力フォームからウェブサイトを削除

とりあえず、メールアドレスもウェブサイトもいらんだろうと、最初は考えました。でも、メールアドレスは最終的に残しておくことにしました。

メールアドレスを残しておいた理由

メールアドレスを残しておいた理由なんですが結構色々あります。

秘密にメールアドレス伝えられる手段である

まず連絡取り合いたいという人から管理人に秘密にメールアドレス伝えることができます。

私の場合はサイドバーにメールアドレスを載せているので、そちらからメールは送れるのですが、気づかない人もいると思うので。今後、お問い合わせフォーム用意したタイミングで消すかもしれません。

Gravatarによるアバター連動が取れなくなる

コメントの横にサムネイル画像が表示されるのですが、あれはGravatarに登録したメールアドレスとアバター画像を元に表示しています。なので、管理人以外は汎用アイコン固定になってしまいます。とは言え、まともにアドレス入力して、Gravatarにも登録している人がそこまでいるか…ですけどね(；・∀・)

自分の書いたコメント（承認待ちの状態）が表示出来なくなる

これが理由として一番大きいです。

WordPressのデフォルト設定では新着コメントは管理人が承認するまで公開されません。これは変更することは可能ですが、トラブルになる可能性が高いので即表示させるのはオススメ出来ません。

なので、通常はコメントしたばかりの人にはコメントは受け付けたけど、承認待ちですよと表示されます。

SS_0821

これはどういう仕組みでコメントした当人にだけに表示されているかというと、まずCookieでコメントフォームから送信したパラメータを管理しています。

SS_0822

このCookieのメールアドレスが、承認待ちの中のコメント投稿者のメールアドレスと一致しているかでコメントを表示するかを決めています。

なので、メールアドレスを入力出来ないと、この比較が行えないので承認待ちのコメントが表示されず、何度コメントしてもその記事のページが更新されただけのような見え方になります。当然、コメントした人はコメント出来たか不安になりますし、あるいは、せっかくコメントしたのに、このサイトは壊れていると怒り始めるかもしれません。

これを回避するには、メールの入力を必須にするか、管理人が承認するまで画面には反映されません。と言った注意文言を追加する。あるいは承認待ちのコメントの数を表示すると言った対策が必要です。

この辺りは今後メールの項目も削除するつもりでいるので、対応した時に記事を書きたいと思います。

入力フォームのカスタマイズ

対応の方法はテーマによって異なると思います。
触る対象のファイルはテーマの中のcomments.phpです。
私の使用しているSTINGER5のコードはこちら。

$args=array('title_reply' => 'Message',
'
lavel_submit' => ('Submit Comment')
);
comment_form($args);
?>

この部分がコメントフォームを作り出している部分です。
label_submitをlavelとスペルミスってるので送信ボタンの文字は上書き出来てないですね(ﾉ∀`)ｱﾁｬｰ
このcomment_form()って関数がフォームのhtmlを生成して書き出します。
wp-includes/comment-template.phpに実装があるので気になる人は見てみるといいでしょう。
これに渡すパラメータで生成されるフォームをカスタマイズできます。
今回は入力項目を制御する「field」がキーの配列から、ウェブサイト「url」を削るように変更します。メールアドレスも削りたいなら、「email」も削りましょう。

// wp-includes/comment-template.phpからのコピー
$req      = get_option( 'require_name_email' );
$aria_req = ( $req ? " aria-required='true'" : '' );
$html_req = ( $req ? " required='required'" : '' );
$html5    = 'html5' === $args['format'];
$fields   =  array(
    'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label> ' .
                '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . $html_req . ' /></p>',
    'email'  => '<p class="comment-form-email"><label for="email">' . __( 'Email' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label> ' .
                '<input id="email" name="email" ' . ( $html5 ? 'type="email"' : 'type="text"' ) . ' value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30" aria-describedby="email-notes"' . $aria_req . $html_req  . ' /></p>',
);
$args = array('title_reply' => 'コメントを残す',
              'fields' => $fields,
);
comment_form($args);
?>

もし、使用しているテーマが普通にhtmlでフォームを作っているようならurlの部分を削るだけでOKです。

でも出来るなら設定されている「名前やメールアドレスの必須にする」に対応して、ユーザーが前回入力した値を埋め込んであげる処理等はあった方が良いかなと思います。

これで要らない項目を削れます。

SS_0823

ほんの少しスッキリ(´・ω・｀)

終わりに

とりあえずウェブサイトの分は減ったので、少しだけスッキリしましたが、それでもでかくて邪魔です…。

ほとんどのユーザーが使わない要素で場所を取られるのはもったいない。特にスマホだと、記事終わりから、広告・SNSボタン・コメント投稿フォームとかなり画面をスクロールしないと次のコンテンツが現れないので、そのまま帰ってしまう高くなります。

なので、最初は小さく表示しておいて必要のある人だけ大きく表示出来るようにしたいと考えました。

次回はコメントフォームを最初は閉じておいて、必要に応じて表示を切り替えられるようにするカスタマイズを行いたいと思います。ある程度ローカル環境ではテストしているので、明日中には書き上げる予定です( ･`д･´)それでは。

次書きました。
【WordPress】コメント入力フォームのカスタマイズ②jQueryのスライド機能で表示を切替える

 - STINGER, WordPress