【保存版】WordPressでcssやjavascriptを追加・削除する方法まとめ

WordPressではプラグインをインストールすると、head内や</body>の直前に独自または外部のcss・javascriptファイルを読み込むタグが挿入される物が多々あります。

普通は気にしなくて良いのですが、サイトの軽量化を考えた時。特定のページでのみ出力し、それ以外の場合は削除する挙動に変更したいプラグイン(例：Contact Form 7)も中にはあるでしょう。

今回は、そのような場合に使えるコード例を紹介しています。

早見表

cssを追加

必ず読み込むCSSがある場合はwp_register_style()を使用して依存関係をWordPressのコアに事前登録します。

wp_register_style()だけではフロントエンドに出力されません。

フロントエンドに出力(エンキュー)したい時はwp_enqueue_style()を使う必要があります。

Font Awesome後にスタイルシートを読み込む例

add_action('wp_enqueue_scripts', function () {
    // Font Awesomeを登録
    wp_register_style(
        'font-awesome',
        'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css',
        [],
        '6.4'
    );

    // 子テーマに保存したスタイルシートにfont-awesomeの依存関係を指定
    wp_register_style(
        'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        ['font-awesome'],
        date('YmdHis', filemtime(get_stylesheet_directory() . '/style.css')),
    );

    // 上記の記載だけではフロントエンドに出力されません
    // フロントエンドに出力したい場合は以下の記載を行う
    wp_enqueue_style('child-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を追加したい時に使用する関数です。引数の紹介もしているので自分なりにカスタマイズしてお使い下さい。

javascriptを追加

必ず読み込むjavascriptがある場合はwp_register_script()を使用して依存関係をWordPressのコアに事前登録します。

wp_register_script()だけではフロントエンドに出力されません。

フロントエンドに出力(エンキュー)したい時はwp_enqueue_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
    );

    // 子テーマに保存したスクリプトにjqueryの依存関係を指定
    wp_register_script(
        'custom-script',
        get_stylesheet_directory_uri() . '/script.js',
        ['jquery'],
        date('YmdHis', filemtime(get_stylesheet_directory() . '/script.js')),
    );

    // 上記の記載だけではフロントエンドに出力されません
    // フロントエンドに出力したい場合は以下の記載を行う
    wp_enqueue_script('custom-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を追加したい時に使用する関数です。引数の紹介もしているので自分なりにカスタマイズしてお使い下さい。

cssやjavascriptを削除

削除する関数はcssとjavascript、共に２つずつ用意されています。

この使い分けはregisterで登録されたファイルか。enqueueで登録されたファイルか。

この違いだけです。

registerで登録されたスタイルシートやスクリプトはdequeueの関数では登録削除が出来ません。deregisterでのみ登録削除が可能となっています。

削除したいスタイルシートやスクリプトが、どちらの関数で登録されているのか。適切に判断して使い分ける必要があります。

詳細な解説や使用例のコード例は以下の記事にて行っておりますので是非参考にして下さい。

CSS・JSの削除方法解説

WordPressのCSSやjavascriptの出力を個別に削除する方法 cssならwp_deregister_style()とwp_dequeue_style()で削除。javascriptならwp_deregister_script()とwp_dequeue_script()で出力を削除できますが、違いは何？使い所など、適切に関数を使わないと出力を制御できないので、初心者が悩む点をまとめました。

あとがき

初心者の方であれば、なんで出力する方法が二通り用意されているのか。どっちを使えば良いのか。よく分からないと悩むかもしれません。

そういう時はフロントエンドに出力するenqueueの方を使って下さい。

functions.phpに記載する、ちょっとしたカスタマイズを行いたいと考えている方もenqueueの方だけで良いでしょう。

registerの関数は本格的にテーマやプラグインを開発したいと考えている人が使えば良い関数なので、本当によく分からない。とりあえず動いたら良い。という方はenqueueを使っておけば間違いないです(笑)

しかし何かトラブルが発生した時、今後自分でカスタマイズを好きにサクサクと行いたい！と考えている方であれば、面倒でも本記事にて紹介している関連記事も全て読んで理解を深めると、今後のカスタマイズに必ず役立つと断言できますので、時間がある時にでも読んで下さいね。