WordPress | ダイナミックハイライトメニュー

シェアする

[Sponsored link]

WordPress | ダイナミックハイライトメニュー

WordPressで困ったことが1つ。

「currentが使えない!」ということ。(currentとは→https://www.clean-west.jp/こういうグローバルナビゲーションメニューのことです。)
動的があるが故の、この問題。
うーん。と思いながら、Codexを調べてみました!

で、案の定問題が発生しました。
「listタグに適用すると、css spriteと併用できない!」

つまり、僕がやりたいのは…spriteを利用して、a、hover、currentで全部表示を変えたい!なーんて、無理矢理なことなんですが、せっかくなんで、こちらで応用も加えた説明をしますね。
(css sprite|CSS スプライトについては、流派別もあるので、CSS Spriteの流派をまとめるが参考になります。)

// 概要
=================================================
#ここで説明するのは、css spriteも使ったものとなります。
・メニューの数は4つ。
・全体のwidthは960px計算。
・listの各widthは240px、heightは40pxとする。
・codexではliタグに適用しているが、ここではaタグに適用。

1.まずは、こんなHTMLをつくります。(ここでid等の値をふっても良い。)

<ul>
<li><a href="#">Page One</a></li>
<li><a href="#">Page Two</a></li>
<li><a href="#">Page Three</a></li>
<li><a href="#">Page Four</a></li>
</ul>

1.php等で肉付け。

<ul>
<li><a <?php if (is_home()) { echo " id=\"current1\"" ;}?> href="<?php bloginfo('url') ?>" class="1">Page One</a></li>
<li><a <?php if (is_page('ここにはpageのIDが入ります!')) { echo " id=\"current2\"" ;}?> href="#" class="2">Page Two</a></li>
<li><a <?php if (is_page('ここにはpageのIDが入ります!')) { echo " id=\"current3\"" ;}?> href="#" class="3">Page Three</a></li>
<li><a <?php if (is_page('ここにはpageのIDが入ります!')) { echo " id=\"current4\"" ;}?> href="#" class="4">Page Four</a></li>
</ul>

要参考:(https://wpdocs.sourceforge.jp/Conditional_Tags

3.で、CSSをつくります。(id指定なし)

ul li{ margin:0; padding:0;}
ul li{ float:left; list-style-type:none;}
ul li a{ width:240px; height:40px; display:block; text-indent:-9999px; background:url("任意") no-repeat;}
ul li a{ width:240px; height:40px; display:block;}
ul li a.1{ background-position:0px 0px;}
ul li a.2{ background-position:-240px 0px;}
ul li a.3{ background-position:-480px 0px;}
ul li a.4{ background-position:-720px 0px;}

ul li a:hover.1{ background-position:0px -40px;}
ul li a:hover.2{ background-position:-240px -40px;}
ul li a:hover.3{ background-position:-480px -40px;}
ul li a:hover.4{ background-position:-720px -40px;}

ul li a#current1{ background-position: 0 -80px;}
ul li a#current2{ background-position: -240px -80px;}
ul li a#current3{ background-position: -480px -80px;}
ul li a#current4{ background-position: -720px -80px;}

4、おまじないを内に追加(phpはis_pageにしている。また、要値の変更)

 <?php if ( is_home('Page One') ) { $current = 'one'; } elseif ( is_page('Page Two') ) { $current = 'two'; } elseif ( is_page('Page Three') ) { $current = 'three'; } elseif ( is_page('Page Four') ) { $current = 'four'; } ?> 

これで動くはずです!
えーっと、本来であれば、こんなにややこしい事をする必要がないかもしれませんね。
もっと簡単に出来る!等のやり方を知っている方。是非教えていただけたら、嬉しいです。

この記事が気に入ったら
いいね ! しよう

Twitter で

フォローする