【Cocoon】プラグインなしでreCAPTCHA v2 をコメントに導入【WordPress】

サイト運営

2019.02.252021.11.15

私のサイトはコメント欄を開放していません。理由はいくつかありますが、一番の理由は需要が無い割にスマホ表示の時にスペースを取るからです。

WordPressは、Akismet Anti-Spamがスパム対策の標準としてインストールされるので、コメント欄を開放する場合は、Akismet Anti-Spamに登録して有効にしなさいということなのだと思います。そのためだけに登録するのはちょっと、と思っている人はreCAPTCHAが使えるのではないかと考えると思います。

最近、reCAPTCHA はv3がリリースされました。 v2の時代にInvisible reCAPTCHAと呼ばれていたものが正式版になったのだと思っています。

この記事では、Akismet Anti-Spamは使いたくない、reCAPTCHAをコメント欄に使いたい、という人に、reCAPTCHA v2をプラグインなしでWordpressに導入する方法を説明しています。また、reCAPTCHA v3がリリースされたけど使いにくいのでv2に戻したいという人にも参考になるとおもいます。

この記事で分かること

reCAPTCHA v3のイヤなところ
1. reCAPTCHAのアイコンが邪魔
2. reCAPTCHA v3はセンシティブ
reCAPTCHAのv2って今でも使えるの？
reCAPTCHA v2をプラグインなしで導入する方法
1. スクリプトの読み込み
  1. Cocoonの子テーマtmp-user/head-insert.phpを編集
2. コメントフォームで reCAPTCHA を有効化する
  1. コメントフォームにreCAPTCHAを設置
  2. reCAPTCHA 認証を動かす

reCAPTCHA v3のイヤなところ

reCAPTCHAのアイコンが邪魔

reCAPTCHA v3を導入すると監視アイコンが常時表示されるようになりかなり目ざわりになります。固定ページのお問い合わせフォームだけであれば、そのページ以外で消す方法があります。

参考：Google reCAPTCHA v3のアイコンを消す方法

しかし、コメント欄で使用する場合は投稿ページに常時表示する必要があります。アイコンが邪魔だとしても場所を変えるぐらいしかカスタマイズできません。

Luxeritasだとテーマの機能としてreCAPTCHAのv2/v3どちらも対応していますので、reCAPTCHAのv2を選べばとりあえず問題を回避できます。

しかし、CocoonだとそもそもreCAPTCHA に対応していません。

Cocoonの場合は、Akismet Anti-Spamが推奨プラグインになっているので、そもそもreCAPTCHAに対応する気が無いのかもしれません。

reCAPTCHA v3はセンシティブ

いぜん、CocoonとContact form7の最新版の組み合わせでメールがスパム判定されて送れないという記事を書きました。

参考：【Cocoon】Contact form 7 5.1.1でメール送信できない【全てスパム判定】

解決策は、バージョンを落とすしかないというもので、reCAPTCHA v3は使いにくい印象があります。

reCAPTCHAのv2って今でも使えるの？

reCAPTCHA v2は今でも使えます。アイコンが常時表示されるreCAPTCHA v3ではなく、コメント欄だけに表示されるreCAPTCHA v2の方が好みだという人はプラグインなしでコメント欄に導入する方法が以下の記事に紹介されていました。この方法であればテーマによらずreCAPTCHA v2をコメント欄に導入できそうです。

WordPress に reCAPTCHA v2 をプラグインを使わず導入する方法 - FirstLayout

スパムコメントを防ぐ reCAPTCHA v2 を WordPress にプラグインを使わず設置する方法の紹介です。

reCAPTCHA v2をプラグインなしで導入する方法

スクリプトの読み込み

Cocoonの子テーマtmp-user/head-insert.phpを編集

Cocoonの子テーマでカスタマイズ用のファイルについては、本家サイトの以下の記事にまとまっています。

子テーマで上書きカスタマイズ利用できるテンプレートの場所

CocoonテーマのHTMLを変更したかったり、PHP処理を書き加えたかったり、テンプレートファイルを編集する際の基本情報です。

head-insert.php：<head></head>内にコードを挿入したい場合
body-top-insert.php：<body>タグ直後にコードを挿入したい場合
footer-insert.php：フッターの</body>手前にコードを挿入したい場合
main-before.php：メインコンテンツ手前にHTML等を挿入したい場合
amp-head-insert.php：AMPページの<head></head>内にコードを挿入したい場合
amp-body-top-insert.php：AMPページの<body>タグ直後にコードを挿入したい場合
amp-footer-insert.php：AMPページフッターの</body>手前にコードを挿入したい場合

tmp-user/head-insert.phpに以下を書き込みます。

tmp-user/head-insert.phpは、head部分に読み込まれるのだとおもいます。

固定ページを除いた投稿ページだけ読み込む設定です。

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

コメントフォームで reCAPTCHA を有効化する

設置方法は 2 種類あるみたいですが、function.phpで対応する方法にしました。

コメントフォームにreCAPTCHAを設置

functions.php に、下記のコードを追加します。

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

reCAPTCHA 認証を動かす

functions.php に、下記のコードを追加します。

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=ここに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 ) );
}
});

ログインユーザーの場合は、reCAPTCHA v2が表示されないようだ。