【WordPress】reCAPTHCA v3のアイコンがWEBサイト全体の全てのページの右下に表示されるときの対処法｜Contact Form7

wordpress-prograshi（プロぐらし）-kv WordPress
記事内に広告が含まれていることがあります。

Contact Form７ではスパム対策としてGoogleが提供しているreCAPTHCA（v3）を導入することができます。

しかしデフォルトでは、reCAPTHCAのアイコンはお問合せページでのみ表示されればいいのですが、WEBサイト全体で表示されてしまうことがあります。

ここでは、全てのページで右下に表示されたreCAPTHCAのアイコンを、お問合せページなど特定のページでのみ表示する方法について解説しています。


reCAPTHCA v3とは何か？

reCAPTCHA v3は、Googleが提供する、ウェブサイトのセキュリティ対策の一つです。

従来のreCAPTCHAのように、ユーザーに画像を選んだり文字を入力させたりする手間をかけることなく、ユーザーの行動を分析し、その人が人間かロボットかを判断する仕組みです。

なお、一世代前のreCAPTCHA v2は、フォーム入力時に「すべてのバイクを選択してください」といった画像が表示され、画像をクリックすることで人かロボットかを判定していました。


Contact Form７では、以下のようにreCAPTCHA v3を導入することができます。


導入すると以下のようなマークがページの右下に表示されます。


↓　カーソルを合わせると開きます。



対処法

対処法は、一旦WEBサイト全体で表示されるreCAPTCHAを無効にし、その後、指定したページのみに適用するという処理を行います。


functions.phpに以下のコードを追記します。

// Contact Form 7のreCAPTCHAスクリプトを無効化
function disable_cf7_recaptcha() {
    wp_dequeue_script('google-recaptcha');
	wp_dequeue_script('wpcf7-recaptcha');
}
add_action('wp_enqueue_scripts', 'disable_cf7_recaptcha', 99);

//ReCAPTHCAのアイコンをContactページにのみ表示する
function load_recaptcha_js() {
    // 表示させたいページのスラッグ名をここに指定 (例: 'contact')
    if ( is_page( 'contact' ) ) {
        wp_enqueue_script( 'google-recaptcha' );
		wp_dequeue_script('wpcf7-recaptcha');
    }
}
add_action( 'wp_enqueue_scripts', 'load_recaptcha_js', 100 );


以上で完了です。


コードの解説

WEBサイト全体で表示されるreCAPTCHAを無効化

初めに、WEBサイト全体で表示されるreCAPTCHAを無効します。

// Contact Form 7のreCAPTCHAスクリプトを無効化
function disable_cf7_recaptcha() {
    wp_dequeue_script('google-recaptcha');
	wp_dequeue_script('wpcf7-recaptcha');
}
add_action('wp_enqueue_scripts', 'disable_cf7_recaptcha', 99);

スクリプトを無効化するには「wp_dequeue_script（バンドル名）」を使います。

一般的には「google-recaptcha」というバンドル名前を指定すれば無効化できますが、Contact Form7で導入した場合はバンドル名が「wpcf7-recaptcha」になります。

念のため、２つとも記載しておきます。

後は、「add_action」で対象の関数を読みこめば無効化完了です。


指定したページにのみ表示する

次に、指定したページにのみreCAPTCHAを表示します。

//ReCAPTHCAのアイコンをContactページにのみ表示する
function load_recaptcha_js() {
    // 表示させたいページのスラッグ名をここに指定 (例: 'contact')
    if ( is_page( 'contact' ) ) {
        wp_enqueue_script( 'google-recaptcha' );
		wp_dequeue_script('wpcf7-recaptcha');
    }
}
add_action( 'wp_enqueue_scripts', 'load_recaptcha_js', 100 );


「is_page（ページのスラッグ）」で、対象のページを指定し、「wp_enqueue_script（バンドル名）」で対象のスクリプトを読み込みます。

以上で完了です。


複数のページを指定する

複数のページでreCAPTCHAを有効化したい場合は、「is_page」で||を使って複数のページのスラッグを指定します。

例えば、「contact」と「lp」という２つのページで有効化したい場合は以下のようにします。

//ReCAPTHCAのアイコンをContactページにのみ表示する
function load_recaptcha_js() {
    // 表示させたいページのスラッグ名をここに指定 (例: 'contact')
    if ( is_page( 'contact'||'lp' ) ) {
        wp_enqueue_script( 'google-recaptcha' );
		wp_dequeue_script('wpcf7-recaptcha');
    }
}
add_action( 'wp_enqueue_scripts', 'load_recaptcha_js', 100 );



Contact Form7を使用していない場合

Contact Form7など何かのプラグイン経由でreCAPTCHAを導入していない場合は、手動でreCAPTCHAのキーを指定します。

//ReCAPTHCAのアイコンをContactページにのみ表示する
function load_recaptcha_js() {
    // 表示させたいページのスラッグ名をここに指定 (例: 'contact')
    if ( is_page( 'contact' ) ) {
        // reCAPTCHAのスクリプトを手動で追加
        wp_enqueue_script('google-recaptcha', 'https://www.google.com/recaptcha/api.js?render=your_site_key', array(), null, true);
    }
}
add_action( 'wp_enqueue_scripts', 'load_recaptcha_js', 100 );


URLの「your_site_key」をreCAPTHCAのサイトキーに置き換えます。



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