[PHP] ページ横のサイトツリーをシンプルに作ってみる。

ページの横に設置するサイドナビ、もしくはサイトツリー。

ページ数が少ないうちは手作業で無理やり作るのも良いのですが、ページ数が多くなってくると、管理の面で面倒になってきます。

特に階層構造で、ULの入れ子、多段階の入れ子なんかになっちゃった日には、タグの対応関係で悩むこともあるんじゃないでしょうか?

また、何度も繰り返される、UL, LI, AのHTMLタグ。
どこかに記述ミスがあっても、エラーと表示してくれないのがブラウザです。

だからこれを、PHPでシンプルに配列にしてしまいます。
PHPでってことで、記述ミスがあるとそれは素直にエラーとなり、ページが表示されません。
ミスはミスだから、ミスであることを教えてくれる分、親切と言えるかと思います。

PHPの配列において、ナビゲーションの階層構造が分かりやすくなる記述を心がけました。

下記ソースコードの、$array = array(・・・ の箇所が、キモの部分です。
ここを、いかにシンプルに、直感的にするか、ということで悩んだ末、この形になりました。

実行して出力されるサイトツリーのHTML

実行すると、次のように出力されます。
あとはCSSで自由にレイアウトすればOKです。

<ul>
  <li><a href="/">トップページ</a>
    <ul>
      <li><a href="/page1.html">ページ1</a></li>
      <li><a href="/page11.html">ページ11</a>
        <ul>
          <li><a href="/page111.html">ページ111</a></li>
          <li><a href="/page112.html">ページ112</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="/page2.html">ページ2</a></li>
</ul>

ブラウザのサイトツリーの表示例

出力されたHTMLをブラウザで見ると、次のようになります。
あとは、これにCSSを適用すればキレイに見えますよね。

サイトナビを作るPHPコード

次のコードをコピーして、ご自身のプログラムに組み込んでください。

実は、もともとの目的がWordPressのウィジット用なので、WordPressな方はウィジットとしてもお使い頂けます。
(※WordPressの場合、Executable PHP widget というプラグインが必要です)

<?php
//	ブラウザからアクセスされたURL
$mypage = $_SERVER['PHP_SELF'];

//	index.html の場合は、 / として扱う。
$mypage = str_replace('index.html', '', $mypage);

//	ナビリストの配列を作ってください。
//	arrayの引数は、(テキスト, URL, 子) です。
//	子も同様に配列とし、引数も同様に(テキスト, URL, 子) です。
//	子が不要なら省略します。
$array = array(
	array('トップページ', '/', array(
		array('ページ1', '/page1.html'),
		array('ページ11', '/page11.html', array(
			array('ページ111', '/page111.html'),
			array('ページ112', '/page112.html')
		))
	)),
	array('ページ2', '/page2.html')
);

//	実行
aultaSideNavi($mypage, $array);

/**
 * 引数の配列を基にUL,LI,Aタグを出力します。
 */
function aultaSideNavi(&$mypage, &$array){
	echo '<ul>';
	foreach ($array as &$value){
		//	アクセスされたURLと同じ場合に、liタグに class を付加
		$class = ($mypage == $value[1] ? ' class="self"' : '');
		//
		$count = count($value);
		echo '<li' . $class . '><a href="' . $value[1] . '">' . $value[0] . '</a>';
		if ($count == 3){
			aultaSideNavi($mypage, $value[2]);
		}
		echo '</li>';
	}
	echo '</ul>';
}
?>

広告