お問い合わせはコチラから

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

サイト運営

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

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のイヤなところ

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をコメント欄に導入できそうです。

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

スクリプトの読み込み

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

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

  • 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が表示されないようだ。
この記事が気に入ったら フォローしよう
最新情報をお届けします。
この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

オランダで生きていく
タイトルとURLをコピーしました