技術

[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

javascriptで画面サイズ毎に処理をしたい時

こんにちは 今回はjavascriptで画面サイズ毎に処理をしたい時にオススメの …

no image

railsでA server is already running~とでたときの対処法

こんにちは!コーテッグの小山です。 rails使っていて、rails sをすると …

no image

[Rails]Deviceのfacebook認証でinvalid_credentials….

こんばんは Deviceでfacebook認証機能を作っていたらinvalid_ …

LINE BOTを無料で試してみました。heroku + Rails

こんばんは たまにはエンジニアっぽいところを見せようと思い、遅ればせながら、流行 …

[ Rails ]ActiveRecord::RecordInvalidで怒られ、saveができない!

こんにちは。たなかです。 新しいプロジェクトの参画が決まって、今はrailsを書 …