MW WP FormでreCAPTCHAがうまくいかない場合に確認する事

JavaScript,jQuery

既に開発は終了していますが、「MW WP Form」を使ってる方はまだおられるのではないでしょうか。

reCAPTCHAを入れようと思うと、大体以下のプラグインを使うことが多いと思いますが、落とし穴が一点ありました。

reCAPTCHA for MW WP Form
https://wordpress.org/plugins/recaptcha-for-mw-wp-form

reCAPTCHA v3 バッジが表示されない

問題なければ↑のバッジが右下に出てくるはずですが、これが出てこない。

なんで?と思って調べていると、

<?php echo do_shortcode('[mwform_formkey key="***"]'); ?>

上記のように、テンプレート内でショートコードを呼び出すとreCAPTCHAのjsが読み込まないようでいした。

解決方法

一番簡単なのは、固定ページや記事の本文にショートコードを書いて、テンプレートの方では<?php the_content();?>で呼び出すことでした。

ただ、例えば投稿毎にメールフォームを表示するサイトだとして、毎回ショートコードを入れるのが面倒な場合です。特にお客様が投稿する事が主な場合、「面倒臭いから何とかしてくれ!」と言われるのは必至ではないかと思います・・・。

となるともう手動で入れるしかありません。

funcstions.phpで以下を入れてしまいましょう。

add_action('wp_footer', 'force_load_recaptcha_script');
function force_load_recaptcha_script() {
  if ( is_single() ) {
    ?>
	<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.querySelector('input[name="recaptcha-v3"]');
				if (recaptchaResponse) {
					recaptchaResponse.value = token;
				}
			});
		});
	</script>
    <?php
  }
}

サイトキーはもちろん用意したものを入れてください。

また、上の例では投稿の詳細ページに出すif文となってますが、適宜変えてください。

タイトルとURLをコピーしました