Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

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

cssでボタンをレスポンシブ対応にする方法(微調整必要なしで楽ですよ)

どうも、チャーさんです。   あなたはcssでボタンをレスポンシブにしたい、 かつブレークポイントごとに微調整する手間ひまの、 必要のないボタンを作る方法はないかと思ってませんか? &nbs …

no image

cssの効率的な学習方法を知りたいなら読んでください。

  どうも、チャーさんです。   あなたはcssの学習方法を模索していますか? どうしたらもっと効率よく早く学習し上達できるのか、 その方法を探していますか?   この記 …

no image

webページにトップへ戻る機能をつける簡単な方法「2行書けばできます」

どうも、チャーさんです。   あなたはwebページにトップへ戻る機能を、 つけたいと思っていませんか?   この記事ではトップへ戻るを作る方法を、 紹介してます。   & …

no image

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

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

no image

cssの読み込み方法を3つ紹介「どれも簡単です」

どうも、チャーさん(@chaa___san)です。   あなたはcssの読み込み方法がわからず、 困っていますか?   この記事ではcssの読み込み方法を3つ紹介してます。 なので …

no image

ファビコンをワードプレスに設定する方法「手順つき」

  どうも、チャーさんです。   あなたはファビコンをワードプレスに、 設定し表示させたいですか?   この記事では、ファビコンをワードプレスに、 設定させる方法を紹介し …

no image

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

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

no image

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

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

no image

cssのレスポンシブの書き方「初心者向け記事」

どうも、チャーさんです。   あなたはcssのレスポンシブの書き方を、 知りたいと思っていませんか?   この記事では、cssのレスポンシブの書き方、 メディアクエリ、コードの具体 …

no image

liタグを横並びにする方法。この方法なら15秒でできますよ。

どうも、チャーさんです。   あなたがliタグを横並びにしたい、 そう思っていませんか?     この記事では、liタグを横並びにする方法を、 書いています。 &nbsp …

no image

メニューに下線をだすcss(マウスでホバーした時に)

どうもチャーさんです。 あなたはメニューに下線をだすcssを 探していますか?   この記事では、メニューの上に マウスを持っていくと、メニューに下線が 表示される方法を書いています。 &n …

no image

position:absoluteがレスポンシブでずれるのを解決する簡単な方法

どうも、チャーさんです。   あなたはposition:absoluteが、 レスポンシブにすると、ずれるということで、 困っていませんか?   画面サイズを変えるだけで、 位置が …

no image

cssの書き方コメントが知りたいならこの記事をどうぞ。

どうも、チャーさんです。   この記事ではcssの書き方の1つ、 コメントについて書いてます。   具体的には、 ・そもそもコメントとは? ・コメントを書く方法 ・実用的なコメント …

no image

ブートストラップの使い方を初心者向けに紹介

どうも、チャーさんです。   あなたはブートストラップを使ってみたい、 または使わないといけないけど、 使い方がわからない。   導入の仕方も、何したらいいかもわからない。 そんな …

no image

wordpressの画像のurlを取得する方法

どうも、チャーさんです。 あなたはwordpressの画像のurlを取得する方法を、 探していますか?   この記事では、wordpressの画像のurlを取得し、 表示する方法を書いていま …

最新記事

チャーさん

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

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

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