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のプラグインは初めてなので、感想を聞かせていただけると嬉しいです。
CSSいじくればいろいろできそうなのが嬉しいです。
●ソースについて
PHP5前提ならコンストラクタ__construct()が使えます。(このスクリプトに関してはあまり意味がないですが)
●プラグインについて
plugin URI は個別記事のアドレスにするのが標準とされています。
●メニューが消える時間について
マウスを外してから2,3秒後のほうがいいかもしれません。
setTimeoutで簡単にできそうだけど、再度マウスをのせる時の処理まで考えると大変かも。
mizunoさん
＞CSSいじくればいろいろできそうなのが嬉しいです。
そうですね。サンプルで示しているものは、あまりイケテイナイので、かっこいいのが出来たら教えてください。
＞plugin URI は個別記事のアドレスにするのが標準とされています。
作る→ブログ記事を書く の順序だったもので^^;
みなさま使うようだったら、もうちょっとちゃんとしたページを用意してリンクするようにしようと思います。
＞●メニューが消える時間について
JavaScriptのコードは、プラグインの中のmenu.tmplに入っています。
もし自信があれば改造してみてください(^^)
はじめまして。
Wordpressのフォーラムから来ました。
こちらのプラグイン、すごくいいなーと思いダウンロードさせていただきました。
そして使用してみたのですが、私が作っているもののページには
.html on PAGESというプラグインを使用していて
ページのURLの末尾は「.html」というファイル名にしています。
http://www.introsites.co.uk/33~html-wordpress-permalink-on-pages-plugin.html
そうするとこちらのプラグインで生成されるURLですと
ページのパーマリンクには「.html」がつきませんのでリンクが飛びません。
私はhtmlはわかりますが、phpなどは初心者で、コピペして使わせてもらったりしています。
ですので、どこをどうしたら「.html」がついたページが生成されるのかわかりません。
どのようにすればよいのか、お教えいただけませんでしょうか。
よろしくお願いします。
＞piyopixさん
mogya_navigation_menu.phpを開いて、
229行目と、201行目にある
$item[‘link’] = “/”.get_page_uri($child[‘ID’]);
を、
$item[‘link’] = “/”.get_page_uri($child[‘ID’]).”.html”;
という具合に書き換えるのでどうでしょう？
早速ありがとうございます。
もぎゃさんが書いてくださったように書き直してみましたが、
そうすると「http://××○○/.html」という
ページの名前が入らないパーマリンクになってしまいました。
phpとは難しいものですね。
もう少し勉強してみたいと思います。
すみませんでした。
親ページのところも「child」のままにしていました。
「.html」のついたページが取得できそうな感じです。
感じです、というのは、ローカル上で作っていまして、
http://localhost○○○/ の後にwordpressフォルダがありますので
http://localhost○○○/wordpress/××.html
と取得したいのが、「wordpress」の部分が取得されないので
ページの表示はされないのですが、
リンク先として「.html」のついているページが確認できたからです。
はじめまして
Wordpressのフォーラムから来ました。
プラグイン是非使いたいと思っているのですが、
テンプレートの中で、
と書くと、その部分にメニュー用のHTMLが出力されます。
とありますが、index.php等のテンプレートにコピペして貼り付けて
使うのでしょうか？貼り付けるだけだとエラーになってしまいます。
どのようにすればよいのか、教えていただけないでしょうか。
よろしくお願いします。
masaさんこんにちは。
プラグインをインストールしたあと、index.phpにコピペしてあげれば大丈夫なはずです。どんなエラーが出ていますか？
google検索して来ました。
便利なプラグインですね。
ぜひ使わせていただきたいと思います。
さて、メニューをテキストではなく個々の画像を配置したいのですが、navigationMenu_title以下の記述場所と具体的な記述方法が分かりませんでした。
また、マウスオーバーでメニュー画像を入れかえることはできますか？
恐れ入りますが、お教えいただけると助かります。
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タグにマウスオーバー処理のコードを書いておけば特に問題なく動作するかと思います。
もぎゃさん
まずは画像メニューを作ることができました。
マウスオーバーは、これからCSSを書いてみようと思います。
ありがとうございました。
はじめまして！是非利用させていただきたいと思い設置してみたのですが
表示させたくないページidを複数設定するにはどのようにすれば可能でしょうか？
WordPress初心者です。
先日、3.0をインストールして、試行錯誤中です。
とても便利なプラグインなので、インストールさせていただきました。
しかし、メニューからリンク先へジャンプしませんでした。
ページを編集のパーマリンクは
http://自分のサイトアドレス/wordpress/?page_id=12
になっています。
初歩的な間違いがあるのかもしれませんが
教えてください。
お願いします。
便利なプラグインをありがとうございます。
チョコさんと同じ症状でしたが、以下修正で治りました：
mogya_navigation_menu.php
201: $item[‘link’] = bloginfo(‘wpurl’).get_page_uri($parent[‘ID’]);
229: $item[‘link’] = bloginfo(‘wpurl’).get_page_uri($child[‘ID’]);
失礼、
$item[‘link’] = get_page_uri($parent[‘ID’]);
と
$item[‘link’] = get_page_uri($child[‘ID’]);
でした。 “/”が余計みたいです。
はじめまして、みやたと申します。
wordpress 素人のユーザーですが
現在使用している⇩のphpでは利用できませんか？
よろしくお願いします。
おかげさまで
ドロップダウンメニューを使えるようになりました。
ありがとうございました。