【WordPress】ワードプレスで不要なCSSやJSを除外する方法

ワードプレスのプラグインの中には、独自の CSS や JS を自動的に呼び出すものがあります。
JSはともかく、CSSは不要になることが多いと思います。
ソースを読み出す分、パフォーマンス的にもよろしくないので、あらかじめ除外しておきましょう。

ワードプレスでCSSを読み込まないようにする方法

まずはページ上で読み込まれているCSSのハンドル名を確認します。
下記のPHPコードを、確認したいページのテンプレートファイルに記述してください。

<?php
echo '<ul>';
foreach( wp_styles()->queue as $handle_css ) {
	echo '<li>'.$handle_css.'</li>';
}
echo '</ul>';
?>

これにより、現在ページ上で読み込まれているCSSハンドルが一覧で表示されます。
除外したいCSSのハンドル名を確認したら、次に下記のコードを functions.php に記述します。

function dequeue_plugins_style() {
	wp_dequeue_style( '削除したいハンドル名' );
}
add_action( 'wp_enqueue_scripts', 'dequeue_plugins_style', 100 );

wp_dequeue_style の中で、先に確認したCSSハンドル名を指定すれば該当のCSSが呼び出されなくなります。
なお、特定のページで読み込まないように指定する場合は is_page などの条件分岐タグを使えばOKです。

function dequeue_plugins_style() {
	if ( is_page( '固定ページスラッグ' ) ) {
		wp_dequeue_style( '削除したいハンドル名' );
	}
}
add_action( 'wp_enqueue_scripts', 'dequeue_plugins_style', 100 );

ワードプレスでJSを読み込まないようにする方法

CSSの除外でも注意が必要ですが、JSを除外するときはより一層の注意を払ってください。

まずはページ上で読み込まれているJSのハンドル名を確認します。
下記のPHPコードを、確認したいページのテンプレートファイルに記述してください。

<?php
echo '<ul>';
foreach( wp_scripts()->queue as $handle_js ) {
	echo '<li>'.$handle_js.'</li>';
}
echo '</ul>';
?>

CSSの時と同様、現在ページ上で読み込まれているJSハンドルが一覧で表示されます。
除外したいJSのハンドル名を確認したら、下記のコードを functions.php に記述します。

function dequeue_plugins_script() {
	wp_deregister_script( '削除したいハンドル名' );
}
add_action( 'wp_enqueue_scripts', 'dequeue_plugins_script', 100 );

これについても、条件分岐タグで適用するページを指定することができます。

function dequeue_plugins_scripts() {
	if ( is_page( '固定ページスラッグ' ) ) {
		wp_deregister_script( '削除したいハンドル名' );
	}
}
add_action( 'wp_enqueue_scripts', 'dequeue_plugins_scripts', 100 );

wp_print_styles と wp_print_scripts は非推奨

本記事の内容はすでに多くのサイトで解説されている内容ですが、サイトによっては wp_enqueue_scripts ではなく、wp_print_styles や wp_print_scripts が使われている場合があります。
動作する内容にほぼ違いはないのですが、これらはかなり前から公式に非推奨とされている要素です。
もし非推奨のほうを使っていた場合は、wp_enqueue_scripts に変更しておきましょう。

TOMIX編集部

株式会社トミックス