先日、コンタクトフォームのプラグインとして有名なContact form 7がGoogle reCAPTCHA v3に対応するアップデートがありました。
5.1
Constant Contact インテグレーションモジュールを導入。
reCAPTCHA モジュールを更新し reCAPTCHA v3 に対応。
ダークモード用スタイルルールを追加。
何気なくアップデートしたら、Contact form7では従来のGoogle reCAPTCHA v2が使えなくなってしまったので、Google reCAPTCHA v3に移行しました。
Contact form7 5.1.1は地雷バージョンでした。
そうすると、すべてのページでGoogle reCAPTCHA v3のアイコンが表示されるようになります（少なくとも現時点では）。この状況はスマホ画面だとTOPへ戻るボタンと2個表示されるので結構邪魔になります。
reCAPTCHAのアイコンを表示させないのは規約違反ということなのですが、Contact form7を使っていないページでアイコンを表示し続ける必要はないはずです。
是非、Contact form7を使っていないページではアイコンを是非消したいところです。
この記事では、Contact form7を使っていないページでreCAPTCHAのアイコンを表示させない方法をまとめています。
reCAPTCHAのアイコンを表示させない対策
対策は自分が知ってる方法では3通りです。
- Plugin load filterプラグインを使う
- Invisible reCaptcha for WordPressプラグインを使う
- function.phpにコードを追加
上記の方法と合わせてバッジを非表示にする方法が一番優れていると思います。
方法1:Plugin load filterプラグインを使う
このサイトで使っている方法がこれです。
Plugin load filterはプラグインを使う時だけloadするという、Wordpressの軽量化にとても効果のある便利なプラグインです。
少し前までPlugin load filterとContact form7の組み合わせは上手く動かないという報告が多数あったのですが、最近のアップデートで問題が解消されました。
調べてみるとどうも Contact Form 7 が REST API を使うようになってからの問題のようです。結構時間がたっています (^_^;)
Contact Form 7 から問い合わせを実行すると
http://(site)/wp-json/contact-form-7/...へリクエストが発行されますがこれを適正に処理できないケースがありました固定ページを問い合わせページとしてそのページのみで contact form 7 プラグインを有効化していると contact form 7 からの wp-json というリクエストを固定ページへのリクエストと取り違えることで（ページフィルタで固定ページに対して contact form 7 が有効化されていない場合）このリクエストに対して contact form 7 がロードされず、そんな REST API のエンドポイントは知らないよということでエラーとなっているようでした
Plugin load filterを使って、Contact form 7を使っているページだけ、Contact form7を読み込むように設定してあげれば、reCAPTCHAのアイコンも読み込んだ時だけしか表示されなくなります。
説明を読んでもよくわからない人が多いと思いますので手順を書いておきます。
プラグイン：Contact form7に対して以下のような設定にし、フィルター登録します。
- PageTypeフィルタ⇒Page TypeをONに設定（他は必然的にOFF）
- エキスパートフィルタ：全てON
Contact formを特定のページだけ読み込むように設定したとしても実際にはそのページ以外にwp-jsonというページも読み込めるようにしておかないとエラーになってしまう。
そのエラーを解消するのがエキスパートフィルタの設定で、エキスパートフィルタの設定は初期状態でREST API、Heartbeat、Ajax、AMPページではプラグインを読み込む設定になっている。つまり、wp-jsonというページに対するアクセスの場合、プラグインを読み込むということ。
方法2:Invisible reCaptcha for WordPressプラグインを使う
方法3:functions.phpにコードを追加する
特定のページだけContact form7を読み込むようにfunction.phpにコードを追加する方法です。
Plugin load filterとやっていることはほぼ同じだとおもいますが、wp-json云々という話がケアされているのかどうか謎です。
まとめ
Google reCAPTCHA v3のアイコンを表示しなくする方法を3種類紹介しました。自分が使っている方法はPlugin load filterを使うものですが、Plugin load filterそのものが優秀なプラグインなので、もし導入していない場合は、この機会に導入されることをお勧めします。
