プラグインなしで、ワードプレスにreCAPTCHA v3を設定する方法!


Notice: Undefined variable: sc_blogcard in /home/qidgclvu/public_html/tktrblog.com/wp-content/themes/luxech/functions.php on line 99

スポンサーリンク

プラグインなしで、ワードプレスにreCAPTCHA v3を設定

初心者なら、Invisible reCaptchaを使うことをおすすめします。

この記事は、reCAPTCHA v3のサイトキーとシークレットキーを取得済みであることが前提です。

<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>

■をサイトキーに置き換えてください。

上記をheadに記述するだけです。

 

Luxeritasのheadに記述する

「子テーマの編集」「Head タグ」にコピペします。

「カスタマイズ(外観)」「追加CSS」に

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

をコピペすると、reCAPTCHA v3のロゴが非表示になります。

 

SANGOのheadに記述する

「外観」「カスタマイズ」「詳細設定」にコピペします。

「外観」「カスタマイズ」「追加CSS」に

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

をコピペすると、reCAPTCHA v3のロゴが非表示になります。

 

Cocoonのheadに記述する

「Cocoon 設定」「アクセス解析・認証」「ヘッド用コード」にコピペします。

「外観」「カスタマイズ」「追加CSS」に

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

をコピペすると、reCAPTCHA v3のロゴが非表示になります。


 

ログイン画面に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 v3のロゴが非表示になりませんが、むしろOKです。

2020年10月31日ワードプレスreCAPTCHA v3

Posted by tktrblog