WordPressで、Contact Form 7（プラグイン）が出力するCSS/JSを制御する

先日書いた「Webサイトを分析してサイトを高速化させ、AA評価を目指す（お手軽版）」の補足です。

WordPressのプラグインは wp_head() や wp_footer() でCSSやJSファイルを自動で出力しますが、必要の無いページにも出力してしまうため、無駄なファイル読み込みが発生します。
狙ったページにのみプラグインを表示する方法を探していたところ、参考になるサイトを見つけましたので、試してみました。

参考

本エントリは下記サイトを参考にさせていただきました。

• xx_print_stylesとxx_enqueue_scriptsの違い
• WordPressでテーマからJavascriptやCSSを読み込む書き方まとめ
• WordPress：プラグイン有効時に読み込むCSSやJSを削除する方法

ページによって読み込むCSS/JSを制御する

例えば、Contact Form 7のようなお問い合わせフォームでは、フォームを設置しているページでのみ出力されれば良いわけです。
そこで下記のようなアクションフックを利用してみます。

# functions.php
function deregister_files() {
	# 固定ページ "contacts" 以外の時
	if (!is_page( 'contacts' )){
		# プラグイン "contact-form-7" のCSSとJSを出力しない
		wp_dequeue_style( 'contact-form-7' );
		wp_dequeue_script( 'contact-form-7' );
	}
}
add_action( 'wp_enqueue_scripts', 'deregister_files');

ちなみに、WordPress ver3.3までは、「wp_enqueue_scripts」の代わりに「wp_print_styles」 が主に使われていましたが、現時点（ver3.9.1）では非推奨のようです。

# functions.php
# 非推奨
add_action( 'wp_print_styles', 'deregister_files');

wp_deregister_scriptを使うとNoticeメッセージが出ることがある

JavaScriptの出力を制御する方法として、「wp_dequeue_script」の他に「wp_deregister_script」というメソッドがあります。

# functions.php
wp_deregister_script( 'contact-form-7' );

これを下記の環境で、「contact-form-7」に対して使うとエラーメッセージが表示されてしまいました。

WordPress ver3.9.1
Contact Form 7 ver3.9

※ デバッグモードをONにしている必要があるかもしれません

Notice: Undefined index: contact-form-7 in {WPのパス}/wordpress/wp-includes/class.wp-scripts.php on line 169

Notice: Trying to get property of non-object in {WPのパス}/wordpress/wp-includes/class.wp-scripts.php on line 169

こちらは具体的な原因がまだ調査中なのですが、上記のように「wp_deregister_script」ではなく「wp_dequeue_script」を利用することでこのエラーは回避できました。

ということで、以前書いたWebサイトを分析してサイトを高速化させ、AA評価を目指す（お手軽版）に上記処理を加える事で、さらにサイトのパフォーマンスが上がると思われますのでどうぞ。