reCAPTCHAのjsを任意のページだけで読み込む方法。ロゴの非表示化にもお勧め！

WordPressサイトでreCAPTCHAを任意のページだけで読み込む方法です。

当サイトではContact Form 7（お問い合わせ用のプラグイン）にreCAPTCHAを設定した後、全ページにrecaptcha.jsが読み込まれていたので対処しました。

特にPage Speed Insightのスコアが気になったり、お問い合わせページ以外でreCAPTCHAのロゴを消したい時にも参考にしてもらえる内容かと思います。

functions.phpにて「recaptcha.js」が読み込まれるページを制限します。

この記事の目次

reCAPTCHAを任意のページでのみ読み込む

ことの発端は「Contact Form 7」にGoogle reCAPTCHAをリンクさせたことでした。

サイトの全ページにreCAPTCHAのロゴが表示される...

どうやら「Contact Form 7」にreCAPTCHAを使うと、サイトの全ページにロゴが表示されてしまうようで、それがイヤなので今までに色々やってきました。

今回の作業に至るまで…

WordPressサイトで“お問い合わせ”の実装にContact Form 7を使用。

Contact Form 7を狙ったスパムメールが届くようになる。

スパム対策のために、Contact Form 7にreCAPTCHAをリンクする。

サイトの全ページにreCAPTCHAのロゴが表示される。

Googleの指示通りにテキスト追加＋CSSでreCAPTCHAのロゴを非表示にする。

reCAPTCHA用のjsがサイトの全ページで読み込まれている事に気づく…

reCAPTCHAのロゴ自体は非表示にできたのですが、その後「PageSpeed Insights」でえらくスコアダウンしていることに気が付きました。

さっそく確認してみると、PageSpeed Insightsでスコアがダウンした原因はやはりreCAPTCHAに使われるファイルの読み込みが原因という事が判明。

recaptcha.jsが全ページで読み込まれてしまう

PSIだけだとアレなので、Chromeのデベロッパーツールでも確認してみます。

サイトの全ページでreCAPTCHAのリソースが読み込まれる

recaptcha__ja.js（recaptcha__en.js）を筆頭に、reCAPTCHA関連のリソースが全てのページで読み込まれている様子。Contact Form 7にreCAPTCHを設定するだけだと全てのページにreCAPTCHAが読み込まれてしまうようです。これは対策せねば！！

そもそもreCAPTCHAはお問い合わせ（Contact Form 7）の入力フォームにしか使っていないので、トップページや記事ページにはロゴもjsも必要ありません。

という事でreCAPTCHAを任意のページ（お問い合わせページ）だけで読み込むように変更します。

reCAPTCHAを「お問い合わせページ」でのみ読み込む方法

reCAPTCHAを任意のページでだけ読み込むように変更するコードは以下です。
こちらを子テーマ内のfunctions.phpに追記すればOKです。

//お問い合わせページでのみreCAPTCHAのリソースを読み込む
function load_recaptcha_resource() {
 if ( !is_page('contactus') ) {
  wp_deregister_script('google-recaptcha');
 }
}
add_action('wp_enqueue_scripts','load_recaptcha_resource',100);

コード内の'contactus'は、Contact Form 7に使うための固定ページのスラッグを指定しないとダメなので適宜変更して下さい。