サポート » テーマ » トップページとその他ページでヘッダー画像の出し分け

  • 解決済 Shinichi Nishikawa

    (@shinichin)


    PHP初心者です。
    添削をお願いするようですみません。

    過去の投稿やcodexを参考にコードを書いているのですが、
    上手くいかないため、質問させていただきます。

    やりたいこと:
    ヘッダーに表示される画像を以下のように、出し分けたい。
    ・トップページでは、jqueryプラグインpikachooseを使用してスライドショーを使用。
    ・カテゴリーアーカイブでは、そのカテゴリー用に用意した画像1枚を表示。
    ・シングルページでは、その記事が含まれるカテゴリー画像を表示。

    header.phpに書き込んだコード

    <?php /* If this is the home page */ if(is_home){ ?>
    
    <!-- Slideshow by jQuery -->
    <div class="pikachoose">
    	<ul id="pikame" style="display:none;">
    		<li><img src="<?php bloginfo('template_url') ?>/pikachoose/pika-trad.jpg"/></li>
    		<li><img src="<?php bloginfo('template_url') ?>/pikachoose/pika-elec.jpg"/></li>
    		<li><img src="<?php bloginfo('template_url') ?>/pikachoose/pika-anim.jpg"/></li>
    		<li><img src="<?php bloginfo('template_url') ?>/pikachoose/pika-book.jpg"/></li>
    		<li><img src="<?php bloginfo('template_url') ?>/pikachoose/pika-food.jpg"/></li>
    	</ul>
    </div>
    <div class="cat-photo">
    	<?php /* If this is a category-FOOD */ elseif(is_category('16')) { ?>
    		<img src="<?php bloginfo('url'); ?>/images/header/top-food.jpg" />
    	<?php /* If this is a category-ANIME */ elseif(is_category('8')) { ?>
    		<img src="<?php bloginfo('url'); ?>/images/header/top-anim.jpg" />
    	<?php /* If this is a category-BOOK */ elseif(is_category('9')) { ?>
    		<img src="<?php bloginfo('url'); ?>/images/header/top-book.jpg" />
    	<?php /* If this is a category-TRADITIONAL */ elseif(is_category('6')) { ?>
    		<img src="<?php bloginfo('url'); ?>/images/header/top-trad.jpg" />
    </div>
    <?php } ?>

    実際にこれを書き込むと、ブラウザで何も表示されなくなります。
    アドバイスをよろしくお願いします。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • スレッド開始 Shinichi Nishikawa

    (@shinichin)

    上記コードの1行目に、間違いをみつけました。
    <?php /* If this is the home page */ if(is_home){ ?>
    ↓正しくは、
    <?php /* If this is the home page */ if(is_home()){ ?>

    修正をしたものの結果は変わりませんでした。
    コードとにらめっこをしております。
    どうぞ、よろしくお願いします。

    カテゴリー用画像のファイル名は ‘top-‘ + カテゴリースラッグ + ‘.jpg’ にすると便利です。

    <?php if(is_home()) : ?>
    <!-- Slideshow by jQuery -->
    <div class="pikachoose">
      <ul id="pikame" style="display:none;">
        <li><img src="<?php bloginfo('template_url') ?>/pikachoose/pika-trad.jpg"/></li>
        <li><img src="<?php bloginfo('template_url') ?>/pikachoose/pika-elec.jpg"/></li>
        <li><img src="<?php bloginfo('template_url') ?>/pikachoose/pika-anim.jpg"/></li>
        <li><img src="<?php bloginfo('template_url') ?>/pikachoose/pika-book.jpg"/></li>
        <li><img src="<?php bloginfo('template_url') ?>/pikachoose/pika-food.jpg"/></li>
      </ul>
    </div>
    <?php else if(is_category()) : ?>
    <div class="cat-photo">
      <?php $category = &get_category(get_query_var('cat')); ?>
      <img src="<?php bloginfo('url'); ?>/images/header/top-<?php echo $category->slug; ?>.jpg" />
    </div>
    <?php endif; ?>

    カテゴリーを限定するなら12行目を
    <?php else if(is_category(array(16, 18, 9, 6))) : ?> のようにしてください。

    スレッド開始 Shinichi Nishikawa

    (@shinichin)

    kzさん

    ありがとうございました。
    コードがとても短くなりました。

    が、まだカテゴリーページ、個別記事ページで画像が表示されておりません。

    まず、画面に何も表示されなくなってしまったので、
    下から6行目の else ifelseifを変更したところ、表示はされるようになりました。
    これが原因なのかもしれません。。。
    念のため、現在書き込んでいるコードが下記になります。
    引き続き、ご教授くだされば、幸いです。

    <?php /* If this is the home page */ if(is_home()) : ?>
    <!-- Slideshow by jQuery -->
    <div class="pikachoose">
    	<ul id="pikame" style="display:none;">
    		<li><img src="<?php bloginfo('template_url') ?>/pikachoose/pika-trad.jpg"/></li>
    		<li><img src="<?php bloginfo('template_url') ?>/pikachoose/pika-elec.jpg"/></li>
    		<li><img src="<?php bloginfo('template_url') ?>/pikachoose/pika-anim.jpg"/></li>
    		<li><img src="<?php bloginfo('template_url') ?>/pikachoose/pika-book.jpg"/></li>
    		<li><img src="<?php bloginfo('template_url') ?>/pikachoose/pika-food.jpg"/></li>
    	</ul>
    </div>
    <?php elseif(is_category()) : ?>
    <div class="cat-photo">
    	<?php $category = &get_category(get_query_var('cat')); ?>
    	<img alt="" src="<?php bloginfo('url'); ?>/images/header/top-<?php echo $category->slug; ?>.jpg" />
    </div>
    <?php endif; ?>

    firefoxのデバッグ用アドオンのfirebugで該当箇所を見ると、

    <div class="cat-photo">
    <img src="http://localhost:8888/XXXXX/images/header/top-books.jpg" alt="">
    </div>

    となっており、教えていただいたコードはきちんと機能しているようで、
    原因は、画像の読み込みがされていないことかと思います。
    images/header/内のファイル名も変更して、top-traditionalなどのスラッグ名と同じになるように変更しています。

    よろしくお願いします。

    スレッド開始 Shinichi Nishikawa

    (@shinichin)

    kzさん

    自己解決いたしました。
    読み込み先を、
    src="<?php bloginfo('url'); ?>/images/からsrc="<?php bloginfo('template_url'); ?>/images/に変更したところ、無事に表示されました。

    ありがとうございました!

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「トップページとその他ページでヘッダー画像の出し分け」には新たに返信することはできません。