wordpressにて、カテゴリー毎にヘッダ画像を変えたい

Question

初めまして、wordpressにて、カテゴリ別でヘッダ画像を変えたいと思っております。

テーマは
https://wordpress.org/themes/sixteen/
こちらのsixteenというものをベースにさせていただいております。

###試したこと

■header.php に以下を記述

<?php
$cat = get_the_category();
$cat = $cat[0];
?>
<div class="cat-<?php echo $cat->"cat_ID; ?>"></div>

■css に記述

.cat-6 {
    background:url(piyo1) no-repeat;

}

.cat-7 {
    background:url(piyo2) no-repeat;
}

.cat-2 {
    background:url(piyo3) no-repeat;
}

piyo1-3は画像です。

出力されたソースコードを載せるよう、ご指摘頂きましたので、載せようと思ったのですが、ソースがごちゃごちゃしておりまして、どこを載せたものか、わからず。
すみません。

現在制作中のサイトURLを載せます。

http://workfield3.wpblog.jp/

これでさっぱり変化がありません。
いい方法がございましたら、ご教示いただけますと非常に助かります。
よろしくお願いいたします。

Comments

[kei344]

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、出力されたHTML（ブラウザで「ページのソースを表示」）も質問文に追記ください。あと、「piyo1」は画像でしょうか。

[kurono_you]

情報を追記いたしました。ご指摘ありがとうございます。

Answer 1

とりあえず下記のようになっていますね。

<div class="cat-"></div>

<div class="cat-small_kawa"></div>

ということは、echo $cat->cat_ID; と書かれていない可能性が高いです。cat_ID は数値が返るはずなので、スラッグが来ていると言うことは echo $cat->slug; と書かれているのでは。

get_the_category() はループ内か投稿ページでのみ使えるので、カテゴリーアーカイブでは使えません。なので、下記のように書くことになると思います。

if ( is_category() ){
	$cat_obj = get_category( get_query_var( 'cat' ), false );
} elseif ( is_single() ) {
	$cat_obj = get_the_category();
	$cat_obj = $cat_obj[ 0 ];
}
if ( !empty( $cat_obj ) ){
	printf( '<div class="cat-%d"></div>', $cat_obj->cat_ID );
	// echo '<div class="cat-'.$cat_obj->cat_ID.'</div>';
}

【WordPress：確実なカテゴリ情報の取り方 | hacknote】
http://hacknote.jp/archives/5248/

---

####いくつか指摘します

１．質問文に「sixteen」とありますが、「fifteen」です。
/wp-content/themes/fifteen/style.css?ver=4.6

２．height: auto; では無く高さを設定する必要有り。

.cat-6 {
    background:url(/**/) no-repeat;
    width: 100%;
    height: auto; /* .cat-6 のHTML内に要素が何も無いので、高さを設定する必要がある。 */
}

３．タイプミス。

<div class"search-form-top">
<!--     ↑ 「=」が抜けている -->

<div class="form-group>
<!--                 ↑ 「"」が抜けている -->

Comments

[kurono_you]

なんとかカテゴリ別にヘッダ画像をかえることができました。
ありがとうございます。

そのほか、ご指摘賜りまして、本当に感謝しきりです。
徐々に直してゆきます。

本当にありがとうございました。