Contact Form 7 v5.4以降にバージョンアップしたため読み込み制限が機能しなくなった時の修正方法【v5.5.1検証済み】

この記事は公開から１年以上経過しています。

こんにちは、チーフクリエイターのSHOJIです。

2021年2月25日にリリースされた『Contact Form 7 5.4』（※10/22現在 v5.5.1）ですが、更新したことによって、お問い合わせフォームに関連する様々な不具合が生じており、当ブログでも各トラブルシューティングについて紹介させていただきました。

2021年3月7日公開記事：『お問い合わせフォームが送信できない！Contact Form 7 バージョン5.4 への更新で Contact Form 7 add confirm が正常に動作しない件』
https://info-con.co.jp/tips/wordpress-15-contact_form_7_add_confirm/

2021年10月18日公開記事：『Contact Form 7 v5.4にアップデートして確認画面へ遷移しなくなった Contact Form 7 add confirm の修正方法【v5.5.1検証済み】』
https://info-con.co.jp/tips/wordpress-25-contact_form_7_add_confirm-v2

今回は『Contact Form 7 v5.4以降にバージョンアップしたため読み込み制限が機能しなくなった時の修正方法』と題して、バージョンアップしたことで特定のページでJavaScriptとCSSの読み込みがされず、お問い合わせフォームが機能しなくなる不具合と、その解決策についてご紹介します。

• \\　目 次　//
• 不具合の症状
• 修正方法
• 解説
• あとがき

不具合の症状

プラグイン『Contact Form 7』を有効化すると、全ページにてJavaScriptとCSSを読み込むため、フォームを設置していないページにまで影響し、サイトレスポンスが悪くなってしまいます。

そのため、ネット上の多くの記事で［function.php］に『Contact Form 7』のJavaScriptとCSSの読み込みを、お問い合わせページのようなフォームを設置しているページのみ制限する方法が紹介されています。

以下のようなコードで紹介されていますが、みなさんは読み込み制限されていませんか？

ですが、『5.4』以降にバージョンアップすると、すべてのページでJavaScriptとCSSの読み込みがされず、お問い合わせフォームが機能しなくなります。
 

修正方法

解決策のひとつとして「読み込み制限をやめる」ことで、お問い合わせフォームの機能を回復することができますが、みなさんが求めているのはソレではないはず。

バージョンアップをしつつ、読み込み制限も行いたい場合は、［function.php］に記述したコードを以下のように変更すると不具合が解消されます。

また、複数のページに対して読み込み制限を行う場合には、以下のように［function.php］に記述したコードを変更します。

 

解説

この不具合に関しては「wpcf7_enqueue_scripts」と「wpcf7_enqueue_styles」の関数がうまく動作していない可能性があるため、この関数を使わない方法で記述してみました。

条件分岐タグの「is_page」に「!」を追加することで、パラメータに入力した特定のページ（参考画像では'contact'）を除いたすべてのページにおいて、以下の内容が実行されます。

「wp_dequeue_style」「wp_dequeue_script」を使用すると、特定のスタイルシートやスクリプトを読み込まないようにすることができるので、それぞれに削除したいファイルのハンドル名（参考画像では'contact-form-7'）を入力します。

これによって、特定したページを除くすべてのページで『Contact Form 7』のJavaScriptとCSSを削除する（ファイルを読み込まないようにする）ことができます。

ちなみに、ファイルのハンドル名については、JavaScriptとCSSそれぞれの「id」で確認できます。
『Contact Form 7』のCSS
　→ id='contact-form-7-css'
『Contact Form 7』のJavaScript
　→ id='contact-form-7-js'
それぞれの「id」における『-css』および『-js』の前までの記述がハンドル名になります。

あとがき

最近、『Contact Form 7』関連のご相談が多く、私が書くブログ記事もこれに関連するものばかりになってきました笑。

今回ご紹介したケースは、前回のご相談者とはまた別の方で、『Contact Form 7』のバージョンを『5.4.2』にバージョンアップしたのに伴い、お問い合わせフォームが機能しなくなったことから、調べてみたところ『Contact Form 7』のJavaScriptとCSSが読み込まれていないことに気がついたそうです。

自身では修正方法が分からずに、一旦は［function.php］に記述した読み込み制限のコードを削除して、デフォルトの全ページで読み込む仕様に戻されたようですが、改善策があれば参考に教えてほしいとのことでしたので、今回のコードをお伝えして解決していただきました。

ネット上では、ご相談者と同じ方法で『Contact Form 7』の読み込み制限をする方法が紹介されているため、かなりの方が採用されているかと思われます。

実際に動作確認をするか、特定のページのソースを表示してJavaScriptとCSSが読み込まれているかどうか確認すれば簡単に分かりますので、『Contact Form 7』の読み込み制限されている方で、『5.4』以降にバージョンアップされている場合は大至急、点検されることをおすすめします！
 

• 前の記事へ

  新メンバー紹介：MANA（アシスタント）

• 次の記事へ

  井村屋から期間限定でめちゃうま「アップルパイバー」新登場！