[wordpress]ページ階層をメニューにして出力するプラグイン

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

[wordpress]ページ階層をメニューにして出力するプラグイン” への17件のフィードバック

  1. CSSいじくればいろいろできそうなのが嬉しいです。
    ●ソースについて
    PHP5前提ならコンストラクタ__construct()が使えます。(このスクリプトに関してはあまり意味がないですが)
    ●プラグインについて
    plugin URI は個別記事のアドレスにするのが標準とされています。
    ●メニューが消える時間について
    マウスを外してから2,3秒後のほうがいいかもしれません。
    setTimeoutで簡単にできそうだけど、再度マウスをのせる時の処理まで考えると大変かも。

  2. mizunoさん
    >CSSいじくればいろいろできそうなのが嬉しいです。
     そうですね。サンプルで示しているものは、あまりイケテイナイので、かっこいいのが出来たら教えてください。
    >plugin URI は個別記事のアドレスにするのが標準とされています。
     作る→ブログ記事を書く の順序だったもので^^;
     みなさま使うようだったら、もうちょっとちゃんとしたページを用意してリンクするようにしようと思います。
    >●メニューが消える時間について
     JavaScriptのコードは、プラグインの中のmenu.tmplに入っています。
    もし自信があれば改造してみてください(^^)

  3. はじめまして。
    Wordpressのフォーラムから来ました。
    こちらのプラグイン、すごくいいなーと思いダウンロードさせていただきました。
    そして使用してみたのですが、私が作っているもののページには
    .html on PAGESというプラグインを使用していて
    ページのURLの末尾は「.html」というファイル名にしています。
    http://www.introsites.co.uk/33~html-wordpress-permalink-on-pages-plugin.html
    そうするとこちらのプラグインで生成されるURLですと
    ページのパーマリンクには「.html」がつきませんのでリンクが飛びません。
    私はhtmlはわかりますが、phpなどは初心者で、コピペして使わせてもらったりしています。
    ですので、どこをどうしたら「.html」がついたページが生成されるのかわかりません。
    どのようにすればよいのか、お教えいただけませんでしょうか。
    よろしくお願いします。

  4. >piyopixさん
    mogya_navigation_menu.phpを開いて、
    229行目と、201行目にある
    $item[‘link’] = “/”.get_page_uri($child[‘ID’]);
    を、
    $item[‘link’] = “/”.get_page_uri($child[‘ID’]).”.html”;
    という具合に書き換えるのでどうでしょう?

  5. 早速ありがとうございます。
    もぎゃさんが書いてくださったように書き直してみましたが、
    そうすると「http://××○○/.html」という
    ページの名前が入らないパーマリンクになってしまいました。
    phpとは難しいものですね。
    もう少し勉強してみたいと思います。

  6. すみませんでした。
    親ページのところも「child」のままにしていました。
    「.html」のついたページが取得できそうな感じです。
    感じです、というのは、ローカル上で作っていまして、
    http://localhost○○○/ の後にwordpressフォルダがありますので
    http://localhost○○○/wordpress/××.html
    と取得したいのが、「wordpress」の部分が取得されないので
    ページの表示はされないのですが、
    リンク先として「.html」のついているページが確認できたからです。

  7. はじめまして
    Wordpressのフォーラムから来ました。
    プラグイン是非使いたいと思っているのですが、
    テンプレートの中で、
    と書くと、その部分にメニュー用のHTMLが出力されます。
    とありますが、index.php等のテンプレートにコピペして貼り付けて
    使うのでしょうか?貼り付けるだけだとエラーになってしまいます。
    どのようにすればよいのか、教えていただけないでしょうか。
    よろしくお願いします。

  8. masaさんこんにちは。
    プラグインをインストールしたあと、index.phpにコピペしてあげれば大丈夫なはずです。どんなエラーが出ていますか?

  9. google検索して来ました。
    便利なプラグインですね。
    ぜひ使わせていただきたいと思います。
    さて、メニューをテキストではなく個々の画像を配置したいのですが、navigationMenu_title以下の記述場所と具体的な記述方法が分かりませんでした。
    また、マウスオーバーでメニュー画像を入れかえることはできますか?
    恐れ入りますが、お教えいただけると助かります。

  10. pageさん:
     こちらをご参照ください。
    カスタムフィールドの使い方 – WordPress Codex 日本語版 : http://wpdocs.sourceforge.jp/%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%89%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9
    この記事で言うところの「現在読んでいる本」の代わりに「navigationMenu_title」というのを作って、そこにimgタグを書けば、画像メニューを作ることができます。
    マウスオーバーについても、上記方法で作ったimgタグにマウスオーバー処理のコードを書いておけば特に問題なく動作するかと思います。

  11. もぎゃさん
    まずは画像メニューを作ることができました。
    マウスオーバーは、これからCSSを書いてみようと思います。
    ありがとうございました。

  12. はじめまして!是非利用させていただきたいと思い設置してみたのですが
    表示させたくないページidを複数設定するにはどのようにすれば可能でしょうか?

  13. WordPress初心者です。
    先日、3.0をインストールして、試行錯誤中です。
    とても便利なプラグインなので、インストールさせていただきました。
    しかし、メニューからリンク先へジャンプしませんでした。
    ページを編集のパーマリンクは
    http://自分のサイトアドレス/wordpress/?page_id=12
    になっています。
    初歩的な間違いがあるのかもしれませんが
    教えてください。
    お願いします。

  14. 便利なプラグインをありがとうございます。
    チョコさんと同じ症状でしたが、以下修正で治りました:
    mogya_navigation_menu.php
    201: $item[‘link’] = bloginfo(‘wpurl’).get_page_uri($parent[‘ID’]);
    229: $item[‘link’] = bloginfo(‘wpurl’).get_page_uri($child[‘ID’]);

  15. 失礼、
    $item[‘link’] = get_page_uri($parent[‘ID’]);

    $item[‘link’] = get_page_uri($child[‘ID’]);
    でした。 “/”が余計みたいです。

  16. はじめまして、みやたと申します。
    wordpress 素人のユーザーですが
    現在使用している⇩のphpでは利用できませんか?

    よろしくお願いします。

  17. おかげさまで
    ドロップダウンメニューを使えるようになりました。
    ありがとうございました。

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です