![スタビジ](https://www.stabusi.com/wp-content/uploads/2021/11/gimon02.png)
「Contact Form 7」のスクリプトの読み込みを、
特定ページのみ
にして表示速度の改善をしたい。
こんなテーマに関する記事です。
![スタビジ](https://www.stabusi.com/wp-content/uploads/2023/02/man01.png)
「Contact Form 7」のスクリプトは、標準では全ページに読み込まれてしまいます。それを特定ページのみにスクリプトを読み込ませることで、他のページの表示速度の改善につながります。
![スタビジ](https://www.stabusi.com/wp-content/uploads/2023/09/aac22-e1706014055454.png)
ワードプレスの問合せフォーム用のプラグインは、
「Contact Form 7」
が有名です。
国産ですし、安心ですね。
少し細かいお話しになりますが、「Contact Form 7」のスクリプトは、問合せページ以外のページにも、読み込みがされてしまいます。
デフォルトのままだと、表示速度にも影響がでます。
ですので、
問合せフォームのページのみに、「Contact Form 7」のスクリプトの読み込ませる
という設定をすると、問合せフォーム以外のページの表示速度が改善します。
設定方法について、下記に、忘備録的に記載します。
「Contact Form 7」のスクリプト読み込み設定
![スタビジ](https://www.stabusi.com/wp-content/uploads/2023/09/aac29-e1705664921991.png)
設定方法としては、下記の2つの方法があります。
・公式ページに記載されている方法
・別の方法
それぞれについて、順に説明していきます。
結論として、
後者の設定
のほうが簡単です。
【注意】
phpファイルに記述しますので、
設定前に必ずデータのバックアップ
をとって、万が一の場合、設定を元に戻せる状態で作業を行うとともに、設定は、自己責任となります。
公式ページに記載されている方法
下記の2つの設定を行います。
【参考】
それぞれ、functions.phpファイルに記載をしますので、慎重に対処する必要があります。
functions.phpファイルに安全に追記できるプラグインとして、「Code Snippets」があります。
![functions.phpファイルに安全に追記できるプラグイン「Code Snippets」](https://www.stabusi.com/wp-content/uploads/2024/02/1114220.jpg)
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 スタイルシートをロードする
https://contactform7.com/ja/loading-javascript-and-stylesheet-only-when-it-is-necessary/
例として、「お問い合わせ」という名前のページがあって、そのページが唯一コンタクトフォームを含んでいるというケースについて考えてみましょう。それから、「お問い合わせ」ページ専用に ‘contact.php’ というテンプレートファイルがテーマのフォルダに用意されているとしましょう。この「お問い合わせ」ページに限っては Contact Form 7 の JavaScript の CSS スタイルシートのロードを行う必要があるというわけです。これをするためには、’contact.php’ テンプレートファイルを編集して、次の内容を挿入します:
<?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が適応されないようです。
(送信後のメッセージの枠が表示されないなど)
参考にしたサイトは、公式サイトも含めて、下記サイトです。
![](https://digitalnavi.net/wp-content/uploads/2019/05/20190504-01.jpg)
![](https://takblog.site/wp-content/uploads/2019/09/wp6.jpg)
以上、「「Contact Form 7」のスクリプトの読み込みを、特定ページのみにする」についてでした。
![スタビジ](https://www.stabusi.com/wp-content/uploads/2021/11/ok02.png)