『Ususu blog』は、快適にWordPressが使えるレンタルサーバーの比較やレビューのブログです。

Invisible reCaptchaをやめ、プラグインなしでreCAPTCHA v3を設定!

Invisible reCaptchaをやめ、プラグインなしでreCAPTCHA v3

プラグインは少ないほうがいいんです。

だけど、プラグインをやめると不便になります。

reCAPTCHA v3なら、プラグインなしでも簡単にできるます。

初心者なら、プラグインのInvisible reCaptchaを使いましょう!

 

Invisible reCaptchaを使ってる人が多いです。

でも、プラグインは少ないほうがいいんです!

 

下記をヘッダーに記述すればいいんです。

<script src=”https://www.google.com/recaptcha/api.js?render=★”></script>
<script>
grecaptcha.ready(function() {
grecaptcha.execute(‘★’, {action: ‘homepage’}).then(function(token) {
var recaptchaResponse = document.getElementById(‘recaptchaResponse’);
recaptchaResponse.value = token;
});
});
</script>

★は、サイトキーです。

reCAPTCHA v3のサイトキーとシークレットキーは、取得しておく必要があります。

 

ヘッダー内にScriptを記述する

テーマによって違いますが、Google Analyticsのタグを追記する要領で、ヘッダーに記述します。

子テーマを使っていれば、テーマをバージョンアップしても大丈夫です。

Google Analyticsのタグを貼るのにプラグインを使ってる場合は、Invisible reCaptchaを使うことをおすすめします。

 

reCAPTCHAのロゴを非表示にする

下記のCSSを追記することで、reCAPTCHAのロゴを非表示にできます。

 

/* reCAPTCHAを非表示 */
.grecaptcha-badge { visibility: hidden; }

 

 

ログイン画面にreCAPTCHA v3を設定

上記でコメント欄や問い合せフォームに対応できました。

だけど、ログイン画面にも対応させることにしました。

 

wp-login.phpのheadに追記することにしました。

 

<script src=”https://www.google.com/recaptcha/api.js?render=★”></script>
<script>
grecaptcha.ready(function() {
grecaptcha.execute(‘★’, {action: ‘homepage’}).then(function(token) {
var recaptchaResponse = document.getElementById(‘recaptchaResponse’);
recaptchaResponse.value = token;
});
});
</script>

★は、サイトキーです。

 

ログイン画面では、reCAPTCHAのロゴが表示されます。

けど、ログイン画面なら、reCAPTCHAのロゴが表示されたほうがいいと思います。

コメントを残す