先日依頼を受けたWordPressの案件で、MW WP Formプラグインで構築した問い合わせフォームに「reCAPTCHA v3」を導入することがあった。

MW WP FormプラグインはデフォルトでreCAPTCHAに対応していないのだが、少し調べるとreCAPTCHA for MW WP Formというプラグインを使うことで簡単に導入できるという情報がいくつも出てきたので、早速インストールしてみることに。

導入手順はそこら中の記事で紹介されているとおり簡単なものなのでここでは割愛するが、手順を踏んで設定をおこなったのだが、reCAPTCHAのバッジ（画面右下に表示されるもの）が表示されない問題が発生した。

まず確認するべきこと

バッジが表示されない問題についてネットで調べると、いくつかの情報が出てきた。

  • <?php wp_footer(); ?>を忘れている
  • jQueryが読み込まれていない

主に上記2件についての指摘があったが、今回のサイトではいずれの対応もされており全く問題なかった。

プラグインのソースコード内に問題のヒントが

次に確認したのが、reCAPTCHA for MW WP Formプラグインのソースコード。

WordPress管理画面のサイドメニューから「プラグインファイルエディター」を開き、「reCAPTCHA for MW WP Form」を選択する。

そしてプラグインファイルの中から「EnqueueController.php」を開く。

どうやら、こちらのファイルでreCAPTCHA関連コードの出力を制御しているようで、20行目のif文が今回の問題の原因となっていた。

<?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 (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?render=' . $site_key, array('jquery'), array(), true);

            $data = <<< EOL
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);
        }
    }
}

プラグインのソースコードには問題ないのだが、当該サイトの場合、has_shortcode($post->post_content, 'mwform_formkey')の判定でfalseが返っていたことでreCAPTCHAの出力がされていなかったのだ。

というのも、当該サイトの固定ページでは、コンテンツの中身を全てテンプレートファイルで全て管理しており、MW WP Formを出力するショートコードもテンプレートファイル内で<?php echo do_shortcode('[mwform_formkey key="999"]'); ?>のように出力していたのだ。

そのため、プラグイン側のコード20行目、投稿内容にショートコード「mwform_formkey」が存在するかを判定するhas_shortcode($post->post_content, 'mwform_formkey')でfalseが返るのも当然で、reCAPTCHAのバッジが表示されなかったというわけだ。

解決法

解決法はいたってシンプルで、MW WP Formのショートコードを固定ページの編集画面から追加するだけ。

これで無事、reCAPTCHAのバッジを表示させることができた。