wordpressをさわっています。人気が出るだけのことはあって、APIがしっかりしていますね。
ところで、こういうメニューって、企業サイトでよくあるじゃないですか?(「事業」とかにマウスを載せてみてください)
@import url(http://blog.mogya.com/2009/01/25/style.css);
wordpressのページ機能を使って上のような階層を作ったら、そこからメニュー用のHTMLを生成してくれるプラグインというのを作ってみました。
mogya_menu_plugin-0.1.zip
インストール
他のプラグインと同様に、ダウンロードして解凍して、pluginsディレクトリに配置すればOKです。
使い方
テンプレートの中で、
<div class="horizontal_menu">
<?php insert_mogya_navigationMenu(""); ?>
</div>
と書くと、その部分にメニュー用のHTMLが出力されます。
style.cssの内容をご自分のテンプレートのstyle.cssに追記してあげると、上であげたようなメニューができあがります。
機能
メニューの並び順については、wordpressでの指定が尊重されます。つまり、wordpressページの編集画面で「属性-順序」の数値を変えることで、自由に並べ替えることが出来ます。
文字列だけでなく、メニューに画像を使うことも可能です。
ページの編集機能で、「navigationMenu_title」というプロパティを作成すると、メニューのタイトル部分に設定されます。たとえば、navigationMenu_titleに
<img src="/images/icon1.gif" alt="ホーム" width="83" height="18" />
と言うように記述すれば、タイトル部分にimgタグが出力されるので、文字列の代わりに画像を使ったメニューを実現できるようになります。
また、リンク先を置き換えることも出来ます。最初のサンプルで、「ホーム」というメニューがありますが、これは、navigationMenu_linkというカスタムフィールドに「/」を設定することで実現できます。もちろん、普通のWEBサイトのURLを記述すれば、そのURLへのリンクになります。
全部のページをメニューに出すのではなくて、特定のページより下だけをメニューにすることも出来ます。たとえば、「menu」というページを作ってそれより下だけ出力したい時は、
<div class="horizontal_menu">
<?php insert_mogya_navigationMenu("menu"); ?>
</div>
というふうにします。
カスタマイズ
出力されるHTMLでは、dropdown,dropdown_parent,dropdown_childというクラスが使われています。それぞれ
- dropdown_parent：親メニュー(上の例で言うなら、「会社概要」の部分)です
- dropdown_child：子メニュー(上の例で言うなら、「アクセス」「ご挨拶」の部分)です
- dropdown：dropdown_parentとdropdown_childを含むひとかたまりです
となっています。style.cssに、メニューを縦に並べる例と横に並べる例を記述してあるので、参考にしてください。
制限
ページ階層は2段階までしか対応していません。これ以上深い階層をサポートしても実用的でないような気がするので、対応する予定もありません。
まとめ
こういうのがなくて固定でHTMLを出力してしまうと、お客さんに納品した後、お客さん自身がメニューを変更できないのでとっても不便なことになります。このプラグインを使うことで、お客さんが自分でページを追加してもメニューに反映されるようになるので、なかなかいけるんじゃ無かろうか、と思うのですけど、いかがでしょう？
wordpressのプラグインは初めてなので、感想を聞かせていただけると嬉しいです。