WordPress プラグインの AMP のコメントフォームで reCAPTCHA を使用する
はじめに
WordPress で作ったサイトを完璧なまでに AMP に対応するのが、プラグインの AMP です。
AMP プロジェクトの公式プラグインだけあり、AMP ページの HTML を最適化する AMP Toolbox が組み込まれています。これにより、AMP キャッシュでページが表示されない時も高速なページの表示が可能です。
その他にも AMP プラグインの魅力はありますが、その 1 つが AMP ページに返信機能が付いたコメントフォームを設置できること。
ただ、スパムコメント対策には、プラグインの Akismet や Antispam Bee の導入が必要です。
この記事では、これらのスパムコメント対策プラグインを使用せず、reCAPTCHA を自分で導入する方法を紹介します。
環境
今回のカスタマイズは、以下の環境で動作を検証しました。
WordPress のバージョン | 5.7 |
---|---|
テーマ | Twenty Twenty-One(バージョン: 1.2) |
AMP プラグインのバージョン | 2.0.11 |
AMP プラグインのテンプレートモード | 標準 |
AMP プラグインのテンプレートモードの標準とは、AMP 化するページは AMP ページのみを生成するモードです(対となる非 AMP ページがない)。
実装
実装は、2 ステップで終わります。
サイトの登録
reCAPTCHA を使うにはサイトの登録が必要なため、reCAPTCHA 公式サイトに移動します。
公式サイトの「v3 Admin Console」をクリックし、サイトを登録します。
「reCAPTCHA タイプ」は、「reCAPTCHA v3」を選択します。また、「ドメイン」には、サイトのドメインを記入します。https://firstlayout.net/
がサイトの URL であれば、ドメインは firstlayout.net
です。尚、「ラベル」には、登録するサイトの名前やドメインなどの任意の名前を入力します。
サイトの登録後に再度「v3 Admin Console」をクリックし、設定を開きます。
「reCAPTCHA のキー」をクリックし、「サイトキー」と「シークレットキー」を確認します。この 2 つのキーは、後ほど使用します。
また、「このキーが AMP ページで動作するようにする」を有効にします。
これで AMP ページで reCAPTCHA を使う準備ができました。
functions.php
次に、amp-recaptcha-input を使い、サイトに reCAPTCHA を設置します。また、コメントの送信時に reCAPTCHA による検証を行います。
この設置と検証を行う下記コードをテーマの functions.php に追加します。
/**
* AMP プラグインが有効、かつ AMP ページを表示する時に
* <amp-recaptcha-input> タグを設置
*/
add_filter( 'comment_form_submit_field', function( $submit_field ) {
if ( function_exists( 'amp_is_request' ) && amp_is_request() ) {
$site_key = 'ここにサイトキーを入力';
$recaptcha = '
<amp-recaptcha-input
layout="nodisplay"
name="recaptcha_response"
data-sitekey="' . $site_key . '"
data-action="homepage">
</amp-recaptcha-input>
';
$submit_field .= $recaptcha;
}
return $submit_field;
});
/**
* reCAPTCHA の検証
*/
add_action( 'pre_comment_on_post', function() {
$verify_error = [
'text' => '認証エラーが発生しました。時間を置いてお試しください。',
'wp_die_args' => ['response' => 401, 'back_link' => true]
];
$bot_error = [
'text' => '不正なプログラムと判定されたため、処理を停止しました。',
'wp_die_args' => ['response' => 403]
];
if ( isset( $_POST['recaptcha_response'] ) ) {
$secret_key = 'ここにシークレットキーを入力';
$url = 'https://www.google.com/recaptcha/api/siteverify?secret=';
$url .= $secret_key;
$url .= '&response=';
$url .= $_POST['recaptcha_response'];
$recaptcha = wp_remote_request( $url );
$recaptcha = wp_remote_retrieve_body( $recaptcha );
$recaptcha = json_decode( $recaptcha );
if ( ! isset( $recaptcha->success ) || ! $recaptcha->success ) {
wp_die( $verify_error['text'], '', $verify_error['wp_die_args'] );
}
if ( ! isset( $recaptcha->score ) ) {
wp_die( $verify_error['text'], '', $verify_error['wp_die_args'] );
} elseif ( $recaptcha->score <= 0.5 ) {
wp_die( $bot_error['text'], '', $bot_error['wp_die_args'] );
}
} else {
wp_die( $verify_error['text'], '', $verify_error['wp_die_args'] );
}
});
$site_key = 'ここにサイトキーを入力';
にサイトキーを入力します。また、$secret_key = 'ここにシークレットキーを入力';
にシークレットキーを入力します。
AMP プラグインの amp_is_request()
を使用し、AMP プラグインが有効の時に AMP ページにのみ <amp-recaptcha-input>
タグをコメントフォームの送信ボタンの下に設置しています。
尚、一般的に amp-recaptcha-input を使うには <head>
タグ内に <script>
タグの追加が必要ですが、AMP プラグインが自動的に <script>
タグを追加します。
これでコメントフォームへの reCAPTCHA の設置は完了です。
尚、amp-recaptcha-input は reCAPTCHA のバッジを表示しません。必要であれば、reCAPTCHA を導入している旨のテキストを追加します。
動作の検証
reCAPTCHA の基本的な動作を検証する手っ取り早い方法は、しきい値の変更です。
functions.php に追加した下記の部分の 0.5
を…
if ( $recaptcha->score <= 0.5 )
1
に変更すれば、全てのコメントがボットと判定されます。
if ( $recaptcha->score <= 1 )
0.5
は、reCAPTCHA のデフォルトのしきい値です。スコアが 0.5
以下でボットと判定されます。
ボットと判定された場合は、「スパムコメントと判定されました。」と表示されます。また、HTTP レスポンスステータスコードは、400 を返します。
この文言と HTTP レスポンスステータスコードは、functions.php に追加した下記の部分で変更できます。
wp_die( 'スパムコメントと判定されました。', '', ['response' => 400] );