「Contact Form 7」のスクリプトの読み込みを、特定ページのみにする

「Contact Form 7」のスクリプトの読み込みを、特定ページのみにする

2022年3月23日

「Contact Form 7」のスクリプトの読み込みを、
 特定ページのみ
にして表示速度の改善をしたい。

こんなテーマに関する記事です。


スタビジ

ワードプレスの問合せフォーム用のプラグインは、
 「Contact Form 7」
が有名です。

国産ですし、安心ですね。

少し細かいお話しになりますが、「Contact Form 7」のスクリプトは、問合せページ以外のページにも、読み込みがされてしまいます。

デフォルトのままだと、表示速度にも影響がでます。
ですので、
 問合せフォームのページのみに、「Contact Form 7」のスクリプトの読み込ませる
という設定をすると、問合せフォーム以外のページの表示速度が改善します。

設定方法について、下記に、忘備録的に記載します。

参考にしたサイトは、公式サイトも含めて、下記サイトです。

デフォルトの設定では、Contact Form 7 はその JavaScript と CSS スタイルシートを…
contactform7.com
Contact Form 7のメールフォームプラグインを有効化すると、contact-form-7/inclu
digitalnavi.net
wordpressのプラグイン「Contact Form 7」のcssとjsを特定ページのみで読み込む方法を紹介します。
takblog.site
スポンサーリンク

「Contact Form 7」のスクリプト読み込み設定

スタビジ

設定方法としては、下記の2つの方法があります。
結論として、
 後者の設定
のほうが簡単です。

【注意】
phpファイルに記述しますので、
 設定前に必ずデータのバックアップ
をとって、万が一の場合、設定を元に戻せる状態で作業を行うとともに、設定は、自己責任となります。

公式ページに記載されている方法

下記の2つの設定を行います。

functions.php ファイルに下記を設定し、2行を追加して、JavaScriptとCSSのロードを無効化します。

define('WPCF7_LOAD_JS', false);
define('WPCF7_LOAD_CSS', false);

次に、お問い合わせページのテンプレートファイル(お問合せ用のphpファイル)を開いて、JavaScriptとCSSを読み込ませる設定をします。

<?php
    if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
        wpcf7_enqueue_scripts();
    }
    if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
        wpcf7_enqueue_styles();
    }
?>

公式ページには、「JavaScriptとCSSを読み込ませる設定」について下記説明があります。
内容的には、ワードプレスのテーマに、
 お問合せ専用のphpファイル
があるという前提での設定の説明ですが、文章がちょっとわかりづらいです。

設定しているテーマのお問合せ用のphpファイルを探すのが面倒かもしれません。

ステップ 2: コンタクトフォームを含んだページで JavaScript と CSS スタイルシートをロードする

例として、「お問い合わせ」という名前のページがあって、そのページが唯一コンタクトフォームを含んでいるというケースについて考えてみましょう。それから、「お問い合わせ」ページ専用に ‘contact.php’ というテンプレートファイルがテーマのフォルダに用意されているとしましょう。この「お問い合わせ」ページに限っては Contact Form 7 の JavaScript の CSS スタイルシートのロードを行う必要があるというわけです。これをするためには、’contact.php’ テンプレートファイルを編集して、次の内容を挿入します:

https://contactform7.com/ja/loading-javascript-and-stylesheet-only-when-it-is-necessary/
<?php
    if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
        wpcf7_enqueue_scripts();
    }
 
    if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
        wpcf7_enqueue_styles();
    }
?>

別の方法 

テーマフォルダ内のfunctions.phpへ、下記設定をします。
こちらも、設定するファイルは、functions.phpだけです。

※お問合せページが、「contact」の場合の設定です。

add_filter( 'wpcf7_load_js', '__return_false' );
add_filter( 'wpcf7_load_css', '__return_false' );
function cf7_enqueue_scripts_and_styles(){
    if ( is_page( 'contact' ) ) {
        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');

ただ、上記の設定をした後、
 送信後のメッセージなどのレイアウトなど
のcssが適応されないようです。
(送信後のメッセージの枠が表示されないなど)

上記とは、異なる方法

以上、「「Contact Form 7」のスクリプトの読み込みを、特定ページのみにする」についてでした。