みなさんこんにちは！おさかなです！
今回は「reCAPTCHAV3」について、書いていこうと思います！
それでは、レッツゴー！！！！！
・WordPressのセキュリティ対策をしたい方
・reCAPTCHAV3の実装方法を知りたい方
・「Contact Form 7」を使用している方
スパム対策は大丈夫？！
ぎゃああああ！
ナゾのスパムが大量に送られてきたああ！何これええ！
あーあ。
おさかな、スパム対策ちゃんとしたの？
スパム？何それソーセージ？笑
…。
すみませんナビまるさん。冗談です。
「reCAPTCHAV3」の準備！
それではまず「reCAPTCHAV3」のサイトにアクセスします。
↓reCAPTCHAV3って何？という方はこちら
次に「v3 Admin Console」をクリックします。
※アカウント作成がまだの人はアカウントを作成しておきましょう！
ページが切り替わるので、右上の方にある「＋」プラスマークをクリックします！(ポチっと)
すると新しい設定画面が表示されるので、4項目入力していきます。
ラベル … わかりやすい任意の名前(サイト名などがおすすめです！)
reCAPTCHAタイプ … reCAPTCHA v3 を選択
ドメイン … 設置するサイトのURLを入力 ※https://は含めないURLです
利用条件に同意 … ボックスに✔をいれる
すべて入力できたら、ページ下の「送信」ボタンをクリックします！
すると…「サイトキー」と「シークレットキー」が表示されます！(後ほど使います！)
(あともうちょっと…！)
「WordPress」に設置していこう！
それでは先ほど取得したコードを、WordPressに設置していきましょう！(おー！)
※今回は「Contact Form 7」というプラグインを使用していることを前提とするので、まだの方は事前に追加をお願いします。
まずWordPressの管理画面から、「お問い合わせフォーム」＞「インテグレーション」を選択します。
次に「reCAPTCHA」＞「インテグレーションのセットアップ」を押します！
このページに先ほど取得した、「サイトキー」と「シークレットキー」を入力しましょう！
(コピペしてっと！えいやあ！)
変更を保存ボタンを押せば、設定完了です～！
結果をチェック！
こんな感じでサイトに設置されました～！(やった～！)
右下のデザインと被っている方
右下には、ページトップに飛ぶためのアイコンが設置されていることが多いと思います。
しかし、「reCAPTCHAV3」のデフォルトの位置も右下のため、こんな感じで被って表示されてしまった方もいらっしゃるはずです！(おさかなもそうでした💦)
そんな時は「外観」＞「カスタマイズ」＞「追加CSS」を編集してみましょう！
下記コードをコピーして「追加CSS」に貼り付ければ、reCAPTCHAV3を少し上にずらすことができます。(公開ボタンも忘れずにね！)
/* reCAPTCHAマークを上にずらして表示 */
.grecaptcha-badge {
bottom: 85px !important ;
}これでデザイン的にも問題がなくなりました！(わーい！)
これで全ての操作は完了です！
お疲れ様でした☕
少しでもスパムが減ってくれますように！
ここまで読んでくださり、ありがとうございました！
当サイトを気に入っていただけましたら、匿名OK！15円から！のサポート支援に是非！ご協力をお願いいたします！
ご支援いただいたものは、「プログラム関連の書籍」や「新しいWebサービス」などから知見を得るために活用させていただきます。✨
※「受け取り人メールアドレス」には「osakana1699@gmail.com」を入力してください。
