css wordpress コーダー

wordpressで条件分岐でcss(デザイン)を切り替える方法

投稿日:

Pocket

うもチャーさんです。

あなたはwordpresで、条件分岐させて、

css(デザイン)を切り替えたいと思っていませんか?

 

ページごとに違うデザインを施せるように

したい、そう思っていませんか?

 

この記事では、wordpressで、

条件分岐でcssを切り替える方法を書いてます。

 

 

なのでページごとにデザインを切り替える

ことができるようになります。

 

ということで、あなたが上記のようなことを

したいと思っているのならば、

このまま下にスクロールして読んでみてください。

 

 

スポンサードサーチ

wordpressで条件分岐を使いcssを切り替えるには

 

でまず結論からです。

ページごとにデザインを切り替えるには、

以下の3つをしましょう。

 

 

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″;

}と書けば、

 

でカテゴリー1をみてる時は、

<div class=”class1″>

になるわけですし、

 

 

if(is_category(‘カテゴリー2’)){

$変数=’class2′;

}と合わせて書いとけば、

 

カテゴリー2を表示してる時は、

<div class=”class2″>

になるわけです。

 

各クラス名にcssを記述する。

 

でここで手順3番目で、

あとはもうお分かりだと思いますが、

 

ここでそれぞれのクラス名に対して、

違うcssの記述をすれば、デザインを切り替えれます。

 

 

例えば、

.class1 {

background:blue;

}

 

.class2 {

background:red;

}

みたいな感じですね。

 

 

で上記3つをやっておくと、

カテゴリーが変わるごとに、

クラス名が切り替わります。

 

そして、htmlのタグのクラスの部分に、

それぞれ違うクラス名が自動的に出力されます。

 

 

そして、それぞれのクラス名で書いておいた、

cssが読み込まれて、条件分岐的にcssを

切り替えれるわけです。

 

また最初の条件分岐の部分ですが、

is_category以外にも色々と

条件分岐に使える関数があります。

 

 

なのでそこはwordpressの公式の

関数をみてみましょう。

 

 

スポンサードサーチ

まとめ

 

はいということでまとめに入ります。

 

wordpressで条件分岐させてcssを

切り替えるには、

 

1wordpressの条件分岐を使い変数をつど変える、

2cssのクラス名を変数出力すること

3各クラス名にcssを記述する。

 

以上3つをやりましょう。

 

 

するとデザインをページごとに切り替える

というようなことができるようになります。

 

さてということで、やりかたがわかったと

思いますので、早速あなた自身で、

やってみましょう。

 

やればあなたの制作スキルが上達しますよ。

 

 

ということで、読んでいただいてありがとうございました。

 

それでは。

 

チャーさん

 

 

-css, wordpress, コーダー


スポンサードサーチ

関連記事

no image

レスポンシブ対応の画像にする方法。1行コードを書くだけでOK

  どうも、チャーさんです。   あなたは画像をレスポンシブ対応にしたい、 そう思っていませんか?   ブレイクポイント毎に、画像の幅を指定するのは、 もう疲れた、何か一 …

no image

cssで背景色を背景画像の上に重ねる方法「コードつき」

どうも、チャーさんです。   cssで背景色を背景画像に重ねる方法が、 知りたい。そう思っていませんか?   この記事では、cssで背景色を 背景画像の上に重ねる方法を書いています …

no image

wordpressの記事ページをカスタマイズする方法

どうも、チャーさんです。   あなたはwordpressの記事ページ、 (投稿で書いて公開したら出てくるページ) をカスタマイズしたいと思ってますか?   この記事では、wordp …

no image

wordpress popular postsでまだデータがありませんが解決し人気記事が表示された方法

どうも、チャーさんです。   あなたはwordpress popular postsが、 動作せず困っていませんか?   ちゃんとアクセスはあるのに、 まだデータがありません。と表 …

ワードプレスで文字の周りを線で囲う方法(コピペで一発でできます)

  どうもchamです。   あなたはワードプレスで記事を書いていて 囲いをつけたいと思ったことはありませんか?   ここに文字を入れる   こんな風に囲いをつ …

no image

absoluteとrelativeの違いがこれを読めば1目でわかりますよ。

  どうも、チャーさんです。   あなたはabsoluteとrelativeの違いがわからず、 困っていませんか?   またそのせいで、思ったように ページ制作に活用でき …

no image

cssで三角形を作る方法、コピペで一発でできますよ。

どうも、チャーさんです。   あなたはcssで三角を作る方法を、 探していますか?   この記事ではcssで三角を作る方法を、 書いています。     そしてこ …

no image

グーグルマップ埋め込みをする簡単3ステップを紹介

どうも、チャーさんです。   あなたは、グーグルマップの埋め込みは、 どうやってやればいいのか? と疑問を持っていませんか。   この記事では、グーグルマップの埋め込みの、 方法を …

no image

cssでボタンにhoverした時に色を変える方法

どうもチャーさんです。   あなたは、cssでボタンにhoverして、 色を変える方法を探していますか?   この記事では、ボタンホバーで、 ボタンの色を変える方法について、 お話 …

no image

レスポンシブデザインを3秒で確認できる方法「各サイズ」

どうも、チャーさんです。   あなたは、レスポンシブデザインの確認方法を、 探していませんか?   この記事では、レスポンシブデザインを、 スマホサイズ、タブレットサイズ、pcサイ …

ワードプレスでCSSを使い丸を表示する方法

どうもチャーさんです。 あなたはワードプレスで丸を表示したいと 思ったことはありませんか。   この記事では丸の作りかたを解説してるので ワードプレスなどで丸を表示したい人はどうぞ。 &nb …

no image

cssの書き方これらのセレクタを知ってればほぼ困りません

どうも、チャーさんです。   あなたはcssの書き方でセレクタに ついて色々な書きかたがあってよくわかってない、 と感じていませんか?   この記事では様々なセレクタの指定方法を …

no image

z-indexが効かない場合の解決法(relativeつけたのに効かない場合)

   どうもチャーさんです。   あなたはz-indexが効かないと困っていませんか? ちゃんとrelativeもつけてるのに、 なぜ効かないんだと悩んでいませんか?   この記事 …

no image

wordpressのメニューをカスタマイズする方法「コピペ可能」

どうも、チャーさんです。   あなたはwordpressのメニューを カスタマイズしたいと思ってませんか?   この記事ではメニューをカスタマイズし 画像を表示させる方法、またメニ …

no image

字下げをcssでやる方法。1行だけ、複数行の字下げも対応

どうもチャーさんです。   あなたは字下げをcssでどうやればいいのか? と疑問に思ってませんか?   この記事では、cssを使い、 1行だけ字下げ、複数行を字下げする方法を、 書 …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。