CSSで指定した背景色を、カテゴリごとに読み分ける設定をしたい

解決済 yzk
(@yzk)

13年、 10ヶ月前

おはようございます、大変お世話になっております。
フォーラムのバックナンバーと、皆さまのあたたかなアドバイスのおかげで、WPのサイトが仕上がってきており、本当に感謝しております。
本日はもうひとつ教えていただけましたら嬉しいです。
どうぞよろしくお願い致します！

教えていただきたいのは、CSSとカテゴリーの記載をベースにして、サイトの背景色を分ける方法です。

具体的な説明をお許しください。
サイトの視覚的な見やすさ……今、どの特集の中にいるのか分かりやすくするため……に、特定のグループ（カテゴリ）の時に、背景色を変えたいと考えています。

具体的には、

カテゴリworkshopの中にいる時はAという背景色をリンクして
カテゴリbooksの時にはB
カテゴリstoreの時にはC
それ以外の時には背景色なし

という風な指定をCSSで書いて、そのカテゴリが選択された時に、CSSで指定したclassの背景を読ませたいと考えています。
読み分ける必要があるのは背景色だけですので、背景色を違えたスタイルシートを複数作って分岐設定で読み分ける方法ではなく、１枚のスタイルシートの中で分けた複数のclass指定を、カテゴリごとに読み分けるやり方を希望しています。

いろいろ調べましたら、フォーラムの
http://ja.forums.wordpress.org/topic/1589?replies=6
（カテゴリごとにヘッダーを使い分ける）

の記事の考え方が、イメージにいちばん近いと思いましたので、やってみました。
そして結果、最後の式の設定と場所が分からないので、ぜひ教えてください！
よろしくお願いします。

まずやったことは、メインCSSファイルの背景色を想定カテゴリごとに分けたことです。
背景を設定する項目のCSSをコピペで追加・分岐し、以下のようにclass分けをしました。

body{
margin: 0;
background: url(#) #fff center top;
text-align: center;
}

body-books{
margin: 0;
background: url(images/bg/maki.gif) #fff center top;
text-align: center;
}

body-workshop{
margin: 0;
background: url(images/bg/drop2.gif) #fff center top;
text-align: center;
}

貼られたリンク画像が実際に読み出せる（リンク切れになっていない）ことも確認しました。

次に読み出し先の設定なのですが、最終的に

〜のカテゴリが指定された時には、CSSで指定された背景色の〜class指定を読み出す

という式を書いて反映させたいと思っています。
そして、ここからがいろいろ分からないので、ぜひ教えてください。
よろしくお願いします。

参考にしたフォーラムの記事
http://ja.forums.wordpress.org/topic/1589?replies=6
に

私が最初に示したのはこんなに複雑なことをやる内容ではなくて、

（１）
<div class=”cat-<?php echo $cat->cat_ID; ?>”></div>

こう記述しておくだけで実際には
（２）
<div class=”cat-1″></div>
などのように変換されて表示されるので、あとはcssで

（３）
.cat-1 {
background:url(“img/header.gif”) no-repeat;
}
を必要なだけ記述でよろしいのでは？ということです;)

という箇所がありました。（番号は私がふりました）
（３）は済みましたので、次に（１）（２）の箇所ですが、フォーラムの方はヘッダー画像を変えたいというご依頼でした。
私の場合は背景色を変えるのですから、書き込み先はsingle.phpなどのファイルでよいのでしょうか。

single.php, index.php, search,phpにそれぞれ

<body>
<!– container Start –>
<div id=”container”>
<!– /container Start –>

という式がありますが、上の（２）（３）に当たるところは、ここなのかなあと思っています。

またheader.phpにも

<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen,tv,print” />

という記載があります。

複数のスタイルシートをがっつり読み分けるのなら、ここで分岐設定をした方がよいと、テンプレート制作者の方にアドバイスをいただきました。
でも今回の場合、スタイルシートは１枚だけで、その中のclass指定を読み出すので、該当箇所はここではないのかなあ……と思っております。

そこで重ねてご質問です。
私の望むやり方の場合、式を書き込むファイルと場所はどこになるのでしょうか？　
私の知識の限界線は、PHPの手前で止まっていますので、教えていただけますと幸いです。

また、自分では合っていると思っているのですが、やり方全体の方向性が間違っていましたら、それもぜひ教えていただけますと幸いに思っています。
どうぞよろしくお願い致します。

15件の返信を表示中 - 1 - 15件目 (全27件中)

1 2 →

shokun0803
(@shokun0803)

13年、 10ヶ月前
```
<?php $cat = get_the_category(); $cat = $cat[0]; ?>
<div id="container" class="body-<?php $cat->cat_name; ?>">
```
こんな感じ？（未検証）
カテゴリ名が日本語ならスラッグを使いましょう。$cat->category_nicename
トピック投稿者 yzk
(@yzk)

13年、 10ヶ月前

shokun0803さん、おはようございます。
大変お世話になっております！

昨日に続いて、今日もアドバイスをいただけること、大変嬉しいです。
また、shokun0803さんが作成された渾身のフォーラムバックナンバーを、ありがたく参考にさせていただきました。あらゆる意味で、連日大変お世話になっております。

教えていただいた上記の式で、さっそくやってみます。
式の雰囲気からして（div id=”container” ）がついていますので、まずはsingle.php, index.php, search.phpの該当箇所に、それぞれ埋め込んでみますね。

念のため式の確認ですが、たとえば、workshopのカテゴリーの時に、body-workshopというCSSのclassを呼び出すと考えた時、この式

<?php $cat = get_the_category(); $cat = $cat[0]; ?>
<div id=”container” class=”body-<?php $cat->cat_name; ?>”>

を、こう

<?php $cat = get_the_category(workshop); $cat = $cat[0]; ?>
<div id=”container” class=”body-workshop<?php $cat->cat_name; ?>”>

書き換える形でいいんですよね。
また少ない私の知識ですが、Codexによると、かっこの中のカテゴリ名は「’」マーク
がついてもつかなくてもいいんですよね？

まずは以上の前提でやってみます。またご報告させてください！
そして、致命的な理解の間違いがありましたら、ぜひ教えていただけますと幸いです。
（昨日みたいに、レスが時差にならないように気をつけます☆）

連日お世話になれること、大変嬉しいです。
どうぞよろしくお願い致します。
そして、お忙しい中レスをいただきまして、ありがとうございました！

shokun0803
(@shokun0803)

13年、 10ヶ月前

あ、いや、そのままのコードで試してください。実際に表示されたソースをみれば分かりますゆえ。

トピック投稿者 yzk
(@yzk)

13年、 10ヶ月前

shokun0803さん、おはようございます。

止めていただいて、ありがとうございました。
あらぬ方向に走り出してしまうところでした（汗）。

いただいたアドバイスを参考に、次の作業をしてみましたのでご報告させてください。

まずsingle.php, index.php, page.php３ファイルの該当の箇所のソースを、いただいたソースと書き換えてみました。

具体的には、上記３ファイルの

<body>
<!– container Start –>
<div id=”container”>
<!– /container Start –>

を

<!– container Start –>
<?php $cat = get_the_category(); $cat = $cat[0]; ?>
<div id=”container” class=”body-<?php $cat->cat_name; ?>”>
<!– /container Start –>

として保存しました。

その上でトップページを表示し、ソースを見てみました。
該当箇所と思われる箇所は、

<body>
<!– container Start –>
<div id=”container” class=”body-“>
<!– /container Start –>

です。
この操作で大丈夫でしょうか？

本当に恐縮なのですが、私はPHPを勉強したことがないので（いままさに、小さな最初の一歩を踏み出している最中です！）、再びあらぬ方向に走っていたら教えていただけますと幸いです。
まずはご報告差し上げます。どうぞよろしくお願いします！

shokun0803
(@shokun0803)

13年、 10ヶ月前

ああ、なるほど。index.phpだとcategory1つだけを取得することはできないですね。
理由は、通常index.phpはtopページなどで使用されると思いますが、ブログのtopページといえば最新記事○件などを表示しているわけでして、最新記事○件の中には通常全てのカテゴリが含まれて表示されますよね。したがって1つのカテゴリに絞ってclassを取得することは出来ません。

では、どうすれば良いのか？

「CSSで指定した背景色を、カテゴリごとに読み分ける設定をしたい」というタイトルどおりなのですが、どこの背景を変えたいのか？なのですね。

・カテゴリ一覧ページの背景（category.phpなど）
・記事を1件だけ表示している場合の背景（single.phpなど）
・記事が一覧表示されているページ（index.phpなど）の個別記事の背景

上記それぞれで処理が変わってきます。

トピック投稿者 yzk
(@yzk)

13年、 10ヶ月前

shokun0803さん、こんにちは！

いろいろご親切にありがとうございます。
そして、テストありがとうございました！
ソースを見ていただいたおかげで、うまくいかない→ぐぐる→不毛なぐるぐるが避けられて感謝です。

いただいたご質問に関して、２つご返信をお許しください。
そして、もし私の理解が的外れだったら、どうぞお許しください。
まずは一度、ご返信してみます。

まずひとつ目のご返信ですが、私のWPの設定は、トップページを固定にしています。
デフォルトでは、トップページに最新記事のリストが吐き出されてくる仕組みになっていました。今は固定に変えちゃいまして、この機能は使っていません。
ですのでトップページに関してはALL無視＆背景ナシの設定で大丈夫です。いかなるカテゴリ（ならびにclass指定した）背景も反映されず、今のまま（それがデフォルトと呼べるのか分からないが、デフォルト）で大丈夫です。
つまり、トップページには

body{
margin: 0;
background: url(#) #fff center top;
text-align: center;
}

が反映されていれば大丈夫です。

そして、より重要だと思われる、ふたつめのご返信をお許しください。
shokun0803さんにいただいたご質問

・カテゴリ一覧ページの背景（category.phpなど）
・記事を1件だけ表示している場合の背景（single.phpなど）
・記事が一覧表示されているページ（index.phpなど）の個別記事の背景

の答えですが、私が想定しているのは、以下の状況です。
結果、希望する表示がどのファイルの動作に該当するか分からないので、状況説明で一度ご返信させてください。

たとえばworkshopというカテゴリに属する記事の背景を、仮にシマウマ柄にしたとします。
そうすれば、訪問してくれる人はこの記事に対してどういう読み方をするかというと、

１）単発の記事を読む
２）その後でパンくずリストをクリックして、ひとつ前の属性の、記事がずらーーーーっと並んだ画面に戻る（人もいるかも）

という２パターンが想定される気がします。
その時に、単発の記事を読んでいる時にシマウマ柄の背景で、属性をひとつ戻ったら柄が消えるのは、少し不自然な感じがします。同じカテゴリの中を読んでいる時には、「いまworkshopに関して記事を読んでいるんだな」と分かってもらうために、シマウマ柄の背景が表示されていてほしいです。

またCodexを読んでいて、気になる記載を見つけました。
それは、

http://wpdocs.sourceforge.jp/テンプレートタグ/in_category

in_category() は、投稿に直接割り当てられているカテゴリー(新規投稿/編集でチェックしたカテゴリー)のみを考慮します。そのカテゴリーの親は考慮しません

という記載です。
そうすると私の設定の場合、シマウマ柄の背景を設定したいカテゴリは、実際にworkshopとactivityというカテゴリの２つになります。親カテゴリactivityの中に子カテゴリworkshopがあり、この親子ふたつにシマウマ柄が出てほしいです。

WPの設定上、カテゴリが２つにわかれていますが、本来activityとworkshopの２つのカテゴリを合わせて「workshop」というグループを成しているのだと分かってほしいのです。

カテゴリactivity　＋　カテゴリworkshop

　　　　　　　　　↓

　　　　　　　シマウマ柄背景

という感じで、伝わりますでしょうか。

私がイメージしているのはこんな働きですが、イメージがうまく伝わりましたでしょうか？
まずは一度、ご返信をしてみます。
どうぞよろしくお願い申し上げます！

umbrella_process
(@umbrella_process)

13年、 10ヶ月前

話の方向から外れてしまいすみません、body_class()は試してみましたか？

body_classを使うのはPHPの知識も要らなく簡単です。
そのうえで、例外的な場合のみPHPで対応した方が楽かと思いますが…。

トピック投稿者 yzk
(@yzk)

13年、 10ヶ月前

umbrella_processさん、こんにちは！
投稿を見つけてくださって、ありがとうございます。
引き続きまして、またお世話になります。
どうぞよろしくお願い致します。

さっそく、いただいたCodexのページを読んでみました。
その上で、いただいた情報とまとめてみますと……（間違った認識があったら、ぜひ教えてください。よろしくお願いします！）

body_class()はheader.phpファイルに有効である

Codexより引用
http://ja.forums.wordpress.org/topic/4326?replies=7#post-18017

WordPress 2.8 から、テーマの作者がより効果的に CSS で装飾できるようにする body 要素用の新テンプレートタグ body_class が加わりました。この関数は、HTML の body 要素（通常 header.php にある）に異なる class 属性を付与し、さらに任意の class を追加することもできます。

そのようなわけで、次にheader.phpを見てみました。
私のWPの設定ファイル、header.phpの全ソースを念のため吐き出してみますと、

<?php echo ‘<?xml version=”1.0″ encoding=”utf-8″?>’; ?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”ja” lang=”ja”>
<head>
<meta http-equiv=”Content-Type” content=”<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>” />
<meta name=”keywords” content=”<?php if ( is_home() || is_page() ) { echo ‘キーワード1,キーワード2,キーワード3,キーワード4,キーワード5’;} else {the_keyword();} ?>” />
<meta name=”Description” content=”<?php the_description(); ?>” />

<meta http-equiv=”Content-Style-Type” content=”text/css” />
<meta http-equiv=”Content-Script-Type” content=”text/javascript” />

<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen,tv,print” />

<link rel=”alternate” type=”application/atom+xml” title=”<?php bloginfo(‘name’); ?> Atom Feed” href=”<?php bloginfo(‘atom_url’); ?>” />
<link rel=”alternate” type=”application/rss+xml” title=”<?php bloginfo(‘name’); ?> RSS Feed” href=”<?php bloginfo(‘rss2_url’); ?>” />

<link rel=”help” href=”http://officeonsa.com/wp/sitemaps/” title=”sitemaps” />
<title><?php title(); ?></title>
<?php if ( is_singular() ) wp_enqueue_script( ‘comment-reply’ ); ?>

<?php remove_action(‘wp_head’, ‘wp_generator’); ?>
<?php wp_head(); ?>
</head>

となっております。
今回はカテゴリ分けしたい訳ですから、この中のどこかに

<?php body_class( $class ); ?>
（＊Codexの記載より持ってきた参考の式）

をカテゴリ分け用に書き直して、入れてあげればよいという認識で宜しいでしょうか。

私のソースには、bodyの入った記載が見当たりません。
ですので、現状のheader.phpソースのどこかを書き換えるといった感じではなく、たとえば、現状ソースの下から２段目に差し込むといった形でもよいのでしょうか。

お手すきの時に、どうぞ教えていただけましたら幸いです。
よろしくお願い致します！

そして重ねまして、アドバイスありがとうございます！

umbrella_process
(@umbrella_process)

13年、 10ヶ月前

single.php, index.php, search,phpなどの<body>を消して、
header.phpの最後に<body <?php body_class(); ?>>を追加すれば良いと思います。
これだけで、<body>タグにカテゴリやテンプレートに応じたクラス名が出力されます。

ついでなので</body>もfooter.phpに移動したほうがいいかもですね。

トピック投稿者 yzk
(@yzk)

13年、 10ヶ月前

umbrella_processさん、こんにちは！
アドバイスをありがとうございました。

……何となく全体像がイメージできてきました。

１）<body>タグが影響を及ぼす範囲をheaderからfooterまでに書き換えて、headerでタグをはじめて、footerで閉じタグにしてしまおうという理解で宜しいでしょうか。
（WPってそんなこともできるんですね。すごい。）

２）そしてheader.phpのファイルに、

<body <?php body_class(); ?>>

を足すと、……どこに何が起こるのか分かりません！（ワクワク。）
が、まずは前述の作業をやってみます。

設定に少し時間がかかるかもしれませんが、どうぞ引き続きましてアドバイスをいただけますと嬉しいです。特に２）の作業の時に、どこの部分に、どんな感じでクラス名が吐き出させるのかちょっとイメージできないので、１）の作業が終わったら、またご質問させてください。

取り急ぎお礼までお許しください。
引き続きまして、どうぞよろしくお願い致します！
umbrella_process
(@umbrella_process)

13年、 10ヶ月前
とりあえず、<body>タグにbody_class()を追加すると、
booksのアーカイブ（一覧）では以下のようにクラス名が表示されるはずです。

<body class="archive category category-books">

そこで、CSSをこのように指定すればカテゴリごとに表示が変更できますね。
```
.category-books #container {
...
}
```
ここまで完了したら投稿の対応を追加します。
初期では投稿の場合の<body>タグは次のように表示されるはずです。

<body class="single postid-3">

つまり、カテゴリは含んでいません。
しかし、body_class()に追加で表示してほしいクラス名を追加することができますので、
<body <?php body_class(); ?>>の部分を次のコードに変更してください。
```
<?php
if( is_single() ){
$cat = get_the_category(); $cat = $cat[0];
$class = "category-" . $cat->category_nicename;
}
?>
<body <?php body_class( $class ); ?>>
```
shokun0803さんのコードを応用したものです。
投稿ページの場合のみ（is_single）属するカテゴリーに対応するクラス名を追加しています。
これで投稿ページでも以下のようなクラスが<body>タグに表示されるはずです。

<body class="single postid-3 category-books">
トピック投稿者 yzk
(@yzk)

13年、 10ヶ月前

umbrella_processさん、そしてshokun0803さん
こんばんは

umbrella_processさん、分かりやすいアドバイスありがとうございました！
おかげさまで、私にも手順がイメージできる感じです。
楽しみに帰って参りまして、さっそく取り組んでいます。

それでは、まずはさっそく、作業の途中経過をご報告させてください。
いま現在、やってみた作業をご報告させていただきますね。
もし「おいおい、それは違うよ」という方向に走り出していたら、ぜひ教えていただけますと嬉しいです。
どうぞよろしくお願い致します。

（１）
single.php, page.php, index.phpのソースから、

<body>
<!– container Start –>
<div id=”container”>
<!– /container Start –>

の部分を、まるっと消しました。

（２）
single.php, page.php, index.phpのソースから、
</body>という閉じタグを消しました。

（３）
footer.phpのファイルのいちばん最後のdiv閉じタグの後に、bodyの閉じタグを配置しました。
どっちが後かな？　と迷いましたが、背景がいちばん下まで至って欲しいので、まずは仮置きしました。
現在は、こんな感じになっております。

</div>　　←footer.phpファイルの、いちばん最後の行でした。
</body>　←加えました。footer.phpファイルの、いちばん最後の行になりました。

（４）
header.phpの最後のタグの前に、<body <?php body_class(); ?>を追加しました。
今は

<body <?php body_class(); ?>　←　追加したものです。
</head>　　　　　　　　　　　　←header.phpのいちばん最後の行になりました。
　　　　　　　　ソースはやはり、閉じタグで終わった方がよいのかなと思いまして。

現在はこんな感じになっております。

これからいよいよ、ソースを吐き出して見てみたいと思います。
望み通りになっていますように！

またご報告させていただきたいと思いますので、引き続きまして、どうぞよろしくお願い致します。

トピック投稿者 yzk
(@yzk)

13年、 10ヶ月前

こんばんは、大変お世話になっております。

さっそく上の作業を終わり、サイトを見てみました。
そうしましたら……なんと。
bodyタグの開始位置が変わったからなのか、サイトのレイアウトが「がったん」と落ちていました。
（おっと！）

そんなわけで、どこに、そしてどのように不具合が出ているのかを確かめるべく、もっと詳しくサイトを調べてみました。
その結果、分かったことは主に３つです。
取り急ぎ、フィードバックさせていただきますね。

（１）
まずは、サイトの表示が崩れてしまった件です。
具体的にですが、画面左側のスペースがなくなっていました。
最初は、そのスペースを戻してあげればいいかな？　と思ってサイト全体をチェックしてみましたが、そうも単純にはゆかないみたいです。

理由ですが、パン屑リストの表示は崩れていないようですが、ヘッダー、フッター、サイドバーがずれているみたいです。
パン屑リストを除いて、全体的に左寄せになっています。
（なぜ「パン屑リスト」だけ無事？）

（２）
次に気づいたのは、header.phpに入れたはずのソースが見当たらないかもしれない、ということでした。これに関しては、私のやり方が間違っていたかもしれませんので、状況をご説明させてください。

ひとつ前の投稿でご報告した通りの操作を行って、ファイルを保存。サイトに反映させました。
そのあと、booksというカテゴリに入っている投稿（post/single）を見てみました。
全体的に見てみましたが、特にheader.phpのソースを足した場所、かつ吐き出されていると想像される場所を重点的に見てみました。
そうしましたら、入れたはずのところにソースが見当たりませんでした。

もしかしたら私のPHPの知識が足りなくて、本当は他のところにあるのに見落としているのかもしれません。もし、私が見る箇所を間違っているようでしたら、教えていただけると嬉しいです。

（３）
最後に、booksのアーカイブを見てみました。
そうしましたら、こちらは表示がずれていず、

<body>
<!– container Start –>
<div id=”container”>
<!– /container Start –>

というタグが出ていました。
これは、元々のソースです。
bodyに関するソースが吐き出されていることと、表示が「がったん」とずれなかったこと。
これはarchive.phpのファイルのソースを書き換えなかったせいかも？　と想像します。

まずはご報告まで、どうぞお許しください。
WPもいろんなテンプレートがあるので、ソースも想像の領域でアドバイスをいただいていること自体、私はとってもありがたいです。

お忙しい中、いろいろご親切にアドバイスをいただいたり、アイディアを出していただいたりと、本当にありがとうございます！

umbrella_process
(@umbrella_process)

13年、 10ヶ月前

かえって混乱させていたらすみません。ただし、「ソースはやはり、閉じタグで終わった方がよい」などと言うことはなく、最終的に出力されるソースが正しければ問題ありません。

1. <body>がある全てのテンプレートから<body>を削除してください。
2. <div id="container">は消してはいけません。
3. <body <?php body_class(); ?>を追加するのは</head>の後ろです。

これでダメなら…テーマファイルを直接見てみないと分からないです。

umbrella_process
(@umbrella_process)

13年、 10ヶ月前

</body>　←加えました。footer.phpファイルの、いちばん最後の行になりました。

これもよく分かりませんね…。
通常footer.phpの末尾は</html>であると思いますが。
特殊な作りのテーマなんでしょうか。

ひとまず、前の投稿に従いレイアウトくずれが解消されるか試してください。
必要な<div>を削除したことと、文法上は</head>の後ろにあるべき<body>が前にあることが原因のはずです。

15件の返信を表示中 - 1 - 15件目 (全27件中)

1 2 →

トピック「CSSで指定した背景色を、カテゴリごとに読み分ける設定をしたい」には新たに返信することはできません。

トピックタグ

表示