MW WP FormとreCAPTCHA for MW WP FormでGoogle reCAPTCHAを使うように設定したのですが、デベロッパーツールのコンソールで「Uncaught ReferenceError: grecaptcha is not defined」というjavascriptのエラーが出てしまいました。
他のサイトでは問題なかったのですが、htmlのコードが長いのと画像もあるためhtmlの読み込みが遅く、https://www.google.com/recaptcha/api.jsからの読み込みにずれが生じエラーとなってしまったようです。
修正する前は、以下のようなコードが書き出されていました。
<script src='https://www.google.com/recaptcha/api.js?render=xxxxxxxxxxxxxxxxxxxxxxxx'></script>
<script type='text/javascript' id='recaptcha-script-js-after'>
grecaptcha.ready(function() {
grecaptcha.execute('xxxxxxxxxxxxxxxxxxxxxxxx', {
action: 'homepage'
}).then(function(token) {
var recaptchaResponse = jQuery('input[name="recaptcha-v3"]');
recaptchaResponse.val(token);
});
});
</script>
↑これを↓このように書き換えました。
<script src='https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=xxxxxxxxxxxxxxxxxxxxxxxx'></script>
<script type='text/javascript' id='recaptcha-script-js-after'>
function onloadCallback() {
grecaptcha.ready(function() {
grecaptcha.execute('xxxxxxxxxxxxxxxxxxxxxxxx', {
action: 'homepage'
}).then(function(token) {
var recaptchaResponse = jQuery('input[name="recaptcha-v3"]');
recaptchaResponse.val(token);
});
});
}
</script>
このようにapi.jpにパラメータ「onload=onloadCallback」を追加し、grecaptchaはそれとトリガーにして読み込ませるようにしました。
修正したファイルは/controllers/EnqueueController.phpです。
<?php
namespace MW_WP_Form_reCAPTCHA\Controllers;
use MW_WP_Form_reCAPTCHA\Config;
class EnqueueController
{
public function __construct()
{
add_action('wp_enqueue_scripts', array($this, 'add_scripts'));
}
public function add_scripts()
{
global $post;
$option = get_option(Config::OPTION);
$site_key = esc_html($option['site_key']);
if (!empty($post) && has_shortcode($post->post_content, 'mwform_formkey') && !empty($site_key)) {
wp_enqueue_script('jquery');
wp_enqueue_script("recaptcha-script", 'https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=' . $site_key, array('jquery'), array(), true);
$data = <<< EOL
function onloadCallback() {
grecaptcha.ready(function() {
grecaptcha.execute('$site_key', {
action: 'homepage'
}).then(function(token) {
var recaptchaResponse = jQuery('input[name="recaptcha-v3"]');
recaptchaResponse.val(token);
});
});
}
EOL;
wp_add_inline_script('recaptcha-script', $data);
}
}
}
参考になったページ:https://ogeek.cn/qa/?qa=1038994/