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

  • 解決済 ShinichiN

    (@shinichin)


    14年、 8ヶ月前

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

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

    やりたいこと：

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

    できたこと：
    上記の１〜３までできました。参考にしたのは、
    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件中)
  • kz

    (@kz)

    14年、 8ヶ月前

    以下のようにすると良いかもです（未検証）。
    画像は一枚にまとめて 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件中)
  • トピック「カテゴリを画像を使ったグローバルナビゲーションにする方法」には新たに返信することはできません。