wordpress: 2009年1月アーカイブ

wordpressをさわっています。人気が出るだけのことはあって、APIがしっかりしていますね。
ところで、こういうメニューって、企業サイトでよくあるじゃないですか?(「事業」とかにマウスを載せてみてください)


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のプラグインは初めてなので、感想を聞かせていただけると嬉しいです。



このアーカイブについて

このページには、 2009年1月 以降に書かれたブログ記事のうち wordpress カテゴリに属しているものが含まれています。

最近のコンテンツは インデックスページ で見られます。過去に書かれたものは アーカイブのページ で見られます。

wordpress: 2009年1月: 月別アーカイブ

Powered by
Movable Type