WordPressにスタイルシートを読み込むwp_enqueue

WordPressに親テーマのスタイルシートを読み込んだり、子テーマのスタイルシートを読み込んだり、自分で作成したCSSファイルを読み込んだりを関数のwp_enqueue_styleを使って読み込んでみました。

WordPressにスタイルシートを読み込むときのwp_enqueue_styleの使い方を説明します。

1. WordPressにスタイルシートを読み込む
- 1.1. wp_enqueue_styleの特徴
- 1.2. wp_enqueue_styleの引数
2. 親テーマでスタイルシートを読み込む
3. 子テーマのスタイルシートを読み込む
4. wp_enqueue_styleで複数のスタイルシートの読み込み
5. wp_enqueue_styleで読み込んだスタイルシートの確認

WordPressにスタイルシートを読み込む

WordPressでスタイルシートを読み込むときの方法はheadに直接読み込んだりPHPでechoして読み込んだり何種類かの方法がありますが、せっかくWordPressを使用してるのでWordPressにある関数を使用して正しくスタイルシートを読み込む方法を使いたいと思います。

すぐに使わないと思ったとしても使い方の理解を深めておくのもありですね。

wp_enqueue_styleの特徴

WordPressでスタイルシートの読み込みができる関数は「wp_enqueue_style」です。

<?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ?>

WordPressのwp_enqueue_styleの特徴として、スタイルシートを読み込むと読み込んだスタイルシートがキュー(待ち行列)に追加できてアクションフックすることによりスタイルを読み込むことができます。

そしてwp_enqueue_styleで読み込むとWordPressのテーマ内で使用する複数のスタイルシートが存在する場合でもfunctions.phpにコードの記述をして管理し読み込むのでメンテナンス性も向上するのではないでしょうか。

wp_enqueue_styleの引数

wp_enqueue_styleには引数があり、()カッコの中で引数を第五引数まで指定ができます。

<?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ?>

$handle

初期値：なし

wp_enqueue_styleのハンドル名を書く部分の引数です。

ハンドル名はwp_enqueue_styleで出力されたスタイルシートのidになる部分とした使い方ができます。

$src

初期値：空文字列

wp_enqueue_styleでスタイルシートを指定するときのファイルまでのURLを書く引数です。

使い方は$srcの引数でファイルまでのURLを書くときにget_template_directory_uri()で書きます。スタイルシートまでのURLを指定するときはget_stylesheet_uri()を使用して使います。

get_template_directory_uri()は主に親テーマのとき、get_stylesheet_uri()は子テーマのときに使用することが多いです。

$deps

初期値：array()

依存関係を書くときに指定する引数です。

wp_enqueue_styleで読み込むスタイルシートの依存関係、つまり読み込み順序を決めるときには第三引数で（array）を書いて優先順位を決める使い方ができます。

$ver

初期値：false

スタイルシートのバージョン番号を指定する部分です。スタイルシートのバージョンを指定したりして、そのスタイルシートを確実に読み込ませたいなどで使用する引数です。

$media

初期値；’all’

スタイルシートが定義されているメディアを指定するときに使用する引数です。

wp_enqueue_styleの引数()カッコの中で必ず必要な引数は「$handle」です。

その他の引数でよく使用するのは$srcと$depsの第三引数までの使用が多くなるかと思います。

親テーマでスタイルシートを読み込む

WordPressのwp_enqueue_styleで引数も使用して親テーマでスタイルシートを作成して読み込む場合の使い方です。

子テーマでスタイルシートを管理することが多いので、あまり実際に親テーマ側でスタイルシートを増やしたことがないので作成して読み込ませてみました。

例えば親テーマのCSSフォルダに「practice.css」というCSSファイルを作成してwp_enqueue_styleでキューに入れて読み込むという場合の使い方。

function ore_enqueue_styles() {
  wp_enqueue_style(
  'oreno-style',
  get_template_directory_uri() . '/css/practice.css'
  );
}

add_action( 'wp_enqueue_scripts', 'ore_enqueue_styles' );

functions.phpに記述をします。

引数の説明で紹介したようにwp_enqueue_styleの第一引数にハンドル名をつけます。例では「’oreno-style’」です。

このときの「’oreno-style’」がスタイルシートが読み込まれたときにidとして「oreno-style-css」となります。

そして第二引数にはget_template_directory_uri()を使用して読み込むスタイルシートのファイルまでのURL指定をします。

最後に(‘wp_enqueue_scripts’, ‘ore_enqueue_styles’ );と書きadd_actionという関数でore_enqueue_stylesという関数を呼び出してます。

読み込まれた出力結果は上記のようにスタイルシートとしてhead内に組み込まれる仕組みです。

子テーマのスタイルシートを読み込む

次はWordPressでスタイルシートを読み込むときに子テーマのスタイルシートを読み込んだ場合の使い方ですが、wp_enqueue_styleで親テーマのスタイルシートを読み込んでから子テーマのスタイルシートの読み込みをするようにします。

function theme_enqueue_styles() {
	wp_enqueue_style( 'parent-styleA', get_template_directory_uri() . '/style.css' );
	wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-styleA'));
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

WordPressの子テーマのスタイルシートを読み込む場合には引数で紹介した第三引数の$depsでarray()を使用してスタイルシート同士の依存関係を作ります。

1個目のwp_enqueue_styleで先に親テーマのスタイルシートを追加します。

そして2個目のwp_enqueue_styleで子テーマのスタイルシートを追加します。

2個目の子テーマ読み込みのwp_enqueue_styleには第二引数を使用してget_stylesheet_directory_uri()で子テーマのスタイルシートまでのファイル指定、そして親テーマのスタイルシートが読み込まれてから子テーマのスタイルシートを読み込ませるために第三引数でarray()のカッコ内に1個目で指定したハンドル名を書きます。

そうすると出力結果は親テーマのスタイルシートの読み込み後に子テーマのスタイルシートが依存関係を作り読み込めます。

wp_enqueue_styleで複数のスタイルシートの読み込み

さらに子テーマのスタイルシートと自分で作成した子テーマ側に存在するスタイルシートが複数になってる場合もあるかと思います。

使用してるWordPressテーマでメインのスタイルとサブで使用するスタイル、ページごとのスタイルなど分割して管理をするケースだと思います。

このような場合でもwp_enqueue_styleを使用してまとめて読み込むことができます。

function theme_enqueue_styles() {
	wp_enqueue_style( 'parent-styleA', get_template_directory_uri() . '/style.css' );
	wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css' );
        wp_enqueue_style( 'lesson-style', get_stylesheet_directory_uri() . 'css/lesson.css', array('parent-styleA'));
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

上記のコードを例とします。

子テーマ側でlesson.cssというスタイルシートを作成したのですが、この場合も子テーマでスタイルシートを読み込むので親テーマのスタイルシートを先に読み込んであげるようにします。

依存関係をつけるための引数arrayの書き方も同じなのですが、私がよく間違えるのはコードが増えるので第二引数で使用するget_template_directory_uri()とget_stylesheet_directory_uri()の間違い、ファイルまでの指定をする記述ミスに注意です。

それはないだろってことではenqueue部分のqをcにしてしまうとかたまにやらかします。