技術

[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

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

関連記事

[AWS Cli] brew install awscli が失敗!

どうも中田です awsコマンドがないよーって言われたので、再度インストールするこ …

【Rails】ActionController::InvalidAuthenticityToken (ELB,EC2)

どうも中田です。 また出ました。赤い画面。 日々いろんなサイトを見てますが、この …

docomo雑談対話APIを使って会話BOTを作りました。(LINE BOT + Heroku + Rails + docomo雑談API)

こんばんは 前回、LINE BOTを無料で試してみました。heroku + Ra …

Google PolyをFusion360でお試し

Googleさんが公開した無料の3Dデータライブラリ Poly AR・VRアプリ …

no image

【Grunt】楽々デプロイ(grunt-rsync)

どうも、中田です。 gruntでアプリをデプロイするときにどうやったらいいかぁ〜 …