29 9月2007

ExtendedMenu - メニュー、セクション、カテゴリからメニューを自動作成

タイプ
有料/無料	無料
ライセンス	GPL
執筆時のバージョン	1.0.3
ユーザ登録の要否	不要

JED ホームページデモ

ここに掲載している記事は執筆時点のものです。内容が古くなっている事もありますのでご注意下さい。
ここで紹介しているエクステンションの利用を推奨するものではありません。ご利用は自己責任でお願いします。
ご自分が利用しているエクステンションの最新情報は常に確認しましょう。様々なエクステンションで日々脆弱性が見つかっており、あなたのサイトがクラックの被害に遭わないとも限りません。脆弱性情報はこちら。

コンテンツ数が多くなってくると、メニューを1つ1つ手作業で作成するのは非常に手間がかかり面倒です。Extended Menuを使えば、指定したメニュー/セクション/カテゴリを元に、メニューや子メニューを自動的に作成してくれます。

ダウンロードとインストール

上記開発元もしくはJoomla! Extention Directoryへアクセスし、最新のファイルをダウンロードします。インストールは管理画面のインストーラメニューから行ってください。（参考:コンポーネントのインストール、モジュールのインストール、プラグインのインストール）

メニューを元に、子メニューを自動作成してみる

例として、サンプルデータの「mainmenu」を元にサブメニューが自動作成されるよう設定します。mainmenuには初期状態で子メニューは作成されていません。

メニューから「モジュール」→「サイトモジュール」を選択し、表示されたモジュールの中から「ExtendedMenu」をクリックします。また公開するのを忘れないでください。

パラメータの「Menu Name」では元となるメニューを選択します。ここではメインメニュー（mainmenu）を選択します。

次に「Source Type」では「Menu(Auto Expand Sections/Categories)」を選択します。これを選択すると、親メニューをクリックした時に子メニューが展開されるようになります。

ここで一度保存し、サイトを表示します。メインメニュー内の「ニュース」をクリックすると、このセクションに属するコンテンツアイテムが子メニューとして表示されるはずです。

ニュースセクションには「最新」というカテゴリが存在するのですが、このままでは表示されていません。表示するには「Show Category」から任意のメニュータイプを選択します。ここでは「Table Category Link（テーブル - コンテンツカテゴリー）」を選択しています。

再度表示すると「ニュース」下に「最新」という子メニューが表示されるはずです。「最新」をクリックすると、配下のコンテンツアイテムが孫メニューとして表示されます。クリックしていく毎にメニューが展開されるようになります。

もし始めから展開した状態で表示したい場合は「Expand Menu」をYesに設定します。

全て展開して表示されているのが確認できるはずです。

このままではメインメニューが2つ表示されてしまいますので、元となったメインメニューは表示しないよう設定しますが、非公開に設定するとExtended Menuも表示されません。そこで元となったメニューは編集画面で「Unassigned」に設定します。

セクションやカテゴリを元にメニューを作る

特定のセクションやカテゴリを指定したメニューを作成する事も可能です。

「Source Type」から「Sections」もしくは「Categories」を選択します。次に元となるセクションやカテゴリの名前もしくはIDを「Source Value」に入力します。複数表示したい場合はカンマで区切ります。下記は「ニュースセクション」「よくある質問セクション」をメニューに表示する例です。

どのレベルまでメニューに表示するか、またクリックした時にどのメニュータイプで表示されるかを選択します。例えば下図の場合、セクションをクリックした時に「リスト?コンテンツセクション」で表示され、カテゴリをクリックした時は「Blog? コンテンツカテゴリー」で表示されます。また「Show Content Item」に「Hide」を設定していますので、コンテンツアイテムはメニューに表示されません。

パラメータ

管理画面でのパラメータは以下のとおり。

パラメータ	説明
Menu Class Suffix	メニューアイテムに適用するCSSのクラス名に、接尾辞（サフィックス）を付与することができます。例えば「-sample」と指定すると、メニューアイテムのCSSクラスは「mainlevel-sample」となります。メニューアイテムのデザインカスタマイズ時に使用します。
Module Class Suffix	メニューモジュールに適用するCSSのクラス名に、接尾辞（サフィックス）を付与することができます。例えば「-sample」と指定すると、メニューモジュールのCSSクラス名は「moduletable-sample」となります。メニューモジュールのデザインカスタマイズ時に使用します。
Enable Cache	モジュールをキャッシュするか。
Menu Name	下記「Source Type」に「Menu」を選択した時、元となるメニューを選択します。
Source Type	メニューの元となるアイテムを選択します。
Source Value	上記「SourceType」で「Menu」以外を選択した時、元となるセクションやカテゴリのタイトル（別名）もしくはIDを入力します。複数指定する場合はカンマで区切るか、（アスタリスク）を使用できます。また「-（マイナス）」を使用して表示したくないメニューを除外することも可能です。（例:『,-a』と指定した場合、aで始まるセクション/カテゴリ以外が全て表示される
Show SectionsからShow Contet Item	それぞれどのレベルまで表示するか、またクリックした時のメニュータイプを選択します。
Order	並び順を選択します。
Default Itemid	未確認
Menu Style	メニューのスタイルを選択します。選択肢によってソースの出力方法が変わります。選択した内容によってはデザインが崩れる事があります。
Menu View Plugin Name	Extended Menuにプラグインを組み込むことで、様々なメニューを作成できるっぽい（Webリンクのメニューなど）
Show Menu Icons	メニューアイコンの表示/非表示、表示位置を選択します。
Expand Menu	「Yes」なら、全ての子メニューが常に表示されます。
Expand Until Level	未確認
Expand Until Level	表示する子メニューの最大深さを数値で入力します。
Hide First Entry	Yesに設定すると、メニュー内の最初のメニューアイテムは表示されなくなります。例えばメインメニュー内の「Home」を表示したくない時などに使用します。
Show Parent	未確認
Parent Menu Item	子メニューを親メニューとして表示することができます。Source Typeで「Menu」を選択し、そのメニュー内に子メニューが存在するときに有効です。例えばAという親メニュー内にBという子メニューがあった時、 Parent Menu ItemにAのIDを指定すると、Bが最上位のメニューとして表示されます。親であるAは表示されなくなります。
Begin With Current Item Level	Yesを指定すると、クリックした時に表示されるページでは、子メニューが親メニューとして表示されます。
?	（以下設定項目がありすぎて挫折。時間がある時に調べる予定…。）
Begin With Level	?
Split Menu	?
Menu Count	?
Enable Query Cache	?
Parse Access Key	?
Link Title	?
Level Class	?
Active Menu Class	?
Element Id	?
Enable Menu Template	?
Template Name	?
Indent Image~6	?
Spacer	?
End Spacer	?
Select List Submit Text	?
Hide Submit Button	?
Resolve Itemid By Content Item	?
Current/Active Item Highlighting	?
Current Item Duplicates	?
Access Keys	?
Exact Access Level	?

画像を使用したメニューの作成

サイトのデザインをより美しくするため、メニューも画像で作りたいという要望は多いようです。画像化する事で自由にフォントを使用できたり、より細部までこだわってデザインすることが可能になります。

メニューに使用する画像を作成します。今回はデフォルトテンプレートの「rhuk_solarflare_ii」を使用しますので、メニューモジュールに正しく収まるよう幅157px、高さ27pxの画像を3つ作成しました（高さは自由に決めても大丈夫）。
menuimage_home.gif
menuimage_license.gif
menuimage_news.fig