
ナビゲーションメニューを表示する際は、ウィジェットの「テキストウィジェット」が便利
ナビゲーションメニューは、カスタムナビゲーションメニューを使うのが一般的。しかし、ウィジェットにナビゲーションメニューを記述して、表示させたいテンプレートで呼び出す方が効率的な場合がある。
※プラグイン「PHP text widget」をインストール後、有効化するとウィジェット内でphpが使えるようになる。
具体例(1)
サンプル1 下記のようにしたい場合
<div id="test"> <li><a href="http://localhost/">TOP</a></li> <li><a href="http://localhost/1.html">メニュー1</a></li> <li><a href="http://localhost/2.html">メニュー2</a></li> <li><a href="http://localhost/3.html">メニュー3</a></li> <li><a href="http://localhost/4.html">メニュー4</a></li> <li class="last"><a href="http://localhost/5.html">メニュー5</a></li> </div>
サンプル1のサンプルコード
<div id="test"> <?php /* ページID取得 */ $page = get_the_ID(); /* ページ名 */ $page_title = array('TOP', 'メニュー1', 'メニュー2', 'メニュー3', 'メニュー4', 'メニュー5'); /* ページURL */ $page_url = array('http://localhost/', 'http://localhost/1.html', 'http://localhost/2.html', 'http://localhost/3.html', 'http://localhost/4.html', 'http://localhost/5.html'); /* ページID */ $page_id = array('0','20','30','40','50'); /* for文開始 */ for($i=0; $i<5; $i++){ ?> <?php if($i == 5): echo '<li>'; else: echo '<li class="last">'; endif; ?> <?php /* if文開始 */ if($page != $page_id[${i}]){ ?> <a href="<?php echo $page_url[${i}]; ?>"> <?php } ?> <?php echo $page_title[${i}]; ?> <?php /* if文開始 */ if($page != $page_id[${i}]){ echo '</a>'; } ?> </li> <?php /* for文終了 */ } ?> </div>
具体例(2)
現在、表示しているページのメニューのみマウスオーバーのままにしたい場合サンプル2 下記のようにしたい場合
<ul id="menu"> <li><a href="index.html"><img src="images/menu_01.gif" alt="HOME" width="130" height="50" id="Image1" onmouseover="MM_swapImage('Image1','','images/menu_over_01.gif',1)" onmouseout="MM_swapImgRestore()" /></a></li> <li><a href="about.html"><img src="images/menu_02.gif" alt="ABOUT" width="130" height="50" id="Image2" onmouseover="MM_swapImage('Image2','','images/menu_over_02.gif',1)" onmouseout="MM_swapImgRestore()" /></a></li> <li><a href="hobby.html"><img src="images/menu_03.gif" alt="HOBBY" name="Image3" width="130" height="50" id="Image3" onmouseover="MM_swapImage('Image3','','images/menu_over_03.gif',1)" onmouseout="MM_swapImgRestore()" /></a></li> <li><a href="qa.html"><img src="images/menu_04.gif" alt="Q&A" name="Image4" width="130" height="50" id="Image4" onmouseover="MM_swapImage('Image4','','images/menu_over_04.gif',1)" onmouseout="MM_swapImgRestore()" /></a></li> <li><a href="link.html"><img src="images/menu_05.gif" alt="LINK" width="130" height="50" id="Image5" onmouseover="MM_swapImage('Image5','','images/menu_over_05.gif',1)" onmouseout="MM_swapImgRestore()" /></a></li> <li class="last"><a href="contact.html"><img src="images/menu_06.gif" alt="CONTACT" width="130" height="50" id="Image6" onmouseover="MM_swapImage('Image6','','images/menu_over_06.gif',1)" onmouseout="MM_swapImgRestore()" /></a></li> </ul>
サンプル2のサンプルコード
<ul id="menu"> <?php /* ページID取得 */ $page = get_the_ID(); /* ページ名 */ $page_title = array('HOME', 'ABOUT', 'HOBBY', 'Q&A', 'LINK', 'CONTACT'); /* ページURL */ $page_url = array('http://localhost/wordpress2/', 'http://localhost/2.html', 'http://localhost/3.html', 'http://localhost/4.html', 'http://localhost/5.html', 'http://localhost/6.html'); /* ページID */ $page_id = array('0','20','30','40','50','60'); /* for文開始 */ for($i=0; $i<6; $i++){ /* 最後の<li>だけ class="last" となっているので。*/ if($i == 5){ echo '<li class="last">'; }else{ echo '<li>'; } /* if文開始 */ if($page != $page_id[${i}]){ ?> <a href="<?php echo $page_url[${i}]; ?>"> <?php } ?> <img src="<?php bloginfo('template_directory'); ?>/images/menu_<?php $j = $i+1; if($page == $page_id[${i}]){ echo 'over_'; }?>0<?php echo $j; ?>.gif" alt="<?php echo $page_title[${i}]; ?>" name="Image<?php echo $j; ?>" width="130" height="50" id="Image<?php echo $j; ?>" onmouseover="MM_swapImage('Image<?php echo $j; ?>','','<?php bloginfo('template_directory'); ?>/images/menu_over_0<?php echo $j; ?>.gif',1)" onmouseout="MM_swapImgRestore()" /> <?php /* if文開始 */ if($page != $page_id[${i}]){ echo '</a>'; } ?> </li> <?php /* for文終了 */ } ?></ul> <!--/menu-->