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

Tweet

Pocket

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

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

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

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

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

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

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

//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();
    }
?>

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

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

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

上記の「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 とスタイルシートをロードさせるには
 

Tweet

Pocket

おすすめ記事:

WordPress の隠しページ!? 全オプションが変更できる「All Options」 【WordPress】プラグイン「PHP Compatibility Checker」でPHP互換性チェックをしてみました WordPressでブログサイトに海外テーマを使い続けてきて日本のテーマを使わなかった理由 【WordPress】ウィジェットエリアに自分で選んだピックアップ記事を表示する方法 【WordPress】書いた記事の「更新日」を表示させるテーマのカスタマイズ方法 【WordPress】プラグイン「P3(Plugin Performance Profiler)」でプラグインの負荷を調べてみました！ 【WordPress】WP Super Cacheが有効化も削除も出来なくなった状態から削除できた方法 WordPressで記事を読むのにかかる所要時間を表示させる方法1 WordPressのメディアのアップロード上限を上げる方法まとめ 【WordPress】プラグイン「Theme Check」でのテーマチェックの仕方