技術

[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ページだけで読み込まれるようになりました!

-技術

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

rubyでシンボリックリンクを作成する

rubyでシンボリックリンクを作る機会がありました。 どちらも、srcへのシンボ …

[ Ionic ]Cannot find module ‘../node_modules/xml2js’ でVRプラグインを消せない!

こんにちは。たなかです。 Ionicでandroidをbuild中、下記のような …

no image

【ionic】Androidビルド失敗!Multiple dex files define

どうも、中田です。 久しぶりにionicでビルドしたらAndroidビルドに失敗 …

no image

【Rails】helperからbrタグを含めた文字列を返したい時

こんにちは プライベートではもっぱらRailsを触っています。 触ってからそんな …

no image

【ionic】ナビゲーションバーがちらつく

どうも、中田です。 ionicでアプリを作っていて、なんかナビゲーションバーがち …