WordPress に reCAPTCHA をプラグインなしで即導入

WordPressにreCAPTCHAを設置

福岡在住ウェブデザイナー。 WordPress のカスタマイズを、「見やすさ」と「使いやすさ」にこだわり紹介しています。

カスタマイズ箇所コメントフォーム・ログインページ
カスタマイズ方法PHP
テンプレート変更基本なし
コピペの可否100% 可能

サイトを運営していて困るのがスパムコメント。

サイト運営者にとっても、サイト訪問者にとっても、迷惑な存在です。

そこで導入したいのが reCAPTCHA 。

Google が導入を推奨する reCAPTCHA は、スパムコメントやスパムメールからサイトを強力に守ってくれます。

WordPress で運営するこのサイトには自前で導入したので、忘れないように導入方法を記事に残しておきます。

Simplicity であれば、子テーマのみでできるので楽。

reCAPTCHA に登録

reCAPTCHA を使うためには、まず reCAPTCHA への登録が必要です。

Google アカウントにログインした状態で、 reCAPTCHA の公式サイトより登録します。

今回登録するのは reCAPTCHA V2 。

発行されるキーの管理名となる Label は、サイト名などご自身が管理しやすい名前にします。

Domains は、サイトドメインを入力します。複数のサイトを登録する場合には、 1行毎に 1つのドメインを入力。

reCAPTCHAの登録画面

登録後は「 Site key 」と「 Secret key 」が発行されます。この 2つは、サイトに reCAPTCHA を導入する際に必要です。

スクリプトの読み込み

「 Site key 」と「 Secret key 」を入手した後は、サイトに reCAPTCHA を設置していきます。

まずは以下の reCAPTCHA のスクリプトを <head> 内で読み込ませます。

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

Simplicityであれば、子テーマの header-insert.php に追加すれば OK 。

Contact Form 7 の reCAPTCHA 機能を使う場合

このサイトでは、 Contact Form 7 でお問い合わせページを作成しています。

Contact Form 7 には reCAPTCHA 機能が備わっているので、お問い合わせページの reCAPTCHA は Contact Form 7 に任せる。

でも、Contact Form 7 の reCAPTCHA 機能を使うと、 Contact Form 7 もお問い合わせページで reCAPTCHA スクリプトを読み込みます。

全てのページの <head> 内で reCAPTCHA スクリプトを読み込むと、お問い合わせページで同じスクリプトが 2つ読み込まれエラーが出ます。

そこで、このサイトでは投稿ページのみでスクリプトを読み込むことにしました。

<?php if ( is_single() === true ) { ?>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<?php } ?>

Simplicity であれば、子テーマの header-insert.php に上記コードを追加します。

これでお問い合わせページでのエラーを回避。このサイトには固定ページにコメント欄はないので、スクリプトは読み込まなくても大丈夫。

reCAPTCHA を設置

次にコメントフォームに reCAPTCHA を設置します。

設置方法は 2種類。

functions.php で設置

簡単なのは functions.php を使っての設置。

コメントフォームのテンプレートを変更したくない方に適した方法です。

以下のコードを子テーマの functions.php に追加します。

function add_recaptcha_comment($fields) {
    $fields['recaptcha'] = '<div class="g-recaptcha" data-sitekey="ここにSite keyを入力"></div>';
    return $fields;
}
add_filter('comment_form_default_fields','add_recaptcha_comment');

2行目のここにSite keyを入力に、発行された「 Site key 」をご入力ください。

これでコメント送信ボタンの上に、reCAPTCHA が設置されます。

コメント送信ボタンの上に設置されたreCAPTCHA

テンプレートで設置

もう 1つの設置方法が、コメントフォームを呼び出しているテンプレートに直接設置するもの。

すでにコメントフォームのテンプレートを変更されている方に適した方法です。

ほとんどのテーマは、 comments.php でコメントフォームを呼び出しているはず。

Simplicityであれば、 comments-default.php ( 23行目から 29行目)か comments-thread.php ( 21行目から 26行目)です。

例えば以下のようにコメントフォームを変更します。

$commenter = wp_get_current_commenter();
$req = get_option( 'require_name_email' );
$aria_req = ( $req ? " aria-required='true'" : '' );
$fields = array(
    'author' => '<p class="comment-form-author"><label for="author">' . __( 'Name' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
        '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
    'email' => '<p class="comment-form-email"><label for="email">' . __( 'Email' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
        '<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',
    'url' => '<p class="comment-form-url"><label for="url">' . __( 'Website' ) . '</label>' . 
        '<input id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /></p>',
    'recaptcha' => '<div class="g-recaptcha" data-sitekey="ここにSite keyを入力"></div>',
);

$args = array(
    'fields' => apply_filters( 'comment_form_default_fields', $fields ),
);

comment_form($args);

11行目で $fields に reCAPTCHA を追加しています。

発行された「 Site key 」の入力をお忘れずに。

コメントフォーム変更の詳細は関数リファレンス/ comment form をご参考ください。

reCAPTCHA 認証を動かす

あとは reCAPTCHA の認証を動かせば終わりです。

子テーマの functions.php に以下のコードを追加します。

function verify_captcha( $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=ここにSecret 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 ) );
    }
}
add_action( 'pre_comment_on_post', 'verify_captcha' );

3行目のここにSecret keyを入力に、発行された「 Secret key 」を入力します。

コードは「 Using Googles NoCaptcha ReCaptcha In WordPress 」を参考にしており、 2つの処理を追加しています。

チェックが入っていない時には、「認証に失敗しました「私はロボットではありません」にチェックを入れてください。」と記載したエラーページに移動します。

reCAPTCHAにチェックが入っていない時のエラーページ

「戻る」をクリックすると元のコメントフォームに戻る上に、フォームに入力した内容は消えずに維持されます。

人には優しい作りになっているはず。

また、ブラウザの javascript が無効になっており、 reCAPTCHA が表示されていない状態でコメントを送信すると、「ロボットと判定されました あなたがロボットでなければ、ブラウザの javascript を有効にしてください。」とのエラーページに移動します。

ブラウザのjavascriptが無効の時のエラーページ

ただし、ログインユーザーは、エラーページに移動しません。

これでコメントフォームに reCAPTCHA を設置するカスタマイズは終了です。

ログイン画面にも reCAPTCHA を設置する

先に紹介した「 Using Googles NoCaptcha ReCaptcha In WordPress 」に記載のとおり、 WordPress のログインページにも自前で reCAPTCHA を設置できます。

WordPressのログインページに設置されたreCAPTCHA

一部正常に動作しない箇所があったので、変更しまとめます。

設置するには、子テーマの functions.php に下記のコードを追加。

function enqueue_recaptcha_scripts() {
    wp_enqueue_script( 'recaptcha', 'https://www.google.com/recaptcha/api.js' );
}
add_action('login_enqueue_scripts', 'enqueue_recaptcha_scripts');

function display_recaptcha() {
    echo '<div class="g-recaptcha" data-sitekey="ここにSite keyを入力"></div>';
}
add_action( 'login_form', 'display_recaptcha' );

function login_verify_captcha( $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=ここにSecret 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 ) );
        }
    }
    return false;
}
add_action( 'wp_authenticate', 'login_verify_captcha' );

7行目のここにSite keyを入力に、「 Site key 」を入力。

13行目のここにSecret keyを入力に、「 Secret key 」を入力。

よりセキュリティを高めたい方に最適。

詳細な説明は「 Using Googles NoCaptcha ReCaptcha In WordPress 」をご参照ください。


reCAPTCHA は、 WordPress プラグインを使ってもサイトに導入できます。

でも、プラグインはどれも絶句するほどサーバーに負荷をかけ、サイトを遅くします。自前でできるのなら、自前でやる。

そうすればサイトは速くなり、サイト訪問者は喜ぶはず。サイト訪問者に喜ばれると、サイト運営者も喜ぶ結果を得られるはずです。

Facebook ページにいいね!をする
Twitter でフォロワーになる

シェアする

URL をコピーする