テキストウィジェットでナビゲーションメニューを使う記述例

ナビゲーションメニューを表示する際は、ウィジェットの「テキストウィジェット」が便利

ナビゲーションメニューは、カスタムナビゲーションメニューを使うのが一般的。
しかし、ウィジェットにナビゲーションメニューを記述して、表示させたいテンプレートで呼び出す方が効率的な場合がある。

※プラグイン「PHP text widget」をインストール後、有効化するとウィジェット内でphpが使えるようになる。

具体例（１）

サンプル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 下記のようにしたい場合

<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&amp;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&amp;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-->