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

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

カテゴリ:

トラックバック(0)

このブログ記事を参照しているブログ一覧: [wordpress]ページ階層をメニューにして出力するプラグイン

このブログ記事に対するトラックバックURL: http://mogya.com/mt/mt-tb.cgi/691

コメント(17)

mizuno :

CSSいじくればいろいろできそうなのが嬉しいです。

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

もぎゃ Author Profile Page:

mizunoさん

>CSSいじくればいろいろできそうなのが嬉しいです。

 そうですね。サンプルで示しているものは、あまりイケテイナイので、かっこいいのが出来たら教えてください。

>plugin URI は個別記事のアドレスにするのが標準とされています。

 作る→ブログ記事を書く の順序だったもので^^;
 みなさま使うようだったら、もうちょっとちゃんとしたページを用意してリンクするようにしようと思います。

>●メニューが消える時間について

 JavaScriptのコードは、プラグインの中のmenu.tmplに入っています。
もし自信があれば改造してみてください(^^)

piyopix :

はじめまして。
Wordpressのフォーラムから来ました。

こちらのプラグイン、すごくいいなーと思いダウンロードさせていただきました。
そして使用してみたのですが、私が作っているもののページには
.html on PAGESというプラグインを使用していて
ページのURLの末尾は「.html」というファイル名にしています。
http://www.introsites.co.uk/33~html-wordpress-permalink-on-pages-plugin.html

そうするとこちらのプラグインで生成されるURLですと
ページのパーマリンクには「.html」がつきませんのでリンクが飛びません。

私はhtmlはわかりますが、phpなどは初心者で、コピペして使わせてもらったりしています。
ですので、どこをどうしたら「.html」がついたページが生成されるのかわかりません。
どのようにすればよいのか、お教えいただけませんでしょうか。

よろしくお願いします。

もぎゃ Author Profile Page:

>piyopixさん

mogya_navigation_menu.phpを開いて、
229行目と、201行目にある

$item['link'] = "/".get_page_uri($child['ID']);
を、
$item['link'] = "/".get_page_uri($child['ID']).".html";
という具合に書き換えるのでどうでしょう?

piyopix :

早速ありがとうございます。

もぎゃさんが書いてくださったように書き直してみましたが、
そうすると「http://××○○/.html」という
ページの名前が入らないパーマリンクになってしまいました。

phpとは難しいものですね。
もう少し勉強してみたいと思います。

piyopix :

すみませんでした。
親ページのところも「child」のままにしていました。
「.html」のついたページが取得できそうな感じです。

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

masa :

はじめまして

Wordpressのフォーラムから来ました。

プラグイン是非使いたいと思っているのですが、

テンプレートの中で、



と書くと、その部分にメニュー用のHTMLが出力されます。

とありますが、index.php等のテンプレートにコピペして貼り付けて
使うのでしょうか?貼り付けるだけだとエラーになってしまいます。
どのようにすればよいのか、教えていただけないでしょうか。

よろしくお願いします。

もぎゃ Author Profile Page:

masaさんこんにちは。

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

page :

google検索して来ました。

便利なプラグインですね。
ぜひ使わせていただきたいと思います。

さて、メニューをテキストではなく個々の画像を配置したいのですが、navigationMenu_title以下の記述場所と具体的な記述方法が分かりませんでした。
また、マウスオーバーでメニュー画像を入れかえることはできますか?
恐れ入りますが、お教えいただけると助かります。

もぎゃ Author Profile Page:

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タグにマウスオーバー処理のコードを書いておけば特に問題なく動作するかと思います。

page :

もぎゃさん

まずは画像メニューを作ることができました。
マウスオーバーは、これからCSSを書いてみようと思います。

ありがとうございました。

よー :

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

チョコ :

WordPress初心者です。
先日、3.0をインストールして、試行錯誤中です。
とても便利なプラグインなので、インストールさせていただきました。

しかし、メニューからリンク先へジャンプしませんでした。

ページを編集のパーマリンクは
http://自分のサイトアドレス/wordpress/?page_id=12
になっています。

初歩的な間違いがあるのかもしれませんが
教えてください。
お願いします。

yk :

便利なプラグインをありがとうございます。

チョコさんと同じ症状でしたが、以下修正で治りました:
mogya_navigation_menu.php
201: $item['link'] = bloginfo('wpurl').get_page_uri($parent['ID']);
229: $item['link'] = bloginfo('wpurl').get_page_uri($child['ID']);

yk :

失礼、

$item['link'] = get_page_uri($parent['ID']);

$item['link'] = get_page_uri($child['ID']);
でした。 "/"が余計みたいです。

はじめまして、みやたと申します。

wordpress 素人のユーザーですが

現在使用している⇩のphpでは利用できませんか?

よろしくお願いします。

かじわら :

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

コメントする


画像の中に見える文字を入力してください。

このブログ記事について

このページは、 もぎゃが 2009年1月25日 10:26に書いたブログ記事です。

ひとつ前のブログ記事は「 Expression WebをつかってWindows上でPHP開発 」です。

次のブログ記事は「 スペイン語コメント 」です。

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

Powered by
Movable Type