【WordPress】プラグイン「Contact Form 7」のjsファイルとcssファイルを特定のページにだけ読み込む方法

プラグイン「Contact Form 7」は簡単に問い合わせフォームを作ることができる有名なプラグインなので使っている方も多いでしょう。

基本的に問い合わせフォームは問い合わせページなどの特定のページにしか必要はないのですが、Contact form7を使用するとすべてのページにjsファイルとcssファイルが読み込まれてしまいます。

負荷軽減対策として、「Contact Form 7」のjsファイルとcssファイルを特定のページにだけ読み込むようにしてみることにしました。

1 すべてのページで「Contact Form 7」のjsファイルとcssファイルを読み込ませないようにする
- 1.1 「wp-config.php」ファイルに記述する方法
- 1.2 「functions.php」ファイルに記述する方法
2 特定のページにだけ「Contact Form 7」のjsファイルとcssファイルを読み込ませるようにする
- 2.1 特定の問い合わせフォームを含むテンプレートファイルがある場合
- 2.2 特定の問い合わせフォームを含む固定ページがある場合
3 あとがき

すべてのページで「Contact Form 7」のjsファイルとcssファイルを読み込ませないようにする

特定のページにだけ読み込ませるためにまずはすべてのページで「Contact Form 7」のjsファイルとcssファイルを読み込ませないように設定します。
「wp-config.php」ファイルに記述する方法と「functions.php」ファイルに記述する方法があります。

「wp-config.php」ファイルに記述する方法

「wp-config.php」ファイルの“編集が必要なのはここまでです ! WordPress でブログをお楽しみください。”というコメントが含まれているところより上の部分に以下の記述をすることによって設定ができます。

※「wp-config.php」ファイルのパーミッションを一時的に400⇒644にして書き込み権限を与えて、書き込み後に644⇒400に戻しました。

//cotanct form 7 のjs,cssファイルを読み込ませない
define ('WPCF7_LOAD_JS', false);
define('WPCF7_LOAD_CSS', false);

「functions.php」ファイルに記述する方法

Contact Form 7 3.9以降のバージョンを使っている場合では、以下のフィルターフックを「functions.php」ファイルに記述することによって設定ができます。

add_filter( 'wpcf7_load_js', '__return_false' );
add_filter( 'wpcf7_load_css', '__return_false' );

特定のページにだけ「Contact Form 7」のjsファイルとcssファイルを読み込ませるようにする

上記ですべてのページで「Contact Form 7」のjsファイルとcssファイルを読み込ませないように設定できたので、後は特定の特定のページにだけ読み込ませるようにします。

特定の問い合わせフォームを含むテンプレートファイルがある場合

テーマに「お問い合わせ」ページ専用のテンプレートファイル(ここでは以下”contact.php”とします)が存在する場合にはその「contact.php」テンプレートファイルに以下のコードを記述することにより読み込ませることができます。

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

※ただし、上記のwpcf7_enqueue_scripts()関数とwpcf7_enqueue_styles()関数の呼び出しはwp_head()関数より前に呼び出す必要があります

特定の問い合わせフォームを含む固定ページがある場合

まずは問い合わせフォームを含む固定ページのIDを調べる必要があります。

管理画面の左メニューの「固定ページ」⇒「固定ページ一覧」にて問い合わせフォームを含む固定ページのタイトルにマウスカーソルを合わせると、ブラウザ表示の左下にリンク先のURLが表示でき、そのURLの内容を確認することにより固定ページのIDがわかります。

(wpのインストールディレクトリ)/wp-admin/post.php?post=23&action=edit

上記の「post=23」の数字が固定ページのIDです。固定ページのIDは任意の数字が割り振られるため、固定ページごとに異なります。

固定ページのIDが”23″であることを例としてwp_head()関数よりも上に記述するために、「header.php」のwp_head()関数の呼び出しよりも前に記述します。

<?php
//contact form 7 js,cssの読み込み
if (is_page('23')) {
   if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
       wpcf7_enqueue_scripts();
       wpcf7_enqueue_styles();
   }
}
?>

これで、「Contact Form 7」のjsファイルとcssファイルを特定のページにだけ読み込ませることができました！

あとがき

これで多少なりとも負荷軽減の対策にはなりました。やや手間がかかるやり方かとは思いますが、いろいろ調整やカスタマイズすることによってWordpressの構造などにも詳しくなれるため、これからもこういうことは積極的にやっていこうと思います！

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