WordPressでhead内に自動で読み込まれるCSSとJavaScriptファイルを読み込ませない3つの方法

WordPressのテーマ内にある「wp_head()」関数は、WordPressが用意してあるjQueryやプラグイン各種が設定したJavaScriptファイルやCSSを自動でHTMLの「head」内に書き込みます。

これらのファイルが必要なら良いのですが、使う必要が無い場合はページの読み込みスピードを上げるためになるべく読み込みたくないですよね。

そこで、WordPressでhead内に自動で読み込まれるCSSとJavaScriptファイルを読み込ませない方法を3つ紹介します。

1.テーマファイル内に記述

テーマファイル内の「wp_head();」の直前に記述する。

JavaScriptの場合

「wp_deregister_script()」を使い「wp_enqueue_script()」で指定したJavaScriptファイルを読み込まないようにする。
jQueryの場合はこのようになる。

<?php
	wp_deregister_script( 'jquery' );
	wp_head();
?>

プラグインにより追加されるJavaScriptを読み込まないためには、プラグインファイルを「wp_enqueue_script」で検索して、「wp_enqueue_script」関数内の最初の引数を調べる。

例えばJetPackの「devicepx-jetpack.js」を読み込まないようにするため、JetPack内を「wp_enqueue_script」で検索すると

wp_enqueue_script( 'devicepx', set_url_scheme( 'http://s0.wp.com/wp-content/js/devicepx-jetpack.js' ), array(), gmdate( 'oW' ), true );

というコードが見つかる。最初の引数「 ‘devicepx’」を「wp_deregister_script()」に与えれば良い。

<?php
	wp_deregister_script( 'devicepx' );
	wp_head();
?>

CSSの場合

「wp_dequeue_style」を使い「wp_register_style()」で指定したCSSファイルを読み込まないようにする。

先程のように読み込みたくないプラグイン内を「wp_enqueue_style」で検索する。

JetPackの「top-posts/style.css」を読み込みたくない場合は、JetPack内を「wp_register_style」で検索すると

wp_register_style( 'jetpack-top-posts-widget', plugins_url( 'top-posts/style.css', __FILE__ ), array(), '20141013' );

というコードが見つかる。最初の引数「jetpack-top-posts-widget」を「wp_dequeue_style()」に与える。

<?php
	wp_dequeue_style( 'jetpack-top-posts-widget' );
	wp_head();
?>

これで「top-posts/style.css」を読み込まなくなる。

追記：「wp_register_style」で見つからなければ「wp_enqueue_style」でも探す。読み込まれたcssファイル名を直接検索するものあり。

2.functions.php内に記述

テーマファイル内にある「functions.php」で指定する方法。上記の「wp_deregister_script()」と「wp_dequeue_style()」を使うところまでは同じだが、関数内に記述しフックに登録する必要がある。

「functions.php」内に独自関数を作成する。ここでは「my_delete_plugin_files」という名前にしてみた。関数内に先ほどの記述をし、「add_action」で「wp_enqueue_scripts」に「my_delete_plugin_files」を登録。

function my_delete_plugin_files() {
	wp_deregister_script('jquery');
	wp_dequeue_style( 'jetpack-top-posts-widget' );
}
add_action( 'wp_enqueue_scripts', 'my_delete_plugin_files' );

他にも読み込ませたくないファイルがあれば関数内に追加していけば良い。

Noticeエラー

jQueryを読み込ませないときは

wp_deregister_script( 'jquery' );

と記述したが、これだとデバッグモード時に

Notice: Undefined index: jquery in /var/www/wordpress/wp-includes/class.wp-scripts.php on line 201

Notice: Trying to get property of non-object in /var/www/wordpress/wp-includes/class.wp-scripts.php on line 201

というエラーが表示される。解決策として2つ見つけた。

一つ目は無理矢理な方法で非推奨。実行は自己責任で。エラーの原因の「$wp_scripts」内の値を削除する。functions.phpの先ほどの記述より前に

global $wp_scripts;
unset($wp_scripts->queue[0]);

を書く。これでNoticeエラーは表示されなくなる。

もう一つは次で紹介する3つ目の方法で読み込まなくさせるとエラーは表示されない。

3.ファイル自体読み込ませない

個別に指定するのが面倒くさく、そもそも勝手にCSSやJavaScriptを読み込んでほしくない時に有効な方法。この設定をすると動かなくなったり表示が崩れるプラグインもあるので要注意。

ファイル自体を読み込まないようにするには「remove_action」を使用する。

CSSファイルを読み込まないようにするには

remove_action( 'wp_head', 'wp_print_styles',8);

JavaScriptをhead内で読み込まないようにするには

remove_action( 'wp_head', 'wp_print_head_scripts',9);

footer内で読み込まないようにするには

remove_action( 'wp_head', 'wp_print_footer_scripts',20);

を「functions.php」に記述すれば良い。

おわりに

いろいろ自動でやってくれるWordPressは便利ですが、余計なものもありますので必要な物だけ使えるようになりたいですね。