WordPressにCSSを登録するwp_register_style()の解説

WordPressにCSSを登録したい時に使用する関数です。

似た関数にwp_enqueue_style()があり、何が違うのか？どこで使うのか？を分かりやすくまとめました。

単純にCSSだけを出力したいならwp_enqueue_style()を使えば良いのですが、理解せずに使うのと、理解して適材適所に使うのとでは今後の保守性やカスタマイズのやり易さに違いが出てきますので、勉強熱心な方はこちらも覚えておくと良いでしょう。

まとめ記事紹介

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

これを読むだけでOK！

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

wp_register_style()

wp_register_style() 初期値

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

wp_register_style() の簡潔コード

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

$handle string 必須

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

$src string|false 必須

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

$srcがfalseに設定されている場合、依存する他のスタイルシートのエイリアスになります。

$deps string[]

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

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

Font Awesomeの後に読み込んだり、CSSの上書きをしたい時に利用します。

デフォルト：array()

$ver string|bool|null

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

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

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

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

デフォルト：false

$media string

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

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

デフォルト：all

wp_enqueue_style()との違い

簡単に説明すると

wp_register_style()

事前予約。使いたいスタイルシートをコアに登録する関数で、これだけではキューに登録されません。

wp_enqueue_style()

wp_register_style()で登録したスタイルシートをキューに追加する関数です。登録されていないハンドル名を指定した場合は新規にキューへと追加します。

これだけではwp_register_style()って使う必要あるの？全てwp_enqueue_style()で直接使いたい所でキューにCSSを新規追加していけば良いじゃん。と思われるかもしれません。

functions.phpでちょっとしたCSSを追加したりするだけならばwp_enqueue_style()で事足りますが、依存関係が深くなりがちなプラグインやテーマを開発したり、保守性を高めたり、コードの可読性を上げたいと考えた場合はwp_register_style()を使った方が良いのです。

依存関係の簡略化

あるスタイルシートを読み込む前に必ず読み込んでおかなければならないスタイルシートをwp_register_style()の$depsに登録しておけば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'],
        null
    );
});

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

上記のコードだけではコアに登録されるだけで、キューに登録はされていないためフロントエンド側のどこにも出力されません。

登録したスタイルシートを出力したい場合は、以下のコードを記載すると依存関係を保持したまま出力されます。

使いたい場所でハンドル名を呼び出すだけでOK

add_action('wp_enqueue_scripts', function () {
    wp_enqueue_style('child-style');
});

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

Font Awesomeが挿入された箇所の後にstyle.cssが読み込まれています。

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

スタイルシートの一元管理と処理の分離

wp_register_style()を使う最大のメリットはこれでしょう。

スタイルシートの記述を全て一箇所にまとめ、使いたい所でwp_enqueue_style()にて呼び出す。

もしスタイルシートのファイル名やURLが変わったとしても、wp_register_style()の$srcを変更するだけで済む保守性の高さが魅力的です。

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

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

add_action('wp_enqueue_scripts', function () {
    wp_register_style(
        'child-style',
        get_stylesheet_directory_uri() . '/style.css',
    );
});

add_action('wp_enqueue_scripts', function () {
    wp_enqueue_style('child-style');
});

add_action('wp_enqueue_scripts', function () {
    wp_enqueue_style('child-style');
});

呼び出すアクションフック名一覧

CSSを挿入したい場所によって、指定するアクションフック名が変わります。

適切な場所を指定してカスタマイズを行いましょう。

フロントエンドにFont Awesomeを登録する例

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

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

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

add_action('wp_enqueue_scripts', function () {
    wp_register_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_register_style(
        'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        [],
        date('YmdHis', filemtime(get_stylesheet_directory() . '/style.css'))
    );
});

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

出力するwp_enqueue_style()を忘れずに

wp_register_style()はあくまでスタイルシートをコア登録(事前予約)するだけの関数です。

ソースコードに吐き出したい時はwp_enqueue_style()を必ず使う必要があります。

出力し忘れが無いように、セットで使う必要があると覚えておきましょう。

スタイルシートを出力する関数

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

まとめ記事

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

これを読むだけでOK！

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