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

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

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

「Contact Form 7」のスクリプトは、標準では全ページに読み込まれてしまいます。それを特定ページのみにスクリプトを読み込ませることで、他のページの表示速度の改善につながります。

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

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

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

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

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

「Contact Form 7」のスクリプト読み込み設定
- 公式ページに記載されている方法
- 別の方法

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

設定方法としては、下記の２つの方法があります。

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

それぞれについて、順に説明していきます。

結論として、
　後者の設定
のほうが簡単です。

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

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

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

【参考】
それぞれ、functions.phpファイルに記載をしますので、慎重に対処する必要があります。
functions.phpファイルに安全に追記できるプラグインとして、「Code Snippets」があります。

functions.phpファイルに安全に追記できるプラグイン「Code Snippets」

functions.phpファイルに直接コードを書き込む際、　安全に対応できる方法を知りたい。こんなテーマに関する記事です。 functions.phpファイ…

www.stabusi.com

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が適応されないようです。
（送信後のメッセージの枠が表示されないなど）

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