WordPressの「Contact Form 7」で必要なページだけCSSとJavascriptを読み込むようにする方法

WordPressの「Contact Form 7」というメールフォーム用のプラグインを使っています。

設定も簡単にできてあっという間にメールフォームを実装できる便利なプラグインなんですが、メールフォームがないページにもheadタグ内にCSSとJavascriptが表示されるのが気になってしまって。

というわけで、必要ないページではCSSとJavascript自体を読み込まないようにする方法をご紹介します。

Contact Form 7に関するCSSとJavascriptの記述を消す

ソースを見たらこのようにContact Form 7に関するものが差し込まれてます。

これが全ページに表示されてしまってるんですね。コンタクトフォームに関するものなのでコンタクトフォームを設置したページにのみ表示されていれば良いんです。

無駄なソースによって表示が遅くなるなどの影響が出る可能性がありますしね。サイトの高速化のためには無駄なものは消した方が良いんです。

というわけで、まずすべてのページからこの記述を消し、コンタクトフォームを設置したページにだけその記述を戻すという手順でやってみます。

functions.phpに2行追記してCSSとJavascriptの記述を消す

デフォルトでは全ページにContact Form 7に関するCSSとJavascriptが表示されるようになってしまってるので、これを消しましょう。

やることは簡単で、functions.phpに下記の2行を追記するだけ。

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

これですべてのページでContact Form 7用のCSSとJavascriptが表示されなくなりました。

コンタクトフォーム用のページにのみ追記

先ほどの作業でコンタクトフォームを設置したページにも表示されなくなってます。

ここで改めてコンタクトフォームを設置したページにのみContact Form 7用のCSSとJavascriptを表示させましょう。

下記の記述を今度はheader.phpのheadタグ内に記述してください。場所はどこでもいいんですが、style.cssの前後がいいと思います。

<?php if( is_page( 'contact' ) ): ?>
<link rel="stylesheet" href="<?php echo plugins_url(); ?>/contact-form-7/includes/css/styles.css" id="contact-form-7-css">
<?php endif; ?>

1行目で「固定ページのcontactというスラッグのページのみ」という条件で分岐させてます。もしお問い合わせフォームのページが「support」というスラッグであればcontactをsupportにする、という具合にご自身の環境に合わせてくださいね。

2行目はでWordPressのプラグインフォルダまでのパスを記述してます。絶対パスで書いてももちろん大丈夫ですが、上記のように書いておけばコピペで使えますので、ぜひこのまま持っていってください。

もしページが複数あるようならこちら。3ページ以上であれば1行目にうまいこと書き加えてください。

<?php if( is_page( array( 'contact' , 'reserve' ) ) ): ?>
<link rel="stylesheet" href="<?php echo plugins_url(); ?>/contact-form-7/includes/css/styles.css" id="contact-form-7-css">
<?php endif; ?>

functions.phpだけに書く方法も

上記の手順でdelaymaniaに実装した後に見つけたんですけども、header.phpに書かなくてもfunctions.phpに書くだけで解決する方法がありました。こちらの方が楽かもしれません。

function wpcf7_file_control()
{
    add_filter("wpcf7_load_js", "__return_false");
    add_filter("wpcf7_load_css", "__return_false");

    if( is_page("contact") ){
        if( function_exists("wpcf7_enqueue_scripts") ) wpcf7_enqueue_scripts();
        if( function_exists("wpcf7_enqueue_styles") ) wpcf7_enqueue_styles();
    }
}
add_action("template_redirect", "wpcf7_file_control");

最後に

おそらく他のプラグインでも応用が効くと思います。

気になる方はぜひお試しください。

• WordPressでお問い合わせフォームを付けるならContact Form 7が細かいところまで設定できて便利
• Contact Form 7でお問い合わせフォームに自動返信機能を付ける
• Contact Form 7でお問い合わせの次のページ(サンクスページ)を実装する方法
• WordPressのContact Form 7のメールフォームで複数の宛先を設定したいときは？
• WordPressのプラグイン「Contact form 7」のメールフォームでの簡単なスパム対策