コメントフォームのカスタマイズ―メールアドレス必須を解除して、代わりに画像認証を取り入れる


WordPressのコメントフォームには、メールアドレスが必須と設定されています。これでは、なかなかコメントしにくい雰囲気かもしれません。かといってメールアドレス入力がなくなると、スパムコメントが心配です。

それで、メールアドレス必須をなくすとともに、画像認証(文字認証)システムを取り入れてみました。画像認証とは、GoogleやYahoo!などにアカウント登録する際に表示される、読みにくい文字を入力させるものです。これはこれで厄介ですが、メールアドレスのような個人情報を入力させるよりましでしょう。

なお、使用しているテーマはTwenty Elevenです。

スポンサーリンク

この設定は6つのステップからなります。

1.メールアドレスの必須設定を外す

1.ダッシュボードの左パネル→設定→ディスカッションを選択
2.「名前とメールアドレスの入力を必須にする」のチェックを外す

これでメールアドレスが必須ではなくなりますが、名前も入力しなくてよくなってしまいます。

2.名前の入力を必須にする

wp-comments-post.phpというWordPressの設定ファイルを書き換えます。wp-comments-post.phpは、サーバーにインストールしたWordPressフォルダのすぐ中にあります。

wp-comments-post.phpをテキストエディタで開き、

if ( get_option('require_name_email') && !$user->ID ) {
    if ( 6 > strlen($comment_author_email) || '' == $comment_author )
        wp_die( __('Error: please fill the required fields (name, email).') );
    elseif ( !is_email($comment_author_email))
        wp_die( __('Error: please enter a valid email address.') );
}
if ( '' == $comment_content )
    wp_die( __('Error: please type a comment.') );

…と書いてある部分を

//名前だけ必須
if(!$user->ID){
    if ('' == $comment_author)
        wp_die('名前を入力して下さい。');
}

…に書き換えます。最後の「} 」を忘れないようご注意ください。以下のサイトを参考にさせていただきました。

orthak.com» Blog Archive » WordPress コメント時の必須項目 メールアドレス欄削除

これで名前は必須になりますが、コメントフォームに「メールアドレス」の欄が残ってしまいます。

3.cssでメールアドレス・ウェブサイトの欄を消す

1.style.cssの子テーマを作ります。プラグインOne-Click Child Themeを使えば、自動的に作ってくれます。以下のサイトが参考になります。

pc.casey.jp » [WordPress] 子テーマを使ったテーマ改造2

2. ダッシュボード左パネル→外観→テーマ編集 から、子テーマのstyle.cssに、以下の文章を書き加えます。

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

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

これで、「メールアドレス」と「ウェブサイト」の入力欄が非表示になります。この部分は以下のサイトを参考にさせていただきました。

WordPressのコメントフォームのメールアドレス入力欄を消去する方法 - ワードプレステーマTCD

メールアドレス必須を無くすだけであれば、ここまでで構いませんが、スパムを防ぐために、代わりに画像認証を取り入れたいと思います。

4. SI CAPTCHA Anti-Spamプラグインで画像認証を導入

1.ダッシュボードの左パネル→プラグイン→新規追加 から、SI CAPTCHA Anti-Spamを検索してインストール。画面の支持に従って有効化します。

2.エラーメッセージを日本語化します。ダッシュボードの左パネル→プラグイン→インストール済みプラグインの一覧 からSI CAPTCHA Anti-Spamを探し、「編集」をクリックします。

wp_die( __(‘Error: You entered in the wrong CAPTCHA phrase. Press your browser’s back button and try again.’, ‘si-captcha’));

wp_die( __(‘Error: You did not enter a CAPTCHA phrase. Press your browser’s back button and try again.’, ‘si-captcha’));

…を探し、赤色部分を以下に変更します。

エラー: 表示されている画像の文字が正しく入力されていません。ブラウザの[戻る]で戻って画像の文字を再度入力してください

該当部分を探すのが大変ですが、全文をテキストエディタにコピーして検索すると見つけやすくなります。以下のサイトを参考にさせていただきました。

コメントへのスパム対策・プラグイン「SI CAPTCHA Anti-Spam」 | WordPressの使い方

 以上で、コメント欄に画像認証が表示されます。ログインしていると、確かめることができないので、ログオフするか、別のブラウザを開くかして、反映されているかどうか確認してください。もし、「メールアドレス」や「ウェブサイト」の欄は消えているのに、画像認証の位置がおかしいか、あるいは表示されていないようなら、次のステップに進んでください。

5.comments.php の子テーマを編集する

1.comments.php の子テーマを作ります。FTPソフトで、サーバー内のフォルダwordpress→wp-content→themesの中にある親テーマ(例えばフォルダ名twentyeleven)のフォルダから、子テーマ(例えばフォルダ名twentyeleven-child[自分で設定した名前])にcomments.phpをコピーします。一度親テーマのフォルダからローカルにダウンロードし、それを子テーマのフォルダにアップロードするとよいかもしれません。

なお、ここで、他のphpファイルも同じように子テーマを作っておくと後々便利です。ただし、function.phpだけは、そのままコピーしてはなりません。ダッシュボードが真っ白になったしまいます。これはfunction.phpに含まれる余白のせいらしいですが、必要が生じるまでは、function.phpの子テーマ作成には取り掛からないのが無難でしょう。

2.ダッシュボード左パネル→外観→テーマ編集 から、子テーマのcomments.phpを編集します。

▼画像認証が表示されているが場所がおかしい場合
<?php do_action(‘comment_form’, $post->ID); ?>を探し、位置を変える。

▼画像認証がまるで表示されていない場合
<?php do_action(‘comment_form’, $post->ID); ?>を新しく書き加える。

上の文章を置く位置は、試行錯誤してみてください。残念ながら、わたしの知識では、どのあたりに置くとよいのかよくわかっていません。とりあえずわたしのサイトでは、

<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through ?>

…の上に置いてみたところ一応うまくいっています。なにぶん、一ヶ月前までWordPressについ知らなかった素人が書いていますのでご容赦ください。

6.親切な注意書きを設置する

画像認証欄には「キャプチャコード」と書かれていますが、これでは、なんのことかわからない人もいるかも知れません。コメントフォームの一番上の「コメントを残す」に注意書きを追記することで対処します。

comments.php の子テーマの末尾にある以下の部分を探します。

<?php comment_form(); ?>

これを以下のように書き換えます。

<?php comment_form(array(
'title_reply'=>'コメントをどうぞ<br><span style="font-size: 0.5em">「キャプチャコード」には画像の英数字を入力してください</span>',
                        ( $req ? $required_text : '' ) . '</p>',
)); ?>

日本語部分の文章は、自由に書き換えてください。もし日本語で表示できないならダッシュボードの 設定→表示設定 から「ページとフィードの 文字コード」がUTF-8になっているか確認してみてください。

この部分は「テンプレートタグ」といって、コメントフォームをさまざまにカスタマイズするために使えるそうです。「3.cssでメールアドレス・ウェブサイトの欄を消す」をこの方法で行なうこともできそうです。以下のサイトが詳しく、参考になりました。

以上で、コメントフォームのカスタマイズは終わりです。

コメントフォームの表示のカスタマイズ | memocarilog

WordPressのテンプレートタグを使ってコメントフォームをカスタマイズする方法 | Oxy notes

 

スポンサーリンク

スポンサーリンク
WordPress