ワードプレス

reCAPTCHAをContact Form 7(お問い合わせフォーム)のみに読み込み制限をかける

読み込み制限アイキャッチ画像

会社のWebサイトやBlogを運営していく中で問い合わせ窓口が必要となってきます。会社のWebサイトであれば電話での問い合わせができますが個人のBlogなどでは、メールでのやり取りがメインになると思います。

WordPressのサイトであればプラグインContact Form 7でお問い合わせページを設置し簡単にお問い合わせフォームを作成可能。

しかし、お問い合わせフォームはスパムの標的になりやすく、大量のスパムメールが届くことがあるため、Contact Form 7と認証システムreCAPTCHAを導入している方が多いと思います。

問題となるのが、reCAPTCHA導入によってサイト全体が重くなってしまう。

reCAPTCHAのJS転送サイズは141.2KiBと他のJSに比べて読み込みに負荷がかかっている事がわかります。

▪PageSpeed Insights (パフォーマンス計測サイト)
https://pagespeed.web.dev/

reCAPTCHAのネットワーク通信量
reCAPTCHAのネットワーク通信量

reCAPTCHAは、Webフォームなどに登録する際、botなどによる悪質なアクセスからWebサイトを守るための機能で必須になります。

そこで、reCAPTCHAはサイト全体に適応するのではなく、お問い合わせフォームがあるページのみreCAPTCHAのJSを読み込ませるやり方について解説します。

Contact Form 7もお問い合わせページ以外でも読み込みまれているので、読み込みをお問い合わせページのみに制限する方法も追記しています。

プル

読み込み速度が改善し、セキュリティの強化もバッチリなので設定しましょう。

サイトパフォーマンスの違い

「reCAPTCHAがある時のパフォーマンス」と「reCAPTCHAがない時のパフォーマンス」の違いになります。

reCAPTCHAがあるページ
reCAPTCHAがあるページ
reCAPTCHAがないページ
reCAPTCHAがないページ

サイトのパフォーマンスの数値が30と大きく違うことが確認できます。reCAPTCHAのJSがいかに重いかが実感できる数値ですね。

Contact Form 7の読み込み制限

Contact Form 7のCSSJavaScriptの読み込みをお問い合わせページ(contact)のみに制限することで、サイトの高速化することができます。

子テーマのfunctions.phpに下記コードを入力します。

なお子テーマについてわからない方はこちらの記事をご確認ください。

子テーマアイキャッチ画像
子テーマでJSを読み込む方法【WordPress】WordPressのテーマを使っている場合、親テーマに独自のJSを追加して動かす事が出来ますが、親テーマのアップデートがあると編集内容が上書きされて独自のJSは消えてしまいます。子テーマに施したカスタマイズは、親テーマをアップデートしても影響はありません。サイトをカスタマイズする場合は基本子テーマに記述していかなければなりません。そこで必要になってくるのが、JSファイルを子テーマで読み込みです。ブログサイトなどで独自のJSを追加したい場合のファイル構成と追加コードについて解説。...

reCAPTCHAの制限コード

WordPress管理画面外観テーマファイルエディター子テーマ(child)functions.phpを選択。

「// コンタクトフォーム7の読み込みをcontactページのみ」の下にreCAPTCHA読み込み制限のコードを追記します。

reCAPTCHA読み込み制限
reCAPTCHA読み込み制限

functions.phpに下記コードをコピーペーストで設置。

// reCaptcha読み込み制限
function recaptcha_limitation() {
 if( ! is_page( 'contact' )){
  wp_deregister_script( 'google-recaptcha' );
 }
}
add_action( 'wp_enqueue_scripts', 'recaptcha_limitation', 50 );

reCAPTCHAの方も同様にis_page( ‘contact’ )でスラッグがcontactになっているページのみにreCAPTCHAの読み込みをおこなう記述になります。

※お問い合わせフォームページのスラッグによって( ‘contact’ )を自身のパーマリンクに合わせて記述に変更してください。

2ページ以上の指定方法

2ページ以上指定したい場合は下記の通り指定することができます。

//コンタクトフォーム7の読み込みをcontactsページとrecruitページ
function load_recaptcha_js() {
	if ( ! is_page('contacts') && ! is_page('contact-confirm') && ! is_page('recruit') && ! is_page('recruit-confirm')) {
		wp_deregister_script( 'google-recaptcha' );
	}
}
add_action( 'wp_enqueue_scripts', 'load_recaptcha_js',100 );

contactsページとrecruitページの別ページに指定したい場合は、下記の配列を追加します。

is_page(‘スラック名’)で指定できます。

↓下記本は知識ゼロからJavaScriptがわかる本です。

スラスラわかるJavaScript
スラスラわかるJavaScript

▪スラスラわかるJavaScript
初めてプログラミングを学ぶ人を対象にした“スラスラわかる”シリーズ。JavaScriptの基礎知識や作法、基本構文、基本テクニックなどを無理なく習得し、かつプログラムが自力で作れるようになるところまで。JavaScriptの基礎固めをしっかりしたい方だけでなく、ほかの入門書で挫折した方やプログラミングに苦手意識を持っている方にもおすすめの一冊です。

book
created by Rinker
¥2,530 (2022/10/04 16:20:13時点 楽天市場調べ-詳細)

読み込み制限の確認

reCAPTCHAが指定した問い合わせページのみに読み込まれているか確認します。

トップページはreCAPTCHAバッチは表示されていませんが、contactお問い合わせページには表示されているので、これで読み込み制限は完了です。

トップページ
トップページ
お問い合わせページ
お問い合わせページ

これでお問い合わせページの表示速度はそのままですが、それ以外のページ速度が改善されているはずです。

実際にPageSpeed Insights (パフォーマンス計測サイト)で計測をしてreCAPTCHAのJSが問い合わせページ以外で読み込みされていないか確認することをオススメします。

サイトの表示速度に関して、スマートフォンからWebサイトを閲覧することが圧倒的に増えてきており、このサイトも「デスクトップ 39%」に対して「モバイル 61%」となっています。

PCとスマホ
PCとスマホ

PCはスペックが高いため重いコードでもある程度高速でページ表示されますが、スマホはPCに比べてまだまだといったところで、高速化対応しないとページ読み込み速度が落ちてしまいます。

↓自身が読んで為になった本を一冊オススメします。Webページ高速化のノウハウが詰め込まれた良本です。

Webページ高速化入門
Webページ高速化入門

▪HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門
Webサイト高速化で意図せず組み込んでしまった画像ファイルや、SNSのリンク、CSSファイルの読み込み設定など、案外見おとしがちなWeb設計にあります。Webページの読み込み高速化ノウハウを体系化し、初心者レベルから丁寧に易しく解説されています。

book
created by Rinker
¥2,838 (2022/10/04 21:08:33時点 楽天市場調べ-詳細)

プラグインを使用した高速化は下記記事で詳しく解説していますので、合わせてご覧ください。

webサイトを速く表示する方法
【2022年版】Webサイトの表示速度を改善するプラグイン【WEBページ高速化】Webサイトの動きプラグイン導入やデザインを追加する際に、どうしてもサイトが重くなりパフォーマンスが悪くなってしまい、Googleの評価とユーザーの離脱率が上がってしまいます。Webサイトを見る環境にもよりますが、使用しているネット回線の速度が遅ければ、ダウンロードに時間がかかります。レンタルサーバーの契約している速度プランにも影響がある為、速度が遅い場合はどこに問題があるのかを特定しなければいけません。Webサイトの表示処理を速くしたい、そういった時はページを読み込む時のコード圧縮や画像を圧縮して出来るだけページを読み込む負担を減らす必要があります。高速化プラグイン設定で速度改善した内容をまとめました。...

reCAPTCHAバッチの位置調整

reCAPTCHAバッチにCSSを適応させてない場合は所定の位置は右下に配置されます。

この位置だと「トップに戻るボタン」と被ってしまいます。

reCAPTCHAバッチ位置
reCAPTCHAバッチ位置

なので配置を左に配置するCSSを追加します。

配置は人それぞれだと思うので自身が配置したい場所でOKだと思います。

WordPress管理画面外観カスタマイズ追加CSSに下記コードを入力。

.grecaptcha-badge {
    z-index: 1;
    left: 15px !important;
}
reCAPTCHAバッチ左配置
reCAPTCHAバッチ左配置

reCAPTCHAバッチを非表示

reCAPTCHAバッチの表示が不要な方は、非表示にすることも可能です。

非表示にする場合は、上の方で記述した制限記述で問題なく動作しているかの確認をおこなってから非表示にすることをオススメします。

.grecaptcha-badge {
    visibility: hidden;
}

reCAPTCHAをContact Form 7(お問い合わせフォーム)のみに読み込み制限の解説は以上になります。

Webページ読み込み速度は知識とテクニックが必要になってきますので、学び対応していくことです。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA