サポート » テーマ » カテゴリを画像を使ったグローバルナビゲーションにする方法

  • 解決済 Shinichi Nishikawa

    (@shinichin)


    みなさま、お世話になります。

    デフォルトのテーマをカスタマイズしていますが、グロナビで行き詰まっております。

    やりたいこと:

    1. カテゴリーをグローバルナビゲーションのようにページの上のほうに横に並べて表示したい
    2. リストは画像で出したい。(liとaをdisplay表示してimgを間に挟みたい)
    3. 該当カテゴリーにいるときは、画像の色を変える
    4. hover時に、画像の色を変える

    できたこと:
    上記の1〜3までできました。参考にしたのは、
    http://lovelog.eternal-tears.com/wordpress/wp-custom/navi-on-off/
    のサイトにあるコードです。

    <div id="navi">
       <ul>
          <li><a href="<?php bloginfo('url'); ?>/info/" title="info"><img src="<?php bloginfo('template_url'); ?>/images/<?php if(in_category('3') || is_single('info')){ ?>navi_info_t.jpg<?php }else{ ?>navi_info.jpg<?php } ?>" alt="info" /></a></li>
          <li><a href="<?php bloginfo('url'); ?>/menu1/" title="menu1"><img src="<?php bloginfo('template_url'); ?>/images/<?php if(in_category('4') || is_single('menu1')){ ?>navi_menu1_t.jpg<?php }else{ ?>navi_menu1.jpg<?php } ?>" alt="menu1" /></a></li>
          <li><a href="<?php bloginfo('url'); ?>/menu2/" title="menu2"><img src="<?php bloginfo('template_url'); ?>/images/<?php if(in_category('5') || is_single('menu2')){ ?>navi_menu2_t.jpg<?php }else{ ?>navi_menu2.jpg<?php } ?>" alt="menu2" /></a></li>
          </ul>
    </div>

    できないこと:
    ここからさらに、a:hoverで別画像が表示されるようにすることは可能でしょうか。

    どうぞ、よろしくお願いします。

1件の返信を表示中 - 1 - 1件目 (全1件中)
  • 以下のようにすると良いかもです(未検証)。
    画像は一枚にまとめて css sprite するとなお良しです。

    <div id="navi">
       <ul>
          <li class="info<?php if(in_category('3') || is_single('info')) echo ' active'; ?>"><a href="<?php bloginfo('url'); ?>/info/" title="info">info</a></li>
          <li class="menu1<?php if(in_category('4') || is_single('menu1')) echo ' active'; ?>"><a href="<?php bloginfo('url'); ?>/menu1/" title="menu1">menu1</a></li>
          <li class="menu2<?php if(in_category('5') || is_single('menu2')) echo ' active'; ?>"><a href="<?php bloginfo('url'); ?>/menu2/" title="menu2">menu2</a></li>
          </ul>
    </div>

    css:

    #navi a{
    width:100px
    height:20px;
    display:block;
    text-indent:-9999em;
    overflow:hidden;
    }
    #navi .info a{background:url(images/navi_info.jpg) 0 0 no-repeat;}
    #navi .menu1 a{background:url(images/navi_menu1.jpg) 0 0 no-repeat;}
    #navi .menu2 a{background:url(images/navi_menu2.jpg) 0 0 no-repeat;}
    #navi .info.active a{background:url(images/navi_info_t.jpg) 0 0 no-repeat;}
    #navi .menu1.active a{background:url(images/navi_menu1_t.jpg) 0 0 no-repeat;}
    #navi .menu2.active a{background:url(images/navi_menu2_t.jpg) 0 0 no-repeat;}
    #navi .info a:hover{background:url(images/navi_info_h.jpg) 0 0 no-repeat;}
    #navi .menu1 a:hover{background:url(images/navi_menu1_h.jpg) 0 0 no-repeat;}
    #navi .menu2 a:hover{background:url(images/navi_menu2_h.jpg) 0 0 no-repeat;}

1件の返信を表示中 - 1 - 1件目 (全1件中)
  • トピック「カテゴリを画像を使ったグローバルナビゲーションにする方法」には新たに返信することはできません。