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

2009.07.24 篠原隆司

アフィリエイト広告を利用しています

このページの内容が役に立ったら X (旧twitter) でフォローして頂けると励みになります
挨拶や報告は無しで大丈夫です

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

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

特に階層構造で、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>';
}
?>

1つ上の階層のページ