HOMEPAGE TIPS BLOG

ホームページ制作TOP > Web技術Tips > WordPressにInvisible reCAPTCHAを導入する方法
[期間限定] 標準クオリティープラン  WEBサイト制作20%OFF
失敗しないWeb制作会社の選び方
WordPress

WordPressにInvisible reCAPTCHAを導入する方法

WordPress2017.11.22

ホームページにフォームを設置するならスパム対策は必須かもしれません。

この記事では Google が提供するスパムメール対策システムの最新版にあたる『Invisible reCAPTCHA』を WordPress に導入する方法を紹介します。

reCAPTCHA とは

フォームのスパム対策として、reCAPTCHA というフォームの送信者がロボットかどうかを判別するためのサービスがあります。

「私はロボットではありません」というチェックボックスをクリックすると、人間かロボットかを自動判別します。そしてロボットっぽい送信者に対してはロボットが解けそうにない画像問題を繰り出す仕組みです。

これをホームページのフォームに埋め込むだけで簡単にスパム対策ができることから、最近ではいたるサイトで目にするようになりました。

プラグインを利用することで WordPress のログイン画面にも reCAPTCHA を設置することが可能です。

画像のタイプの reCAPTCHA は第二世代という位置づけで、第三世代の Invisible reCAPTCHA と呼び分けるために『reCAPTCHA V2』とします。

reCAPTCHA V2 と Invisible reCAPTCHA の違い

reCAPTCHA V2 と Invisible reCAPTCHA の違いですが、ほとんど差はありません。明確な差はチェックボックスの有無くらいです。

第三世代のほうが精度が高いとかはないようで(憶測です)、送信者が最後に行うワンクリックがあるかないか、それくらいしか違いはありません。

Invisible reCAPTCHA の設置方法

API key を作成

はじめに、reCAPTCHA を利用する際はすべてそうするのですが、Google にサイトを登録して API key を発行してもらう必要があります。

reCAPTCHA: Easy on Humans, Hard on Bots

 

 

基本的にはひとつのサイトにひとつの API key という割当てをします。

登録画面にはサイトを登録するフォームがあるので、サイトの名称の入力し、二番目の [Invisible reCAPTCHA] を選択します。

 

 

ラジオボタンを選択するとドメインを入力するテキストボックスが表示されるので、サイトのドメインを入力します。複数登録する一行ずつ記入します。

[Accept the reCAPTCHA Terms of Service.] というのは利用規約の了承です。

最後に [Register] をクリックし、API key を作成します。

 

 

作成されたページで Site key と Secret key が取得できます。両方とも使うのでメモしておきましょう。

プラグイン『Invisible reCaptcha for WordPress』インストール

 

有効化し、[設定] > [Invisible reCAPTCHA] から API key の設定をします。

 

 

[Badge Position] では [Bottom Right] [Bottom Left] [inline] から reCAPTCHA の位置を指定します。

この設定はフォームによって個別に変えられないため、すべて同一の設定が適用されます。

また、PC では Bottom Left だけどスマホになったら Inline にする、のような対応はできないようです。

Bottom Right Bottom Left inline
ページの右下に fixed されます

ページの左下に fixed されます

reCAPTCHA V2 と近い位置に挿入されます。

[Badge Custom CSS] でカスタム CSS を設定できますが、[Inline] でのときしか適用されないようです。

次に、reCAPTCHA を表示させる箇所を設定します。

 

 

WordPress タブから [Enable Login Form Protection] を有効化することでログインフォームに適用されます。

他にもパスワードを忘れたときのフォームなどに適宜有効化設定をします。

 

 

適用されるとこんな感じで表示されます。

Contact Form 7 に reCAPTCHA を設定

 

Invisible reCAPTCHA が対応しているいくつかのフォームプラグインの中に Contact Form 7 があります。

Contact Form 7 は標準機能で reCAPTCHA を付けられますが、これとは関係ないので注意してください。

なお、wp_head() と wp_footer() は必須です。

PAGE TOP