どうもチャーさんです。
あなたはwordpresで、条件分岐させて、
css（デザイン）を切り替えたいと思っていませんか？
ページごとに違うデザインを施せるように
したい、そう思っていませんか？
この記事では、wordpressで、
条件分岐でcssを切り替える方法を書いてます。
なのでページごとにデザインを切り替える
ことができるようになります。
ということで、あなたが上記のようなことを
したいと思っているのならば、
このまま下にスクロールして読んでみてください。
スポンサードサーチ
目次
wordpressで条件分岐を使いcssを切り替えるには
でまず結論からです。
ページごとにデザインを切り替えるには、
以下の３つをしましょう。
1wordpressの条件分岐を使い変数の中身をつど変える、
2cssのクラス名を変数で出力すること
3各クラス名にcssを記述する。
です。
順番に説明します。
wordpressの条件分岐を使い変数の中身をつど変える
まずwordpressには、
is_category()などという関数がありますが、
これとif文を組み合わせれば、
カテゴリーごとに、行う処理を
変えることができます。
例えば、こんな感じです。
if(is_category(‘カテゴリー名’)){
処理内容
}
で、ここまでは普通のことですが、
cssを条件分岐させるには、
ここの処理内容のとこに、
変数を入力します。
例えば
if(is_category(‘カテゴリー1’)){
$変数=’class1′;
}
if(is_category(‘カテゴリー2’)){
$変数=’class2′;
}
としておけば、カテゴリーごとに、
違うクラス名を用意することができます。
wordpressではis_category()を使えば、
カテゴリーごとに、勝手に記述を実行してくれますので、
クラス名を自動で変更できるわけです。
cssのクラス名を変数で出力すること
で、次の手順ですが、
変数をクラスの部分に記述しましょう。
例えば、以下のような感じです。
<div class=”<?php echo $変数名;?>”>
でこうしておくと、カテゴリーが変わるごとに、
クラス名の部分に出力されるクラス名が、
自動的に変わるわけです。
例えば、
if(is_category(‘カテゴリー1’)){
$変数=’class1″;
}と書けば、
でカテゴリー１をみてる時は、
<div class=”class1″>
になるわけですし、
if(is_category(‘カテゴリー2’)){
$変数=’class2′;
}と合わせて書いとけば、
カテゴリー２を表示してる時は、
<div class=”class2″>
になるわけです。
各クラス名にcssを記述する。
でここで手順３番目で、
あとはもうお分かりだと思いますが、
ここでそれぞれのクラス名に対して、
違うcssの記述をすれば、デザインを切り替えれます。
例えば、
.class1 {
background:blue;
}
.class2 {
background:red;
}
みたいな感じですね。
で上記３つをやっておくと、
カテゴリーが変わるごとに、
クラス名が切り替わります。
そして、htmlのタグのクラスの部分に、
それぞれ違うクラス名が自動的に出力されます。
そして、それぞれのクラス名で書いておいた、
cssが読み込まれて、条件分岐的にcssを
切り替えれるわけです。
また最初の条件分岐の部分ですが、
is_category以外にも色々と
条件分岐に使える関数があります。
なのでそこはwordpressの公式の
関数をみてみましょう。
スポンサードサーチ
まとめ
はいということでまとめに入ります。
wordpressで条件分岐させてcssを
切り替えるには、
1wordpressの条件分岐を使い変数をつど変える、
2cssのクラス名を変数出力すること
3各クラス名にcssを記述する。
以上３つをやりましょう。
するとデザインをページごとに切り替える
というようなことができるようになります。
さてということで、やりかたがわかったと
思いますので、早速あなた自身で、
やってみましょう。
やればあなたの制作スキルが上達しますよ。
ということで、読んでいただいてありがとうございました。
それでは。
チャーさん
