035
テーマにスタイルシート（cssファイル）を正しい方法で読み込む
Library
WordPressでスタイルシートを読み込むには、<head>に<link>タグを直接書き込むのではなく、wp_enqueue_style()という関数を使用します。
| 用例 |
|
|---|---|
| 関連 | |
| Codex |
テーマのスタイルシートを正しい方法で読み込む
テーマのスタイルシート、style.cssを読み込むには、wp_enqueue_style()という関数を使用します。
WordPress関数
wp_enqueue_style( $handle, $src, $deps, $ver, $media )
WordPressで使用するスタイルをキューに追加します。すでにwp_register_style()を使って登録している場合は、ハンドル名を渡すだけでキューへ追加されます。
$handle | スタイルの名前。すでに登録済みの名前を入れると、新しいスタイルはキューへ追加されないので注意 |
|---|---|
$src | スタイルシートまでのURL |
$deps | このスタイルを読み込む前に読み込むべきスタイルの名前（$handle）を配列形式で渡す。初期値はarray() |
$ver | バージョン番号を指定できる。ブラウザのキャッシュにかかわらず、新規スタイルを確実に読み込ませる場合などに使用できる。初期値はfalse |
$media | <link>の目media属性を指定できる。初期値は'all' |
たくさんの引数があり、どれも初見では理解しにくいですが、単にテーマのスタイルシートを読み込みたいだけであれば、functions.phpに次のようなコードを書けば問題ありません。
function twpp_enqueue_styles() {
wp_enqueue_style( 'main-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'twpp_enqueue_styles' );wp_enqueue_style()の第1引数にはスタイルの名前を、第2引数はスタイルシートまでのURLを渡します。スタイルシートの名前は、たとえばプラグインのスタイルシートの名前などと被らないよう注意してください（通常プラグインが側で名前を工夫しているはずですので、あまり気にする必要はありません）。get_stylesheet_uri()はテーマのスタイルシートまでのURLを取得する関数です。
この結果、<head>タグ内には次のようなリンクタグが出力されます。
<link rel='stylesheet' id='main-style-css' href='http://localhost/minimalist/wp-content/themes/minimalist/style.css?ver=4.8.2' type='text/css' media='all' />style.css以外のCSSファイルを読み込む
たとえばテーマのフォルダにcssというフォルダを作成し、その中にstyle01.cssというスタイルシートを保存したとします。このスタイルを読み込むには、functions.phpに次のように記載します。
function twpp_enqueue_styles() {
wp_enqueue_style(
'sub-style',
get_template_directory_uri() . '/css/style01.css'
);
}
add_action( 'wp_enqueue_scripts', 'twpp_enqueue_styles' );get_template_directory_uri()はテーマのフォルダまでのURLを返す関数です。
また、サイト外にあるCSSも読み込むことが可能です。たとえばGoogle Fontsのフォントを利用する場合は、次のように記載します。
function twpp_enqueue_styles() {
wp_enqueue_style(
'open-sans',
'https://fonts.googleapis.com/css?family=Open+Sans:400,700'
);
}
add_action( 'wp_enqueue_scripts', 'twpp_enqueue_styles' );これでOpen Sansフォントを利用できるようになりました。
スタイルシートが読み込まれる順番を制御する
あるスタイルシートprimary.cssを最初に読み込み、そのあとにsecondary.cssを読み込む必要があるとします。このような依存関係を制御するには、wp_enqueue_style()の第3引数を使用します。
function twpp_enqueue_styles() {
wp_enqueue_style(
'primary-style',
get_template_directory_uri() . '/css/primary.css'
);
wp_enqueue_style(
'secondary-style',
get_template_directory_uri() . '/css/secondary.css',
array( 'primary-style' )
);
}
add_action( 'wp_enqueue_scripts', 'twpp_enqueue_styles' );10行目の第3引数は、「’primary-style’がキューされた後にキューする」という意味だと解釈してください。これにより、primary.cssの<link>タグが出力された後に、secondary.cssの<link>タグが出力されます。
Comment