ナビ画像のオンオフ方法

Sponsored Link

WordPressのテーマカスタマイズです。

その記事を表示している時は、メニュー画像を変える方法です。
この方法は、メニューをテンプレートタグで表示しない方法です。

Sponsored Link

たとえば、

| Menu1 | Menu2 | Menu3 | 

という画像のナビが並んでいたとします。
Menu1をクリックして、Menu1のページが表示されます。
そのMenu1の画像以外はオフ画像、Menu1のみオン画像になる…という仕組みです。

テンプレートタグによるカスタマイズ

WordPressのテンプレートタグ・条件タグを使用します。

<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>

タグの詳しい解説

カテゴリー設定で、カテゴリースラッグ名が必要となります。上記は、カテゴリーIDとカテゴリースラッグ名の両方で分岐点を作っています。

<img src="<?php bloginfo('template_url'); ?>/images/<?php if(in_category('カテゴリーID') || is_single('カテゴリースラッグ名')){ ?>navi_info_t.jpg<?php }else{ ?>navi_info.jpg<?php } ?>" alt="info" />

他にもっとよい方法あるかも・・・しれないですね。

Sponsored Link