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

Akira

福岡在住の Web デザイナー。Web サイト制作に役立つ情報を紹介しています。AMP が大好き。

FacebookTwitter で記事の更新をお知らせしています。

はじめに

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 ページがない)。

実装

実装は、2 ステップで終わります。

サイトの登録

reCAPTCHA を使うには、まずサイトの登録が必要です。下記リンクより、reCAPTCHA 公式サイトに移動します。

reCAPTCHA – Google

公式サイトの「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' ) === true && amp_is_request() === true ) {
    $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 の検証
 */
require_once( ABSPATH . 'wp-admin/includes/file.php' );

add_action( 'pre_comment_on_post', function() {
  if ( $_SERVER['REQUEST_METHOD'] === 'POST' && isset( $_POST['recaptcha_response'] ) ) {
    if ( WP_Filesystem() === true ) {
      global $wp_filesystem;

      $secret_key = 'ここにシークレットキーを入力';

      $url  = 'https://www.google.com/recaptcha/api/siteverify?secret=';
      $url .= $secret_key;
      $url .= '&response=';
      $url .= $_POST['recaptcha_response'];

      $recaptcha = $wp_filesystem->get_contents( $url );
      $recaptcha = json_decode( $recaptcha );

      if ( $recaptcha->score <= 0.5 ) {
        wp_die( 'スパムコメントと判定されました。', '', ['response' => 400] );
      }
    } else {
      wp_die();
    }
  }
});

7 行目の ここにサイトキーを入力 にサイトキーを入力します。また、34 行目の ここにシークレットキーを入力 にシークレットキーを入力します。

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] );

送信に失敗しました

ボットと判定された可能性があります。

大変お手数をおかけしますが、以下の内容をご確認の上、再度のコメントの送信をお願い申し上げます。