標準のJoomla!を使っていてデザイナーが一番気になるところがメニューである。

Joomla!の標準ではテキストありきでSEO的には申し分ないのだが、私のデザイナーいわく日本のサイトデザインではよくないらしい。

メニューを画像メニューにするべくいろいろとカスタマイズ方法を探していたのだがようやく良さそうなExtensionを見つけた。

Joomla! Extensions Directory - Menu SystemsからExtended Menuを導入してみた。

Extended Menuの導入

1.Extended Menuをダウンロードする。

2.Joomla!の管理画面のトップメニューのインストーラー → モジュールを開く。

3.パッケージファイルアップロード パッケージファイルの参照でダウンロードしてきたファイルを指定。

4.Upload File & Install をクリック。確認画面が出たら継続をクリック。

5.Joomla!の管理画面のメニューのモジュール → サイトモジュールをみるとExtended Menuというのがleftポジションの最後(表示順 99)に新しく出来ているのが確認できる。

Extended Menuを用いた画像メニューの設定(簡易版)

今回は標準メニューとの置き換えを想定して説明する。

1.Joomla!の管理画面のトップメニューのメニュー → mainmenu (加工したいメニューを選ぶ)を選択。

2.画像メニューにしたいメニューアイテムを選ぶ。たとえばmainmenu。

3.パラメーターのメニューイメージを選ぶ。画像はimages/storiesの直下に置くこと。

4.Joomla!の管理画面のトップメニューのモジュール → サイトモジュールからExtended Menuを開く。

5.パラメーターのShow Menu IconsをImage Only (Linked)を選択する。

※Image Onlyはリンクなしなので絵を適当に挟みたいときやタイトルや文言を入れたい時に重宝しそう。

 6.パラメータのMenu Nameはmainmenu(1と同じもの)を選択。

7.以上で保存を選択すると標準の「メインメニュー」の次に表示されている。

8.「メインメニュー」の公開をやめ、「Extended Menu」を公開にすると画像メニューの表示となる。

9.スタイルシートを調整し作業完了。

表示方法が変わるためスタイルシートの編集は必携だがかなり有力なツールと思われる。

Extended Menuを複数作りたい場合はモジュール管理でコピーすれば良さそう。

他にもいろいろな機能が盛り込まれていて活躍の場は広がりそう。