WordPressでCSSを追加するwp_enqueue_style()の解説

WordPressに独自のCSSを追加したい時に使用する関数です。

内部CSSだけでなく外部CSS(CDN)を追加する時にも使う関数ですので、是非使い方をマスターしましょう。

まとめ記事紹介

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

これを読むだけでOK！

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

wp_enqueue_style()

wp_enqueue_style() 初期値

wp_enqueue_style(
    string           $handle,
    string           $src = '',
    string[]         $deps = array(),
    string|bool|null $ver = false,
    string           $media = 'all'
)

wp_enqueue_style() の簡潔コード

wp_enqueue_style($handle, $src, $deps, $ver, $media);

$handle string 必須

スタイルシートの名前。判別するのに使うため一意である必要があります。

$src string

スタイルシートへの絶対URL。

デフォルト：''

$deps string[]

依存するスタイルシートのハンドル名を指定（既に登録されている$handleを指定）

指定したスタイルシートの後に、このスタイルシートが読み込まれる。

デフォルト：array()

$ver string|bool|null

スタイルシートのバージョン番号を指定する文字列 (存在する場合)

キャッシュ無効化の目的でクエリ文字列として URL に追加されます。

$verがfalseに設定されている場合、現在インストールされているWordPressのバージョンと同じバージョン番号が自動的に追加されます。

nullに設定すると何も追加されません。

デフォルト：false

$media string

スタイルシートに定義されているメディアを指定する文字列を指定。

例）print・screen ・(orientation: portrait)・(max-width: 640px)

デフォルト：all

外部CSS(Font Awesome)を指定

Font Awesome v6.4をCDNで読み込む例

add_action('wp_enqueue_scripts', function () {
    wp_enqueue_style(
        'font-awesome',
        'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css',
        [],
        '6.4'
    );
});

CDNを読み込むための例としてFont Awesome v6.4を指定するコード例です。

コードを記載する場所はテーマ、functions.php、プラグイン内で記述する良いでしょう。

上記のコードを記載するとHTMLのソースには以下のタグが挿入されます。

<link rel='stylesheet' id='font-awesome-css' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css?ver=6.4' type='text/css' media='all' />

内部CSS(子テーマ内)を指定

子テーマフォルダ内に保存したCSSを読み込む例

add_action('wp_enqueue_scripts', function () {
    wp_enqueue_style(
        'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        [],
        null
    );
});

内部ファイルを指定する場合のコード例です。

コードを記載する場所は子テーマフォルダのfunctions.phpに記述すると良いでしょう。

get_stylesheet_directory_uri()は現在有効化しているテーマのディレクトリURLを取得する関数です。子テーマのパスを取得したい場合はこの関数を必ず使います。

上記のコードを記載するとHTMLのソースには以下のタグが挿入されます。

<link rel='stylesheet' id='child-style-css' href='https://it-manabi.com/wp-content/themes/swell_child/style.css' type='text/css' media='all' />

適切にバージョン管理する方法

ファイルの最終更新時刻を利用

add_action('wp_enqueue_scripts', function () {
    wp_enqueue_style(
        'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        [],
        filemtime(get_stylesheet_directory() . '/style.css')
    );
});

filemtimeを利用してバージョン管理をしています。

var指定ではget_stylesheet_directory_uri()ではなくget_stylesheet_directory()を使用している点に気を付けてください。

style.cssファイルが更新されると適切なタイムスタンプに更新されます。

タイムスタンプをdate関数で整形した場合のコード例

add_action('wp_enqueue_scripts', function () {
    wp_enqueue_style(
        'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        [],
        date('YmdHis', filemtime(get_stylesheet_directory() . '/style.css'))
    );
});

こちらの方がカスタマイズする際にソースを確認した時に分かりやすいのでオススメです。

条件分岐で挿入するページを指定する方法

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

add_action('wp_enqueue_scripts', function () {
    if (is_page('contact-us')) {
        wp_enqueue_style(
            'font-awesome',
            'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css'
        );
    }
});

上記のコードはcontact-usというスラッグを持つ固定ページでのみCSSを挿入するコード例です。

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

まとめ記事

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

これを読むだけでOK！

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