wordpressでページごとに読み込むcssファイルを変える
linkタグで読み込むのは非推奨
<link type="text/css" rel="stylesheet" href="<?php echo get_template_directory_uri() . '/style.css'; ?>">
これでも問題なく読み込めますが、WordPress開発では非推奨の方法になります。
理由としては、後述するwp_enqueue_style()を使ったほうが
・ファイルの重複読み込みを防げる
・functions.phpで一元管理できる
・ファイルの読み込み順序を指定できる
というメリットがあるからです。
wp_enqueue_style()で読み込む
<?php
add_action( 'wp_enqueue_scripts', function(){
wp_enqueue_style( $handle, get_template_directory_uri() . 'xxx.css', $deps, $ver, $media);
});
$handle
他のCSSファイルと区別するためのハンドル名です。必ず固有の名称を付けてください。
$deps
依存関係を指定します。先に読み込んでほしいスタイルシートがあれば、そのハンドル名を記述してください。CSSはより後から読み込んだものが優先される決まりがあります。依存関係が特になければ、array()と記述します。
$ver
スタイルシートのバージョンを指定します。
$media
通常はスタイルシートにメディアクエリを書くことで、メディアごと(パソコンやスマホ、タブレット)にスタイルを分岐させますが、ファイル読み込み時点で分岐させることができます。
たとえば、(max-width: 1024px) と書けばブラウザの横幅が1024px以下の時だけ、このスタイルシートを読み込めます。初期値はallです。
上記を踏まえると
<?php
add_action( 'wp_enqueue_scripts', function(){
wp_enqueue_style(
'style1',
get_template_directory_uri() . 'style1.css',
array(),
'1.0',
'(max-width: 1024px)'
);
});
のように書けます。
ページごとに異なるスタイルシートを読み込む
add_action( 'wp_enqueue_scripts', function(){
if( in_category('sports') ) {
wp_enqueue_style('sports', get_template_directory_uri() . 'sports.css', array(), '1.0', 'all');
}
});
add_action内にif文を書くことで、たとえばカテゴリごとに異なるスタイルシートを読み込ませることが可能です。
※is_category()関数は、現在のページがカテゴリアーカイブページかどうかを確認します。
※in_category()関数は、特定のカテゴリに属する投稿かどうかを確認します。