通常のHTMLページでは、スタイルシートを読み込むために<link>タグを用います。
|
1 |
<link rel="stylesheet" id="style-css" href="http://my-domain.com/style.css" type="text/css" media="all" /> |
WordPressでは、この<link>タグを自動生成してくれるwp_enqueue_style関数が用意されています。
テーマファイルでは<link>タグは直接書かずに、このwp_enqueue_style関数を使用します。
<?php wp_enqueue_style($handle, $src, $deps, $ver, $media); ?>
$handle — スタイルシートのハンドル名
$src — スタイルシートのURL（オプション）
$deps — 関連するスタイルシートのハンドル名（オプション）
$ver — スタイルシートのバージョン（オプション）
$media — スタイルシートの対応メディア（オプション）
テーマスタイルシートを読み込む
テーマスタイルシート(style.css)を読み込むには、テンプレートのwp_head関数より前に、次にように記述します。
コード
|
1 2 3 4 5 6 7 8 9 |
<html> <head> ... <?php wp_enqueue_style('style', get_stylesheet_uri(), array(), '1.0（バージョンを記載）' ); ?> <?php wp_head(); ?> </head> |
出力されるlinkタグ
|
1 |
<link rel="stylesheet" id="style-css" href="http://my-domain.com/wp-content/themes/my_theme/style.css?ver=1.0" type="text/css" media="all"> |
第1引数$handleは、スタイルシートを区別する任意の名前が付けられます。
ここではわかりやすいように'style'としています。
第2引数$srcは、style.cssのURLを返す関数get_stylesheet_uri()を使用します。
第3引数$depsは、style.cssよりも前に読み込みたいスタイルシートのハンドル名を配列で指定します。
この引数を指定する事により、出力される<link>タグが自動的に並び替えられます。
ここでは指定の必要が無いので、空の配列array()にします。
第4引数$verには、スタイルシートのバージョンを記述します。
これは省略もできますが、バージョンを記述しておくと、スタイルシートのURLにパラメータverが追加されます。
このパラメータがバージョンアップ毎に変化する事によって、ブラウザキャッシュで古いスタイルシートが反映されてしまうのを防ぐ事ができるので、バージョン名はきちんと記述しておく事をおすすめします。
バージョン名に、テーマのバージョンを返す関数を使用すると便利です。（記事: テーマのバージョンを取得）
追加スタイルシートを読み込む
テーマスタイルシート以外の場合も同様です。
テーマファイルのディレクトリを返す関数get_stylesheet_directory_uri()を使用します。
コード
|
1 |
<?php wp_enqueue_style('additional', get_stylesheet_directory_uri() . '/css/additional.css', array(), '1.0' ); ?> |
出力結果
|
1 |
<link rel="stylesheet" id="additional-css" href="http://my-domain.com/wp-content/themes/my_theme/css/additional.css?ver=1.0" type="text/css" media="all"> |
wp_enqueue_style関数を記述する位置
wp_enqueue_style関数は、テーマの関数ファイル（functions.php）内、またはテンプレートファイル内に記述します。
子テーマの運用などのカスタマイズ性を考慮すると、関数ファイルへ記述するのがおすすめです。
関数ファイル内に記述する場合、wp_enqueue_scriptsアクションフックを使用します。
|
1 2 3 4 |
add_action( 'wp_enqueue_scripts', 'my_site_enqueue_styles' ); function my_site_enqueue_styles() { wp_enqueue_style('style', get_stylesheet_uri(), array(), '1.0' ); } |
もし、テンプレートファイルに記述する場合は、wp_head関数よりも前に記述します。
|
1 2 3 4 5 6 7 8 9 |
<html> <head> ... <?php wp_enqueue_style('style', get_stylesheet_uri(), array(), '1.0' ); ?> <?php wp_head(); ?> </head> |
wp_head関数が記述されているテンプレート以外でも、wp_head関数より前に実行される部分であればwp_enqueue_style関数を記述できます。
例えば、ヘッダーテンプレート（header.php）内にwp_head関数がある場合、メインテンプレートのget_header関数の前に記述する事もできます。
|
1 2 3 4 |
<?php wp_enqueue_style('style', get_stylesheet_uri(), array(), '1.0' ); get_header(); ?> |