WordPressのCSSやjavascriptの出力を個別に削除する方法

WordPressのプラグインを沢山インストールすると、要らないスクリプトやスタイルシートを削除したくなる事があります。

当サイトでもプラグインを使わないページではcssとjsの出力制限を行い、ページの読み込みを軽くするために、この関数を使っています。

自分で色々とWordPressをカスタマイズしたいと考えた時に使う頻度が多い関数となりますが、似ている関数も多く、最初はどのように使えば良いのか。悩むかもしれません。

しかし理解すれば簡単な関数ですので、是非この機会に覚えていきましょう。

まとめ記事紹介

削除じゃなくcssやjavascriptを追加したい。保守性、メンテナンスを考えて適切な処理を行いたい。とお考えの方は、こちらのまとめ記事も併せてご覧ください。

これを読むだけでOK！

【保存版】WordPressでcssやjavascriptを追加・削除する方法まとめ ワードプレスの軽量化のため特定のページのみcssやjavascriptを表示したい。それ以外のページでは削除したい時に役立つ、追加・削除の関数をまとめた記事です。似た関数が多く、使い所を間違わないよう丁寧に解説していますので是非参考にして下さい。

早見表

CSS削除：wp_deregister_style()

wp_deregister_style() 初期値

wp_deregister_style(string　$handle)

$handle string 必須

削除するスタイルシートの名前。

使用例

add_action('wp_enqueue_scripts', function () {
    wp_deregister_style('delete-style');
});

CSS削除：wp_dequeue_style()

wp_dequeue_style() 初期値

wp_dequeue_style(string　$handle)

$handle string 必須

既にエンキューされている削除したいスタイルシートの名前。

使用例

add_action('wp_enqueue_scripts', function () {
    wp_dequeue_style('delete-style');
});

wp_deregister_style()とwp_dequeue_style()の違いとは？

どちらも同じ引数を持ち、削除する方法も同じに見えます。

では何が違うのか？どう使い分けるのか？その答えはスタイルシートの解除方法に違いがあります。

wp_register_style()で登録されたスタイルシートはwp_dequeue_style()では削除できないと言うことです。

つまり削除したいスタイルシートが、どちらの関数で登録されているのか？というのを調べた上で適切に使わないとダメという訳です。

また調べる上で、wp_register_style()とwp_enqueue_style()の違いを理解していないと、どうやって調べたら良いのか。どちらが使われているのかの判断もできません。

下記記事にて使い方、違いなどを詳しく解説していますので、理解が浅い方は是非参考にして下さい。

wp_register_style()の解説

WordPressにCSSを登録するwp_register_style()の解説 コピペOK！様々な状況で使えるコード例を複数掲載しています。wp_register_style()はWordPressにCSSをコア登録(事前予約)し、スタイルシートの依存関係を適切に処理したい時に使用する関数です。引数の紹介もしているので自分なりにカスタマイズしてお使い下さい。

wp_enqueue_style()の解説

WordPressでCSSを追加するwp_enqueue_style()の解説 コピペOK！様々な状況で使えるコード例を複数掲載しています。wp_enqueue_style()はWordPressに独自のCSSを追加したい時に使用する関数です。引数の紹介もしているので自分なりにカスタマイズしてお使い下さい。

JS削除：wp_deregister_script()

wp_deregister_script() 初期値

wp_deregister_script(string　$handle)

$handle string 必須

削除するスクリプトの名前。

使用例

add_action('wp_enqueue_scripts', function () {
    wp_deregister_script('delete-script');
});

jQueryを上書きしたい場合のコード

add_action('wp_enqueue_scripts', function () {
    // WordPressに登録されているjQueryを削除
    wp_deregister_script('jquery-core');

    // 新たに好きなバージョンのjQueryを登録
    wp_register_script(
        'jquery-core',
        'https://code.jquery.com/jquery-3.7.0.min.js',
        [],
        null
    );

    // 上のコードだけでは出力しないので、出力をしたい場合は下記を記載
    wp_enqueue_script('jquery');
});

JS削除：wp_dequeue_script()

wp_dequeue_script() 初期値

wp_dequeue_script(string　$handle)

$handle string 必須

既にエンキューされている削除したいスクリプトの名前。

使用例

add_action('wp_enqueue_scripts', function () {
    wp_dequeue_script('delete-script');
});

wp_deregister_script()とwp_dequeue_script()の違いとは？

どちらも同じ引数を持ち、削除する方法も同じに見えます。

では何が違うのか？どう使い分けるのか？その答えはスクリプトの解除方法に違いがあります。

wp_register_script()で登録されたスクリプトはwp_dequeue_script()では削除できないと言うことです。

つまり削除したいスクリプトが、どちらの関数で登録されているのか？というのを調べた上で適切に使わないとダメという訳です。

また調べる上で、wp_register_script()とwp_enqueue_script()の違いを理解していないと、どうやって調べたら良いのか。どちらが使われているのかの判断もできません。

下記記事にて使い方、違いなどを詳しく解説していますので、理解が浅い方は是非参考にして下さい。

wp_register_script()の解説

WordPressにjavascriptを登録するwp_register_script()の解説 コピペOK！様々な状況で使えるコード例を複数掲載しています。wp_register_script()はWordPressにjavascriptをコア登録(事前予約)し、スクリプトの依存関係を適切に処理したい時に使用する関数です。引数の紹介もしているので自分なりにカスタマイズしてお使い下さい。

wp_enqueue_script()の解説

WordPressでjavascriptを追加するwp_enqueue_script()の解説 コピペOK！様々な状況で使えるコード例を複数掲載しています。wp_enqueue_script()はWordPressに独自のjavascriptを追加したい時に使用する関数です。引数の紹介もしているので自分なりにカスタマイズしてお使い下さい。

ハンドル名の確認方法

削除したいハンドル名が分からなければ削除が出来ません。

プログラムのコードを読み解ける知識があれば問題ないのですが、そうでない場合は関数だけ知っても使いこなせませんよね。

そういった方は以下のコードをfunctions.phpに記載して、調べたいページでソースコードを調べてみましょう。

ソースの開き方は、マウスの右クリック時のメニュー最下部にソースの確認項目があります。

ハンドル名の確認コード

add_action('wp_head', function() {
    $text = "【ハンドル名】%s\n【ファイル】%s\n\n";
    global $wp_styles;
    echo "\n<!--\n=====スタイルシート=====\n";
    foreach ( $wp_styles->queue as $val ) {
        printf($text, $wp_styles->registered[$val]->handle, $wp_styles->registered[$val]->src);
    }

    global $wp_scripts;
    echo "=====スクリプト=====\n";
    foreach ( $wp_scripts->queue as $val ) {
        printf($text, $wp_scripts->registered[$val]->handle, $wp_scripts->registered[$val]->src);
    }
    echo "-->\n";
}, 9999);

ソースコードでの表示例

<!--
=====スタイルシート=====
【ハンドル名】admin-bar
【ファイル】/wp-includes/css/admin-bar.min.css

【ハンドル名】wp-block-library
【ファイル】/wp-includes/css/dist/block-library/style.min.css

【ハンドル名】classic-theme-styles
【ファイル】

【ハンドル名】global-styles
【ファイル】

=====スクリプト=====
【ハンドル名】admin-bar
【ファイル】/wp-includes/js/admin-bar.min.js
-->

調べたハンドル名を関数の引数に指定するだけでOKです

削除するページを指定する方法

is_single()やis_page()などで条件分岐する

add_action('wp_enqueue_scripts', function () {
    // contact-usというスラッグを持つ固定ページでのみ削除
    if (is_page('contact-us')) {
        wp_dequeue_style('page-style');
        wp_dequeue_script('page-script');
    }
    
    // 投稿IDが92の記事でのみ削除
    if (is_single(92)) {
        wp_deregister_style('single-style');
        wp_deregister_script('single-script');
    }
});

条件分岐の変数を修正するだけで自由に削除ページを指定できるので、個別に読み込ませたくないファイルがある場合は積極的に条件分岐を使っていきましょう。

簡単なまとめ

スタイルシートもスクリプト、どちらも似た関数が用意されています。

理解できてないうちは、混乱し適切に使えないかもしれません、しかし。

WordPressのコアに事前登録しておくのがwp_register関数であり、予約登録を消したい場合はwp_registerを使う。

フロントエンドに出力するキューに登録する作業がwp_enqueue関数であり、エンキューを取り消したい場合はwp_dequeueを使う。

言葉の意味をしっかりと理解すれば、迷うことなく適切に使いこなせるので、分からいまま使うのではなく、当サイトで説明しているページをじっくりと読めば理解できるように解説をしていますので、是非この機会に使い方をマスターしてみましょう。

おすすめ記事紹介

WordPressにCSSやJSを追加・削除する方法を全て網羅し、分かりやすく整理したまとめ記事も作成しておりますので、より理解を深めるためにお読み下さい。

これを読むだけでOK！

【保存版】WordPressでcssやjavascriptを追加・削除する方法まとめ ワードプレスの軽量化のため特定のページのみcssやjavascriptを表示したい。それ以外のページでは削除したい時に役立つ、追加・削除の関数をまとめた記事です。似た関数が多く、使い所を間違わないよう丁寧に解説していますので是非参考にして下さい。