コンテンツへスキップ
ホーム » WordPress:条件分岐。特定のページとその他のページでCSSを切り替える。

WordPress:条件分岐。特定のページとその他のページでCSSを切り替える。

  • by

固定ページとそれ以外のページで異なるcssフィアルを適用させたいという場面が発生しました。
検索するといろいろとやり方はあるようですが、以下の「if-else文」でやってみました。

「if-else文」を入力してみる

以下のように内に記述します。

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>

<?php if (is_page()){ //固定ページかどうか判定。そうでなければスルー。
    echo'page.css'; //固定ページならpage.cssを出力する。
}   
else if(!is_page()){ //固定ページではないかどうか判定。つまり固定ページでない全てのphpファイルが該当する。
    echo'base.css'; //base.cssを出力する。
}?>

/ ">

固定ページなら

<link rel="stylesheet" type="text/css" href="テーマファイルのURL/css/page.css" />

固定ページ以外なら

<link rel="stylesheet" type="text/css" href="テーマファイルのURL/css/base.css" />

と出力されます。

is_page()が固定ページかどうかを判定する条件式。TRUE(当てはまる)ならpage.cssを出力しますが、FALSE(当てはまらない)なら出力しないで次のelse ifの条件式に進みます。

そこの条件式は!is_page() !がつくと~ではない場合TRUE(当てはまる)、この場合は固定ページではないページは全て当てはまる、と言う意味になります。

これで固定ページとそれ以外のページで分岐ができて、それぞれに適応させたいcssへのパスが出力されます。

ちょっと調べてみましたが、条件分岐はやりたい事や、やり方によっていろいろな書き方があるようです。以下のサイトさんは勉強になりました。

WordPressのテーマデザインでよく使うPHP構文、if-else文について | WordPress(ワードプレス)コミュニティ
もう覚えなくても大丈夫!?WordPressの条件分岐タグの使い方まとめ | Oxy notes

また、テンプレートファイルがたくさんあってそれぞれに異なるcssを当てたいときはfunctions.phpに追記する方法もあるようです。

WordPress:functions.phpでJSやCSSを一元管理する方法とバージョン表記を消す方法 | NxWorld

うーん、みんなすごいです!自分ももっと勉強して自在にWordpressを操れるようになりたいです!

タグ:

コメントをどうぞ!