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


head内のcssとjavascript

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」を読み込まなくなる。

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をより自由に、思い通りに使用するにはPHPの知識が必要です。

PHPを学ぶには、Web上での情報や知識には限界があるので、人に教えてもらうのが一番の近道です。

そこでオススメなのが「CodeCamp」です。

マンツーマン指導なので、わからないことはすぐ聞けて、無料体験レッスンもあるのでどんな感じか試せます。


ITエンジニア専門スクールもオススメです。

スポンサーリンク

おわりに

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


タグ:

スポンサーリンク



この記事が役に立ったらシェアして頂けると嬉しいです!
このブログをフォロー・RSS購読もお願いします!

スポンサーリンク



  • プラグインを複数インストールしていると重複するファイルが多数head内から見つかります。(特に”Font Awesome”関連)どうしたものかと頭を抱えていましたがこの記事を読んでほぼ解決しました。
    大変助かりました。ありがとうございます。