Contact Form 7 を特定のWebページにだけ動くようにする【reCAPTCHA対策】

Contact Form 7 を特定のWebページにだけ動くようにする【reCAPTCHA対策】 WordPress

こんにちは、mickです。

プロボノでWebサイトのカスタマイズをしています。
そんな中、PageSpeed InsightsでWebサイトの速度を調査すると、気になる内容が。

reCAPTCHAの処理が遅い
reCAPTCHAの処理が遅い

どうも Contact Form 7 に取り入れた reCAPTCHA v3 がWebサイトの動作に影響してることがわかります。

これ、Contact Form 7を使ってるWebページ(例えば、お問い合わせフォーム)だけなら話しはわかります。

残念ながら、すべてのWebページでContact Form 7が動いてしまい、結果的にreCAPTCHA v3が動いてしまいます

困った

ということで、これを解決する方法を紹介するのが、この投稿です。

必要なWebページにだけContact Form 7を動かす

WordPressのプラグインの仕様で、プラグインを特定のWebページにだけ動かすのが簡単ではないようです。

デフォルトの設定では、Contact Form 7 はその JavaScript と CSS スタイルシートをすべてのページにロードします。きっと、こんな無駄の多いやり方をやめて、コンタクトフォームを含むページにだけロードすればいいのに、と考えていることでしょう。その気持ちはよくわかりますが、技術的な困難があって、ページをロードする時点でそのページがコンタクトフォームを含んでいるかどうかを判断することがプラグインにとって難しいのです。

必要な場合だけ JavaScript とスタイルシートをロードさせるには

reCAPTCHA v3を使ってるとfunctions.phpの編集は効かない

Contact Form 7の公式Webサイトのココに、特定のWebページにだけContact Form 7を動かす方法が乗っています。

実際に、やってみましがた、どうやってもreCAPTCHA v3を動かすスクリプトが動いてしまい、できなかったんですよね。

⇒ 参考「サイトを軽くする、ContactForm7の最適化をしよう」

そのあと、いろいろ調べたらいい方法がありました。

プログラミングの知識不要。
ボタンをポチポチするだけで特定のWebページにだけ、Contact Form 7を動かす方法が。

WordPressといえば、はい、プラグインを使う方法です。

プラグイン Plugin Load Filter を使う

WordPressのプラグイン Plugin Load Filter を使えば、プログラミングの知識なしで特定のWebページにだけにプラグインを適用することができます。

Plugin Load Filter
Dynamically activate the selected plugins for each page. Response will be faster by filtering plugins.

ほんとう、ボタンをポチポチするだけで簡単にできます。
これから、Contact Form 7をお問い合わせページにだけ適用する方法を画像付きで紹介です。

プラグインをインストール・有効化する

Plugin Load Filter をインストールして有効化する
Plugin Load Filter をインストールして有効化する

Contact Form 7 をフィルター登録する

Plugin Load Filterの設定からContact Form 7をフィルター登録する
Plugin Load Filterの設定からContact Form 7をフィルター登録する
Contact Form 7 を Page Type に設定する
Contact Form 7 を Page Type に設定する
設定が終わったら必ず保存する
設定が終わったら必ず保存する

Page Type 有効プラグイン登録にマークがないことを確認する

Page Type 有効プラグイン登録の中で Contact Form 7 の項目にチェックがついていないことを確認する
Page Type 有効プラグイン登録の中で Contact Form 7 の項目にチェックがついていないことを確認する

Contact Form 7 を有効にしたいWebページにいって有効化する

Contact Form 7 を使いたいWebページで有効にする
Contact Form 7 を使いたいWebページで有効にする

まとめ。

Contact Form 7 を特定のWebページにだけ動くようにする方法を紹介しました。

特に、 reCAPTCHA v3 を使うとContact Form 7は間違いなく遅くなります。

なので、使わないWebページにまでContact Form 7が動くとPageSpeed Insightsのスコアが下がっても仕方ないんです。

Contact Form 7 + reCAPTCHA v3 を使っている方はぜひ、この方法を試してみてください。
Contact Form 7を使っていないWebページのスコアは、間違いなく上がります。

自分が試した環境での実績
改善前:モバイル20、パソコン40
改善後:モバイル30、パソコン50

記事を読んでくれて嬉しいです。
今日もありがとうございました。

初稿 2021/02/28

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