メール不達のお知らせ

2018年11月1日まで、本サイトのお問い合わせメールが機能しておらず、メールを受け取ることができませんでした。この期間内にお問い合わせ頂いた方は、大変お手数ではございますが、再度お問い合わせページからご連絡ください。

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

JEDホームページデモ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

パラメータ

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

パラメータ 説明
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.gifmenuimage_home.gif
menuimage_license.gifmenuimage_license.gif
menuimage_news.gifmenuimage_news.fig

これらをサーバ上へアップロードします。「サイト」→「メディアマネージャ」を選択後、「Stories」ディレクトリへ移動し、メニューに使用する画像を全てアップロードして下さい。
btn_upload.png?

メニューアイテムへ先ほどアップロードした画像を割り当てます。「メニュー」→「設定するメニュー名(mainmenuなど)」を選択し、設定するメニューアイテムを選択します。次の図では「Home」を選択しています。
tips_imagemenu01.png

「メニューイメージ」からメニューアイテムに使用する画像を選択します。今回は「ホーム」の画像「menuimage_home.gif」を選択しました。
tips_imagemenu02.png

設定できたら保存します。同様に他のメニューアイテムにも画像を割り当てて下さい。
btn_save.png?

「モジュール」→「サイトモジュール」から「Extended Menu」を選択します。
tips_imagemenu03.png

「公開」を忘れずに「はい」に設定しましょう。その後「Menu Name」から画像を設定したメニュー名を選択し、「Source Type」は「Menu」を選択します。
tips_imagemenu04.png

ここがキモです。「Show Menu Icons」というパラメータがありますので、「Image Only(Linked)」を選択します。これを選択するとメニューの文字列は表示されず、リンクが設定されたメニュー画像だけが表示されるようになります。
tips_imagemenu05.png

全て設定できたら保存します。
btn_save.png

サイトで確認するとデザインが崩れています。これはメニューアイテムに設定されているCSSが有効なためです。
tips_imagemenu06.png

再度Extended Menuの設定画面を表示し、「Menu Class Suffix」に適当なサフィックス(接尾句)を入力します(ここでは「-imagemenu」としました)。これを設定することで、メニューアイテムに設定されたCSSが無効になります。
tips_imagemenu07.png

サイトを表示し確認します。メニュー画像をクリックし、正しくリンクが設定されている事を確認してください。
tips_imagemenu08.png

メニューアイテム名が画像のAlt属性になります。

【Joomla!が使えるレンタルサーバー】

自分用のリンク

ちょくちょくアクセスするページ。自分用です。

お仕事募集

Joomla!に関するお仕事の依頼、エクステンションの翻訳、トラブルシューティングなどございましたら、こちらからお問い合わせください。