メインコンテンツまで移動する
FirstLayout

WordPress プラグインの AMP のコメントフォームで reCAPTCHA を使用する

  • 公開日
  • 更新日

Akira Web デザイナー

はじめに

WordPress で作ったサイトを完璧なまでに AMP に対応するのが、プラグインの AMP です。

AMP プロジェクトの公式プラグインだけあり、AMP ページの HTML を最適化する AMP Toolbox が組み込まれています。これにより、AMP キャッシュでページが表示されない時も高速なページの表示が可能です。

その他にも AMP プラグインの魅力はありますが、その 1 つが AMP ページに返信機能が付いたコメントフォームを設置できること。

ただ、スパムコメント対策には、プラグインの AkismetAntispam Bee の導入が必要です。

この記事では、これらのスパムコメント対策プラグインを使用せず、reCAPTCHA を自分で導入する方法を紹介します。

環境

今回のカスタマイズは、以下の環境で動作を検証しました。

WordPress のバージョン5.7
テーマTwenty Twenty-One(バージョン: 1.2)
AMP プラグインのバージョン2.0.11
AMP プラグインのテンプレートモード標準

AMP プラグインのテンプレートモードの標準とは、AMP 化するページは AMP ページのみを生成するモードです(対となる非 AMP ページがない)。

AMP プラグインのテンプレートモードには「標準」「トランジショナル」「リーダー」の 3 つがあります。

実装

実装は、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> タグがあります。

尚、一般的に amp-recaptcha-input を使うには <head> タグ内に <script> タグの追加が必要ですが、AMP プラグインが自動的に <script> タグを追加します。

これでコメントフォームへの reCAPTCHA の設置は完了です。

尚、amp-recaptcha-input は reCAPTCHA のバッジを表示しません。必要であれば、reCAPTCHA を導入している旨のテキストを追加します。

参考:I’d like to hide the reCAPTCHA badge. What is allowed?

動作の検証

reCAPTCHA の基本的な動作を検証する手っ取り早い方法は、しきい値の変更です。

functions.php に追加した下記の部分の 0.5 を…

 if ( $recaptcha->score <= 0.5 ) 

1 に変更すれば、全てのコメントがボットと判定されます。

 if ( $recaptcha->score <= 1 ) 

0.5 は、reCAPTCHA のデフォルトのしきい値です。スコアが 0.5 以下でボットと判定されます。

参考 Interpreting the score

ボットと判定された場合は、「スパムコメントと判定されました。」と表示されます。また、HTTP レスポンスステータスコードは、400 を返します。

この文言と HTTP レスポンスステータスコードは、functions.php に追加した下記の部分で変更できます。

 wp_die( 'スパムコメントと判定されました。', '', ['response' => 400] ); 

シェアする

著者

Akira

福岡在住の Web デザイナー。役に立ちそうなことや学んだことを書き留めています。オンラインツールのブックマークサイト Benrito も運営しています。

フォローする

興味があるかも