サポート » 使い方全般 » カスタム投稿タイプのヘッダーについて

  • 解決済 LUARCE

    (@luarce)



    お世話になります。ご教示いただけませんでしょうか。

    サイドメニューのカテゴリを色分け表示で
    Colorful Categoriesというプラグインを使いました。

    参考にしている記事
    http://blog.bluetreevisual.com/wordpress/colorful-categories/

    上記を参考にしながらカテゴリーの色分け変更(テキストの背景)
    はできたのですが、ヘッダーの背景色もカテゴリの色に合わせたい
    という内容になります。

    そこで上記ブログ記事の通り、カテゴリーの色変更は、

    <ul>
    <?php foreach((get_the_category()) as $cat){
    $color = ColorfulCategories::getColorForTerm($cat->term_id, true);
    echo '<li style="background-color: '.esc_attr($color).';">' . $cat->cat_name . '</li>'; } ?>
    <ul>

    をそのまま使用してできましたので、

    一部を下記のように改編して、
    header.phpのヘッダーの背景色を指定してしている部分(#header-wrap)に貼付ました。

    <!-- プラグイン:Colorful Categoriesからカテゴリーカラーコードを抽出して反映 -->
    <?php foreach((get_the_category()) as $cat){
    $color = ColorfulCategories::getColorForTerm($cat->term_id, true);
    echo '<div id="header_wrap" style="background-color: '.esc_attr($color).';">' ; } ?>

    このようにしたところ、通常の投稿ではヘッダーの背景色は変わるのですが、カスタム投稿タイプの記事のヘッダーになりますとbackground-colorが出力されておらず、色が変わりませんでした。

    phpは初心者レベルなもので、、header.phpはインクルード?となっているため通常の投稿でもカスタム投稿でも同様に出力されるものだと思っていたのですが、違いますでしょうか?

    何卒お力添えいただけませんでしょうか?

    よろしくお願い申し上げます。

15件の返信を表示中 - 1 - 15件目 (全18件中)
  • header.php は確かに他のテンプレートファイルから読み込まれるファイルですが、テーマによっては場所ごとに別ファイル (多くは header-*.php のような名前) を用意している場合があります。ですので、使用なされているテーマを教えてください。

    mirucon 様

    お世話になります。
    ご回答誠にありがとうございます。

    ご連絡と御礼が遅くなりまして、
    大変失礼いたしました。

    ご回答ありがたく拝見させていただきました。
    そうだったんですね!
    もう一度テーマファイルの中の深い階層のほうまで見てみたいと思います。

    テーマファイルですがTCDテンプレートを使っています。
    少し古いテンプレートになりますがPreciousというテーマになります。

    ということはコードのほうは問題ない?ということになるのでしょうか・・・?

    CG

    (@du-bist-der-lenz)

    「コードのほうは問題ない」かは、標準テーマや、幾つかで確認しましょうか。

    こんにちは

    get_the_category テンプレートタグは、デフォルトの “category” タクソノミーに含まれる結果のみを返します。カスタムタクソノミー(カスタム分類)の場合は get_the_terms 等を使用します。

    サンプルコードでは、wp_head フックでスタイルを出力してみました。
    コード中の “foo” および “foo_cat” は、実際のカスタム投稿タイプおよびタクソノミー名を記述してください。

    functions.php 等に

    function my_custom_css_cb() {
    	if ( ! is_singular( 'foo' ) )
    		return;
    	$terms = get_the_terms( get_the_ID(), 'foo_cat' );
    	if ( $terms ) {
    		$color = ColorfulCategories::getColorForTerm( $terms[0]->term_id, true );
    		echo '<style type="text/css" id="my-custom-css">';
    		echo '#header_wrap { background-color: ' . esc_html( $color ) . '; }';
    		echo "</style>\n";
    	}
    }
    add_action( 'wp_head', 'my_custom_css_cb', 102 );
    • この返信は9 ヶ月、 4 週間前に  ishitaka さんが編集しました。

    CG 様

    ご回答ありがとうございます。
    まだまだ試行の努力が足りていなかったと思います。

    気づきにつながりました。
    ご指摘ありがとうございます。

    また今後ともよろしくお願い致します。

    ishitaka 様

    大変お世話になります。
    ご指導いただきまして誠にありがとうございます。
    サンプルコードまでつけていただいて本当に助かります。

    >>get_the_category テンプレートタグは、デフォルトの “category” タクソノミーに
    >>含まれる結果のみを返します。カスタムタクソノミー(カスタム分類)の場合は
    >> get_the_terms 等を使用します。

    コードと解説を拝見させて頂きまして、
    何となく理解できそうな気がしています。

    本日は帰宅後に改めて挑戦してみたいと思います。

    1点ご教授いただきたいのですが、
    add_action( ‘wp_head’, ‘my_custom_css_cb’, 102 );の
    102は順番という理解でよろしいのでしょうか?

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

    add_action( ‘wp_head’, ‘my_custom_css_cb’, 102 );の
    102は順番という理解でよろしいのでしょうか?

    はいそうです。カスタマイズの追加 CSS が 101 なので、それより後にしてみました。

    あと、サンプルコードは Colorful Categories プラグインに依存するので、プラグインの有無をチェックするコードを追加したほうがいいかなと思います。

    add_action( 'wp_head', 'my_custom_css_cb', 102 );

    if ( class_exists( 'ColorfulCategories' ) ) {
    	add_action( 'wp_head', 'my_custom_css_cb', 102 );
    }

    ishitaka 様

    おはようございます。
    昨日はありがとうございました。

    ヘッダーにCSSを追加することで上書きするとうことだったんですね!!
    でも、そのおかげ様でかなり前進しました!!

    もちろんそれでもできたのですが、
    今後のためにヘッダーの中に記述させてもできるようにしたいので
    もう少し頑張ってみたいと思っています。

    また、新たに一覧ページではカテゴリ名なども出力しなければならないので、
    今もその辺りをいじっています。

    まだ少しかかりそうなので一旦取り急ぎですが御礼させていただきたく、
    最終的にもう一度添削していただけたら嬉しいです!

    本当にありがとうございます。
    引き続きよろしくお願い致します。

    お世話になります。
    皆さま、本当にありがとうございました。

    こちらの質問ですが、ほぼ期待する動きになりましたので、
    御礼を兼ねまして投稿させていただきました。

    ishitaka様のアドバイスから、
    出力するページによってコードを切り替える必要がある
    ということでコードをいろいろといじってみました。

    最終的に以下のコードにいきついたのですが、
    phpの書き方が煩雑な部分がしっくり来ていません。

    もしお時間ございましたら下記コードについて
    ご指摘いただけましたらとても勉強になります。

    何卒よろしくお願い申し上げます。

    <!--== TOP PAGE ==-->
    <?php if ( is_home() && is_front_page() ) { ?>
    <div id="header_wrap">
    
    <!--== 投稿ページ ==-->
    <?php } elseif (is_single()) { ?>
    
    	<?php
    	$terms = get_the_category();
    	$color = ColorfulCategories::getColorForTerm($terms[0]->term_id, true);
    	echo '<div id="header_wrap" style="background-color: #'.esc_attr($color).';">' ;
    	?>
        
        <?php
    	$terms = get_the_terms( get_the_ID(), 'product-cat' );
    	if ( $terms ) {
    		$color = ColorfulCategories::getColorForTerm( $terms[0]->term_id, true );
    	echo '<div id="header_wrap" style="background-color: '.esc_attr($color).';">' ; 
    	} ?>
    
    <!--== 投稿ページ ==-->
    <?php } elseif (is_single('product')) { ?>
    
    	<?php
    	$terms = get_the_category();
    	$color = ColorfulCategories::getColorForTerm($terms[0]->term_id, true);
    	echo '<div id="header_wrap" style="background-color: #'.esc_attr($color).';">' ;
    	?>
    
    <!--== カテゴリーページ ==-->
    <?php } elseif (is_category()) { ?>
    
    	<?php foreach((get_the_category()) as $cat){
    	$color = ColorfulCategories::getColorForTerm($cat->term_id, true);
    	echo '<div id="header_wrap" style="background-color: #'.esc_attr($color).';">' ;
    	} ?>
    
    <!--== タクソノミー分類 ==-->
    <?php } elseif (is_tax()) { ?>
    
      <!-- エラーが発生した場合、以下のソースを試す -->
      <?php /*foreach((get_the_category()) as $cat){
    	$color = ColorfulCategories::getColorForTerm($cat->term_id, true);
    	echo '<div id="header_wrap" style="background-color: #'.esc_attr($color).';">' ;
    	} */?>
     
     
    	<?php
    	$terms = get_the_category();
    	$color = ColorfulCategories::getColorForTerm($terms[0]->term_id, true);
    	echo '<div id="header_wrap" style="background-color: #'.esc_attr($color).';">' ;
    	?>
        
        <?php
    	$terms = get_the_terms( get_the_ID(), 'product-cat' );
    	if ( $terms ) {
    		$color = ColorfulCategories::getColorForTerm( $terms[0]->term_id, true );
    	echo '<div id="header_wrap" style="background-color: '.esc_attr($color).';">' ; 
    	} ?>
    
    <!--== アーカイブページ ==-->
    <?php } elseif (is_archive()  ) { ?>
    <div id="header_wrap">
    
    <!--== 検索結果ページ ==-->
    <?php } elseif (is_search() ) { ?>
    <div id="header_wrap">
    
    <!--== 404ページ ==-->
    <?php } elseif (is_404() ) { ?>
    <div id="header_wrap">
    
    <?php } else { ?>
    <div id="header_wrap">
    
    <?php } ?>

    すみません、解決済みを忘れていました。

    一旦解決済みに致します。

    いずてに解決に至り、皆さまのおかげと
    心より御礼申し上げます。

    またの際にもよろしくお願い致します。

    ぱっと見ですが、ループ内(foreach)で同じ ID(header_wrap)を持つ div 要素が複数出力されています。ID はユニークである必要があります。
    また、提示のコード内では div 要素を閉じていませんが(別の場所で閉じている?)、ループで出力した分閉じる必要があります。

    ishitaka 様

    お世話になります。
    ご連絡いただけて良かったです。

    最終的にはishitaka様からご教授いただいたやり方が
    一番スマートだとわかり、御礼をお伝えしたかったので。
    本当にありがとうございました。

    少しでも学びたいと思いまして、
    header内に記述する方法で出力もしたいと考えまして、
    挑戦してみたのですが・・・

    idは実際の出力コードを見ますと、
    1つしか出力されていないことと、また、
    div要素はご推察の通り別の場所で閉じていますので、
    レイアウトが崩れていなければ、ということで
    ヨシにしてしまっておりました。

    背景を変更させるため、その間にもカテゴリ名の出力や
    HTMLが入っていましたので、
    header-wrapの部分だけ分岐にいたしました。

    通常はあまりこういうことをしないのでしょうか?

    また、以下の部分ですが、通常の投稿とカスタムポストの投稿とで
    それぞれ文を変えてあげないと出力されませんでした。

    こうした書き方が良いのかも分かりませんで、
    お差し支えない範囲でご教授いただけましたらと思います。

    
    <?php } elseif (is_single()) { ?>
    
    	<?php //通常の投稿
    	$terms = get_the_category();
    	$color = ColorfulCategories::getColorForTerm($terms[0]->term_id, true);
    	echo '<div id="header_wrap" style="background-color: #'.esc_attr($color).';">' ;
    	?>
        
        <?php //カスタム投稿タイプ
    	$terms = get_the_terms( get_the_ID(), 'product-cat' );
    	if ( $terms ) {
    		$color = ColorfulCategories::getColorForTerm( $terms[0]->term_id, true );
    	echo '<div id="header_wrap" style="background-color: '.esc_attr($color).';">' ; 
    	} ?>
    

    何卒よろしくお願い申し上げます。

    idは実際の出力コードを見ますと、
    1つしか出力されていないことと、また、

    product-cat を複数選択した場合、複数出力されます。
    1つだけの選択であれば、問題はないということになります。

    コードを見ると、product(カスタム投稿タイプ)かそれ以外でいいようなので、下記のようにまとめることができると思いますが、どうでしょうか。

    <?php
    	$color = '';
    	if ( ! class_exists( 'ColorfulCategories' ) ) {
    		// Colorful Categories プラグインなし
    	} elseif ( is_home() && is_front_page() ) {
    		// ホーム
    	} elseif ( is_singular( 'product' ) || is_tax( 'product-cat') ) {
    		$terms = get_the_terms( get_the_ID(), 'area' );
    		if ( $terms ) {
    			$color = ColorfulCategories::getColorForTerm( $terms[0]->term_id, true );
    		}
    	} elseif ( is_singular() || is_category() ) {
    		$terms = get_the_category();
    		if ( $terms ) {
    			$color = ColorfulCategories::getColorForTerm( $terms[0]->term_id, true );
    		}
    	}
    	$style = $color ? ' style="background-color: ' . esc_attr( $color ) . ';"' : '';
    	echo '<div id="header_wrap"' . $style . '>';
    ?>
    • この返信は9 ヶ月、 3 週間前に  ishitaka さんが編集しました。

    ishitaka様

    お世話になります。
    お返事が遅くなりまして、
    大変失礼いたしました。

    ご添削までいただいて、
    本当にありがとうございます。

    ちゃんと試行し、理解につなげて
    いきたいと思います。

    ただ、本日のうちに試行できませんで、
    週明けにまた試行し、
    ご報告させていただきたく思います。

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

    すみません。訂正です。

    <?php
    	$color = '';
    	if ( ! class_exists( 'ColorfulCategories' ) ) {
    		// Colorful Categories プラグインなし
    	} elseif ( is_home() && is_front_page() ) {
    		// ホーム
    	} elseif ( is_singular( 'product' ) || is_tax( 'product-cat') ) {
    		$terms = get_the_terms( get_the_ID(), 'product-cat' );
    		if ( $terms && ! is_wp_error( $terms ) ) {
    			$color = ColorfulCategories::getColorForTerm( $terms[0]->term_id, true );
    		}
    	} elseif ( is_singular() || is_category() ) {
    		$terms = get_the_category();
    		if ( $terms ) {
    			$color = ColorfulCategories::getColorForTerm( $terms[0]->term_id, true );
    		}
    	}
    	$style = $color ? ' style="background-color: ' . esc_attr( $color ) . ';"' : '';
    	echo '<div id="header_wrap"' . $style . '>';
    ?>
15件の返信を表示中 - 1 - 15件目 (全18件中)
  • トピック「カスタム投稿タイプのヘッダーについて」には新たに返信することはできません。