プラグイン「recaptcha-for-mw-wp-form」のエラー:「grecaptcha is not defined」に対応するために一部を修正しました

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/