スパムコメント激減!reCaptChaの導入

ブログでコメントを受け付けていると、記事とは関係のないurlの列記や自社商品のリンクを配したいわゆるスパムコメントに悩まされます。こんな時は、googleのreCaptcha(利キャプチャ)を導入したい。

スパムコメントを撃退!reCaptchaを導入する
スパムコメントを撃退!
reCaptchaを導入する


Initializing...

当方でも、スパム防止のプラグインAkismet Anti-Spamは導入済みですが、reCaptchaを導入後は、スパムコメントが激減いやほぼ無くなりました。今回こちらで導入したのは、プラグインも使わずに、いくつかのファイルを直接編集するものです。そんなに難しくはなかったので、これを読んで導入してみてはいかかでしょうか?

ここから先に進める場合は、Googleのアカウントが必要ですので、もしまだの場合はGoolgeにユーザー登録しておいてください。

実現すること

本記事、WordPress標準のコメント受付け時にreCaptchaを利用できるようにする。

導入に際しては、WordPress4.9.8を使用しています。

画像を拡大表示する
reCaptcha -

reCaptcha – “私はロボットでありません”

reCaptchaの導入は簡単4ステップ

以下順番に説明します。

  1. reCaptchaに登録して、サイトキー、シークレットキーのペアを取得する
  2. ヘッダにhttps://www.google.com/recaptcha/api.jsを読み込む
  3. コメントフォームにreCaptcha用のフィールドを追加
  4. function.phpにpre_comment_on_postをフックし、アクションを追加

手順1:reCaptchaに登録

以下のサイトにアクセスしてください。もしgoogleのログインを求められた場合は、あらかじめ準備したアカウント、パスワードでログインしてください。

下記に示した登録フォームが表示されますので、以下の内容で登録します。

これだけ入力したら、画面右下のRegisterボタンで登録します。

画像を拡大表示する

バージョン3を選んで、登録ドメインを入力しましょう

  1. 識別名(ドメイン名でもなんでもかまいません)
  2. 本執筆時点ではreCaptchaはV2とV3のどちらかを選べますが、迷わず最新のV3をえらびましょう。
  3. 登録したいドメインを1行に1つずつ入力します。※のフィールドはV3のみ表示します。
  4. Accept The reCAPTCHA Term of Serviceのチェックはいれないと登録出来ません。チェックしてください。

無事登録されると以下のような登録内容が画面上に表示されます。このうち、①サイトキー②シークレットキーは一番大事なので、ドメイン名とともにメモしておいてください。

画像を拡大表示する
表示された内容から、サイトキー/シークレットキーをメモ

表示された内容から、サイトキー/シークレットキーをメモ

手順2:ヘッダーでapi.jsをロードする

WordPressの場合は、テーマフォルダー内のheader.phpのヘッダー部の最後(</head>の直前)に、下記の行を入力し、api.jsファイルをロードするようにしてください

<script src='https://www.google.com/recaptcha/api.js?render=(sitekey)'></script>

上記コーディング中,site keyは、先に取得してメモしておいたサイトキーに置き換えてください。

 

 

手順3:コメントフォームにreCaptchaフィールドを追加する

手動でフィールドを追加する場合は、下記のhtmlを表示したい場所に追加する

<div class="g-recaptcha" data-sitekey="(site key)"></div>

※上記コーディング中.site keyは、先に取得してメモしておいたサイトキーに置き換えてください。

手順4:function.phpにpre_comment_on_postをフックし、アクションを追加

WordPressのテーマフォルダ内にあるfunction.phpを編集し、pre_comment_on_postをフックし、アクションを追加する。下記のコーディングをそのまま追加すれば良い。

add_action( 'pre_comment_on_post', function( $parameter = true ) {
    if( isset( $_POST['g-recaptcha-response'] ) ) {
        $response = json_decode( wp_remote_retrieve_body( wp_remote_get( 'https://www.google.com/recaptcha/api/siteverify?secret=(seacret key)&response=' .$_POST['g-recaptcha-response'] ) ), true );
        if( $response['success'] ) {
            return $parameter;
        } elseif( !$response['success'] ) {
            wp_die( '<h1>認証に失敗しました</h1><p>「私はロボットではありません」にチェックを入れてください。</p>', '', array( 'back_link' => true ) );
        }
    } elseif( !isset( $_POST['g-recaptcha-response'] ) && !is_user_logged_in() ) {
        wp_die( '<h1>ロボットと判定されました</h1><p>あなたがロボットでなければ、ブラウザの javascript を有効にしてください。</p>', '', array( 'response' => 403, 'back_link' => true ) );
    }
});

※上記コーディング中、seacret keyは、先に取得してメモしておいたシークレットキーに置き換えてください。

動作確認

上記の4ステップが済んでいれば、既にコメントフィールドにreCaptchaが表示され、”私はロボットでありません”にチェックをいれなければ、コメントを送信できないはずです。

もし、”私はロボットでありません”フィールドが表示されなかったり、動作しない場合は下記の点について詳しく調べてみてください。

  • サイトキーとシークレットキーが入れ替わっていないか?
  • これらのキーが正しく入力されているか、特に先頭または最後尾の文字が正しいかどうかチェックしてください。

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

スポンサーリンク
ページ上部へ戻る