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のサイトキーに置き換えます。
