Google recaptchaを必要なページ(フォーム）のみで読み込む方法：複数も

はじめに

ContactForm7などのプラグインを使って既にreCaptchaの設定を完了している事を前提に、すべてのページで表示される「reCaptcha v3」のロゴを必要なページのみで表示したい場合の方法について解説します。

Google reCAPTCHA（リキャプチャ）について

参考：Google reCAPTCHA

bot 攻撃からの保護とオンライン不正行為の防止をする認証システムです。

必要なページのみで表示する

コメントを許可していないか、コメント欄にはreCaptchaが必要ない場合は、この方法で必要なページのみに設置できます。

通常のお問合せフォームだけでなく、会員制サイトで登録フォームなどがある場合にも、そのページを指定するだけでOKなので簡単です。

なぜ対応が必要か

「reCaptcha v2」の場合はフォームのみで設置できたのですが、「reCaptcha v3」はサイト全体に表示されてしまうので、サイトのどのページを見てもreCaptchaのJavaScrptが読み込まれ、サイトパフォーマンスが低下します。

不要な処理を省くことで、PageSpeed Insightsでも、サイトパフォーマンスの数値に雲泥の差が出ます。

また、ただ単に、すべてのページでロゴが出るのもとても邪魔です。

function.phpにコードを記述

数行のコードを追記するだけで可能ですが、「function.php」を編集しますので、注意が必要です。

function.phpを直接編集せず、いざという時にはセーフモードもある便利なプラグインもあります。

以下「Code Snippets」プラグインについての詳細です。

function.phpを直接触らず、いざという時はセーフモードもあるプラグイン

function.phpを直接編集するカスタマイズの際は、注意しないとワードプレス自体が動かなくなってしまう事があります。当然、バックアップをとっておいたり、注意深く編集はしますが「万一」の場合のドキドキはありますよね。そこで今回は、fun...

ayaito.net

その他にも「WP Code」というプラグインもあります。

コード記述

【例】コードはお問合せフォームが「contact」の場合

https://ayaito.net/contact/

ContactFormのCSSとJavaScrptを必要なページのみ読み込む

// ファイルのロード停止
add_filter( 'wpcf7_load_js', '__return_false' );
add_filter( 'wpcf7_load_css', '__return_false' );
// 限定ページのみロード
function cf7_enqueue_scripts_and_styles(){
if ( is_page(array( 'contact', 'XXX' , 'XXX' ) ) ) {
if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
wpcf7_enqueue_scripts();
}
if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
wpcf7_enqueue_styles();
}
}
}
add_action( 'wp_enqueue_scripts', 'cf7_enqueue_scripts_and_styles');

array(‘contact‘, ‘XXX’ , ‘XXX’)
「contact」はお問合せページのサンプルですので書き換えて下さい。
XXXの部分を設置したいページのパーマリンク（スラッグ名）に変更し、必要なページを「,（半角カンマ）」で区切って記述して下さい。

recaptchaのJavaScrptを必要なページのみ読み込む

問合せプラグインがContactForm以外でも、会員制プラグインの登録フォームなどでももちろん利用できます。

単一ページの場合

// お問い合わせページ以外では「reCAPTCHA」を読み込ませない

function load_recaptcha_js() {
if ( ! is_page( 'contact' ) ) {
wp_deregister_script( 'google-recaptcha' );
}
}
add_action( 'wp_enqueue_scripts', 'load_recaptcha_js',100 );

複数ページの場合

// 必要なページ以外では「reCAPTCHA」を読み込ませない

function google_recaptcha_v3() {
if (!is_page(array('contact', 'XXX' , 'XXX'))) {
wp_deregister_script('google-recaptcha');
}
}
add_action('wp_enqueue_scripts', 'google_recaptcha_v3', 99);

array(‘contact‘, ‘XXX’ , ‘XXX’)
「contact」はお問合せページのサンプルですので書き換えて下さい。
XXXの部分を設置したいページのパーマリンク（スラッグ名）に変更し、必要なページを「,（半角カンマ）」で区切って記述して下さい。