技術

[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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

wgetコマンドで指定のサイトをダウンロードしてみる。

wgetコマンドって? 下記の形式のコマンドを叩くと、指定のURLからファイルを …

no image

AWS CLIでInvalidSignatureException Error

ECRにイメージをpushするために、dockerログインしようとして遭遇しまし …

no image

[Rails]link_toをhelperから使う

こんばんは Railsでviewを作成している時に、helperからlink_t …

no image

【Rails】deviseを日本語化する

こんばんは railsでログイン機能を作る時にdeviseを使う方は多いのではな …

no image

【ionic】$ionicHistory.clearCache()が効かぬ!

どうも中田です。   ログアウトしたら、viewの情報を初期化したい! …