超人気の『Simplicity2』の後継『Cocoon』のデモサイトを兼ねています。   

reCAPTCHA v3

※WordPress 5.0 仕様の Contact Form 7 では、バージョンが v3 のみに変更になりました。

Contact Form 7 は Akismet によるスパムフィルタリングをサポート。賢い reCAPTCHA はうっとうしいスパムボットをブロックしてくれます。

Contact Form 7 日本語マニュアル『reCAPTCHA』
Googleアカウントを用意しておきます。

reCAPTCHA 管理ページ

reCAPTCHA 管理ページ
クリックすると別ページ(タブ)でGoogleの管理ページが開きます。
Googleアカウントにログインして利用します。

最初はこんな感じです。
タイプは v3 を選択します。(一番最初はタイプ選択だけで次画面だったかもです。)

 

少し項目が増えましたね。
『Label』には前画像のように自分でわかりやすい半角英数字の名前を付けます。(『Domains』と同じでも構いません。)
『Choose the type of reCAPTCHA』で[reCAPTCHA v3]を選択します。
『Domains』には ドメイン名(サイトURLの『http(s)://』を抜いたもの) を入れます。
『Accept the reCAPTCHA Terms of Service.』と『Send alerts to owners』に[✓]を入れて、Registerをクリックします。

 

画像は少し省略していますが、必要なのは赤枠の2つのキーだけです。
Site key と Secret key をエディターにメモっておきます。

 

ドメインがexample.comの場合、サブドメイン:subdomain.example.com も同じキーを使用できます。
稀有な例だと思いますが、ドメイン:example.comで、サブドメイン:subdomain.example.com を別サイトとして切り離して利用している場合は、別サイトのGoogleアカウントで subdomain.example.com のキーを取得出来ます。

 

reCAPTCHA 使用例—1

サイト全ページのフッター右端に[reCAPTCHA]マークが表示されます。

 

Contact Form 7 側設定

「ダッシュボード>お問い合わせ>インテグレーション」から reCAPTCHA のインテグレーションのセットアップをクリックします。

 

reCAPTCHA 設定

reCAPTCHA に、
サイトキー:Site key の文字列をコピペ
シークレットキー:Secret key の文字列をコピペ
変更を保存をクリックします。
画像下のようになれば終了です。

 

[reCAPTCHA]マークの移動

整体師の山川先生のご教授です。
reCAPTCHA v3がトップへ戻るボタンに被ってしまうときの対処法

reCAPTCHA v3がトップへ戻るボタンに被ってしまうときの対処法 | Lognote
reCAPTCHA v3がトップへ戻るボタンに被ってしまうときの対処法を紹介します。

 
Simplicity2,Cocoonの場合は子テーマのstyle.cssに以下を追加でOKです。

/*===============================
	reCAPTCHA
=================================*/
.grecaptcha-badge {
	bottom: 55px !important;
}

 
 

reCAPTCHA 使用例—2

これも山川先生のご教授です。
reCAPTCHA v3の表示をお問い合わせページのみにする方法

reCAPTCHA v3の表示をお問い合わせページのみにする方法 | Lognote
reCAPTCHA v3の表示をお問い合わせページのみにする方法を紹介します。

 
下がサンプル画像です。

 

Invisible reCaptcha

プラグイン:「Invisible reCaptcha for WordPress」を使います。
プラグインのアップロードでキーワードにInvisible reCaptcha for WordPressを入れて、完全一致のプラグインを今すぐインストールして、有効化します。

 

Contact Form 7 キー削除

使用例—1 から変更の場合は先に Contact Form 7 のキーの削除をします。
「ダッシュボード>お問い合わせ>インテグレーション」で reCaptcha のキーを削除をクリックします。
※キーが重複するからです。

 

Invisible reCaptcha 設定

「ダッシュボード>設定>Invisible reCaptcha」をクリックします。

 

Settings>Settings

サイトキーとシークレットキーを入力。
Language:Japanease、Badge Position:Inline、Badge Custom CSS:入力後、変更を保存します。

 
Badge Custom CSS:

.grecaptcha-badge {
	display: block;
	margin-bottom: 20px;
}

 

Settings>WordPress

コメントはAkismetと重複するので、それ以外にして、変更を保存します。

 

Settings>Contact Forms

Contact Form 7 にして、変更を保存します。

 

最初は『reCAPTCHA 使用例—1』の全ページの右下に reCAPTCHA 常駐を採用しましたが、山川先生同様、なんか邪魔だなあと思いました。山川先生は翌日には、メールフォームにだけインラインで表示する『reCAPTCHA 使用例—2』をアップして下さいました。ありがとうございます。早速使わせて頂きました。
タイトルとURLをコピーしました