[wordpress]各固定ページに個別のCSSを読み込ませる

こんばんは

wordpreddでオリジナルテーマを作成している時、各固定ページに対してページ特有のCSSを読み込ませたい時があります。

今回は共通で使うCSSと固定ページで読み込ませたいCSSをそれぞれ見ていきたいと思います。
JSでも基本的な流れは同じです。

先ずはfunctions.phpの中に読み込むCSSを登録します。

function register_stylesheet() {
//共通CSS
wp_register_style('reset', get_template_directory_uri().'/common/css/reset.css');
// あるページだけで使いたいCSS(今回はcompanyページ)
wp_register_style('company', get_template_directory_uri().'/css/company/company.css');
}

次に登録したCSSを読み込ませます。あるページだけで使いたいCSSはis_pageでどこのページで読み込みたいかを指定します。

function register_stylesheet() {
register_stylesheet();
// 共通CSS
wp_enqueue_style('reset', '', array(), '1.0', false);
// あるページだけで使いたいCSS(今回はcompanyページ)
if ( is_page('company') ) {
wp_enqueue_style('company', '', array(), '1.0', false);
}
}

if ( is_page(‘company’) ) のcompanyの部分はページの「スラッグ」を記述してください。

スラッグがよくわからないという方は下記の記事が参考になるでしょう。
WordPressブログ管理者必見！ 『スラッグ』を活用しよう

これでcompany.cssはcompanyページだけで読み込まれるようになりました！