reCAPTCHA for MW WP Form でバッヂが表示されない

Question

MW WP Formに対して、reCAPTCHA v3を導入しようと、
reCAPTCHA for MW WP Formプラグインをインストール。
サイトキー、シークレットキーの設定、
MW WP Formの指定のタグの挿入を実施しました。

この対応でフォームのページにreCAPTCHAのバッヂが表示されれば、
正常な動作という事かと思いますが、バッヂが表示されません。

正常に機能しているページのソースと見比べてみると、
正常なページでは、ソースコードの後半に下記のようなコードが挿入されていました。

<script type='text/javascript' src='https://www.google.com/recaptcha/api.js?render=****;ver=5.6.2' id='recaptcha-script-js'></script>
<script type='text/javascript' id='recaptcha-script-js-after'>
grecaptcha.ready(function() {
    grecaptcha.execute('****', {
            action: 'homepage'
        }).then(function(token) {
            var recaptchaResponse = jQuery('input[name="recaptcha-v3"]');
            recaptchaResponse.val(token);
        });
    });
</script>

動作していないページではこのコードが挿入されていません。

おそらく wp_footer() の箇所に表示されているのかと思います。

wp_footer() の動作不良かと下記コードを
function.phpに記述してみると、これは出力ができました。

function add_my_footer() {
    echo '<!-- check -->';
}
add_action('wp_footer', 'add_my_footer');

動作不良として、どこに原因がありそうか、
アドバイスをいただけないでしょうか

よろしくお願い致します。

対策と結果

WordPressのjQuery読み込みを回避していたので、
function.php に
フォームの入力、確認、完了ページのIDのみjQueryを読み込むコードを追加しました。

function load_script(){
	if ( !is_admin() ){
		wp_deregister_script('jquery');
	}
	if ( is_page(**) || is_page(**) || is_page(**) ){
		wp_enqueue_script('jquery');
	}
}
add_action('init', 'load_script');

結果に変化はありませんでした。
出力されているコード自体にも変化がなく、
WordPressのjQueryが読み込まれているという印象もないです。
記述方法に誤りがあるのでしょうか？

Comments

[FKM]

これ、jQueryを使うんでしょうか？

[popo_]

コメントありがとうございます。
プラグインとしては導入して設定するのみという事ですが、
自動挿入されているコードを見ると、確かにjQueryで書かれていますね。

function.php でWordPressのjQueryの出力を停止しているので、
その影響は考えられそうです。
この点について確認してみます。

Answer 1

問題があったのは、WordPress同梱のjQueryを利用せず、
独自に、かつWordPressを通さずにjQueryを読み込んでいたのが原因でした。

悪い対応

function.php

function load_script(){
  if ( !is_admin() ){
    wp_deregister_script('jquery');
  }
}
add_action('init', 'load_script');

header.php

<?php wp_head(); ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

解決した対応

function.php

function load_script(){
  if ( !is_admin() ){
    wp_deregister_script('jquery');
    wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js', array(), '3.4.1');
  }
}
add_action('init', 'load_script');

header.php

<?php wp_head(); ?>

このようにCDNのjQueryを利用する場合にも、WordPressを経由させる事で、
reCAPTCHA for MW WP Formプラグインが動作し、
必要なコードの挿入が行われました。

Answer 2

スクリプトでjQueryライブラリを読み込ませてますか？コンソールで
undefined $とかなってませんかね？

<script type='text/javascript' src='https://www.google.com/recaptcha/api.js?render=****;ver=5.6.2' id='recaptcha-script-js'></script>
<script type='text/javascript' id='recaptcha-script-js-after'>
grecaptcha.ready(function() {
    grecaptcha.execute('****', {
            action: 'homepage'
        }).then(function(token) {
            var recaptchaResponse = jQuery('input[name="recaptcha-v3"]');
            recaptchaResponse.val(token);
        });
    });
</script>

Comments

[popo_]

jQueryライブラリはテーマファイル直書きで読み込んでいます。
function.php
```php
function load_script(){
if ( !is_admin() ){
wp_deregister_script('jquery');
}
if ( is_page(**) || is_page(**) || is_page(**) ){
wp_enqueue_script('jquery');
}
}
add_action('init', 'load_script');
```

header.php
```php
<?php wp_head(); ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
```

このような感じで読み込んでいます。

ちなみにFKMさんに張り付けていただいたコードに関しては、
正常に動いているサイトから引用したもので、
現状では、そもそもこのコードが挿入されないという問題になっています。

[FKM]

DOMの後に記述してますけど、ライブラリは基本DOM読み込みの前に設定する必要あります。
コンソール上では＄が認識されている状態でしょうか。

[popo_]

jQueryを別読みしているので、$表記が有効になっています。
コンソールにエラーは出ていません。

> DOMの後に記述してますけど、ライブラリは基本DOM読み込みの前に設定する必要あります。
header.phpに直書きせずに、
function.phpを利用して、
WordPress自身にjQueryライブラリを出力させた方が良いという事ですよね。
試してみます。

[popo_]

ご指摘いただいた懸念点を改善することで、無事解決ができました。
ありがとうございました。