こんにちは、おっさんです。
久しぶりにブログ設定の話です。
長いこと設置していなかったのですが、今年に入ってからひっそりと、当サイトにもお問い合わせフォームを用意してみました。
その時に利用したのが、WordPressを使っている人なら恐らく知っているであろう「ContactForm7」という有名プラグインです。
設定も簡単であっという間に設置できたのですが、その時に合わせて設定したのが「reCAPTCHA」というもの。
聞き馴染みがないかもしれませんが、ユーザ登録や認証のときに変に読みにくくなった文字列を入力されるアレ、と言えばなんとなくわかるでしょうか？
導入した「reCAPTCHA v3」では、上記のような文字列入力はないそうなのですが、サイトの右下にロゴがずっと出ていて、ちょっと邪魔になっていました。
今回は、「reCAPTCHA」を導入したまま右下のロゴを消すべく、トライしてみました。
お問い合わせフォームの大定番、ContactForm7
冒頭の通り、お問い合わせフォームにはContactForm7というプラグインを利用しました。
固定ページを作りそこにフォームを設定し、サイトメニューに「お問い合わせ」を付けておしまい。今回はこの話は詳しくはしませんが、需要があればそのうち記事にします。
ContactForm7の設定の中にreCAPTCHA v3の設定があったため、これは面白そうってことで設定してみました。
ContactForm7のインテグレーションを開くと上のような画面が出てきますので、reCAPTCHAのインテグレーションのセットアップをクリックします。
次の画面で、サイトキーとシークレットキーを入れて変更を保存すればこれで設定完了。
ちなみにサイトキーとシークレットキーは、右上のgoogle.com/recaptchaのリンク先で取得します。こちらも、googleアカウントがあれば簡単に取得できました。
以上の設定で、reCAPTCHA v3が導入でき、お問い合わせフォーム画面で右下にreCAPTCHAのロゴが出ているのも確認できました。
しかし、それ以外の画面でも同様のロゴが出るんですね。知りませんでした。
その場所が右下固定ということもあり、サイトデザインとぶつかるんですよね。上に戻るアイコンと被ってしまい、使いにくくなっていました。
reCAPTCHAのロゴを消す２つの方法
邪魔なロゴを消したいと思う人は多数いるようで、検索してみるといくつかの方法が出てきます。
ここではその中でメジャーっぽい2つの方法を紹介します。
Google公式サイトでの案内
こちらはGoogle公式でアナウンスされている方法です。
簡単に説明すると、CSSでロゴを非表示にして、代わりにフォームの近くにメッセージを表示してね、ということのようです。
I’d like to hide the reCAPTCHA badge. What is allowed?
You are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow. Please include the following text:
For example:
Note: if you choose to hide the badge, please use
引用元：https://developers.google.com/recaptcha/docs/faq
この方法だと、すべての入力フォームにメッセージ表示をする必要がありますね。
Invisible reCaptcha for WordPressプラグインを使う
次の方法はプラグインの導入です。
こっちのほうが簡単で、しかも応用範囲が広いです。
当サイトもこちらの方法で右下のロゴを消すことにしました。
まずWordPress管理画面のプラグイン新規追加で、「Invisible reCaptcha for WordPress」を検索してインストール、有効化をします。
有効化が終わると、管理画面の設定に「Invisible reCaptcha」が出来るので、ここから設定画面を開きます。
まずは、settingです。
サイトキーとシークレットキーはreCAPTCHAのサイトで取得したもの。ContactForm7のときと同じものです。
言語は「Automatically detect」がデフォルトなのでそのままでいいと思います。日本語にしてもいいです。
Badge Positionの設定があり、ここが大事！
デフォルトでは右下になっているので、これを「inline」に変更しました。
これで、入力フォームの近くに以下のようなロゴが表示されるようになります。
次にWordPressタブに移動し、４つともチェックを付けます。
上から順に以下の設定です。
- ログインフォーム保護
- 登録フォーム保護
- コメントフォーム保護
- パスワード忘れたときの保護
最後にContactFormタブで、ContactForm7のチェックを入れて保存します。
以上で設定は完了！
実際にどう表示されるのかは、当サイトのお問い合わせ画面で確認してみてください。
スパム対策はreCAPTCHAでＯＫ！
以上の設定で、サイト内の入力フォームにはreCAPTCHAが導入されました。
ということは、それ以外のスパム対策が不要になるということ！
今までスパム対策の定番として働いてもらっていた「Akismet」プラグインは重いという噂もあるので、この機会に停止させてもらいました。
今後、スパム対策がこれで十分かはしっかりと見ていく必要があると思いますが、ネットの情報だとこれで十分のような気がします。
以上、ContactForm7を導入後、reCAPTCHA v3を設定しつつ右下のロゴを消した話でした。
ご参考になれば幸いです。
コメント