Joomlaのテンプレートにメニューを追加してみる。いわゆるテンプレートの変更になるのですが、少し複雑です。できれば慣れてきたらやることをおすすめします。
今回は備忘録も兼ねて書いていきます。
まずメニューの名前を「セカンドメニュー」としましょう。実はメニューもモジュールです。つまり何かを追加しようとする時はたいていエクステーションからモジュールやプラグインやテンプレートを追加すると考えた方がよいです。また今回、ベースとなるテンプレートはthemza_j15_08です。
１、まず下準備をします。themza_j15_08にあるindex.phpを編集します。このtemplateのデザインの構造がどうなっているかを見るにはテンプレートの編集からプレビューを見るとわかります。各モジュール(メニュー、検索、登録、etc)や記事などがleft、top、user1～user4などに割り当てられています。今回、作るセカンドメニューをuser5という名前で割り当てたいと思います。
今回、簡単のためにtopメニューをコピーすることでセカンドメニューを作ります。トップメニューを作っているuser3をuser5に置き換えます。コードはこんな感じ。
<div id=”user5″>
<div id=”pillmenu2″><jdoc:include type=”modules” name=”user5″ /></div>
<?php if($this->params->get(‘dateDisplay’)) : ?><div id=”date”><?php echo date(‘l dS \of F Y’); ?></div><?php endif; ?>
<br clear=”all” />
</div>
ここでpilemenu2はスタイルシートでuser5のデザインを定義しています。ちなみにuser3はpilemenuです。このコードをuser4を定義しているコードの下に埋め込みます。
２、次にthemza_j15_08templateDetails.xmlを編集します。これはtemplateに使われているファイルやイメージなどをxml形式で定義しています。たぶん管理画面のメニュー表示用と思います。先ほど１でuser5を追加したのでこれを追加します。コードは
<position>user5</position>
３、セカンドメニューのhover時のイメージファイルの編集。セカンドメニューにマウスのカーソルを持っていったときにblueのグラデーションとするためにmenu_hover.pngファイルを編集します。これをそのまま使っても構いませんが今回はJTrimというフリーのソフトでブルー系のグラデーションに作り変えました。これを新しくmenu_hover2.pngというファイルで保存します。
４、themza_j15_08/cssにあるtemplate.cssを編集します。この中にある#pillmenuがあるのでこれをコピーして名前を#pillmenu2とします。このファイルを編集します。フォントの色と先ほどの３で作ったhoverのファイルを置き換えます。編集した結果は以下です。
#pillmenu2 {
text-align:left;
margin: 0;
float:left;
}
#pillmenu2 ul {
margin: 0;
padding: 0 0 0 8px;
list-style: none;
}
#pillmenu2 li {
float: left;
margin: 0;
padding: 0;
margin-top:5px;
}
#pillmenu2 li a {
font-family:”Trebuchet MS”,Tahoma;
font-size: 13px;
float: left;
display: block;
line-height: 30px;
padding: 0 17px 0 17px;
color: #cc3355;
text-decoration: none;
font-weight: bold;
}
#pillmenu2 li a:hover, #active_menu-nav2 {
background:url(../images/menu_hover2.png) top left repeat-x;
font-family:”Trebuchet MS”,Tahoma;
font-size: 13px;
float: left;
display: block;
line-height: 30px;
padding: 0 17px 0 17px;
color: #cc3355;
text-decoration: none;
font-weight: bold;
}
５、themza_j15_08/cssにあるorange.cssを編集します。このthemza_j15_08というテンプレートはデザインのベースの色を選択できるようになっているのですが今回orangeを選択したため、orange.cssを編集しています。別の色を選択した場合は、それを編集すればいいだけです。#pillmenuをコピーし#pillmenu2とします。編集したのはメニューの項目の間の区切りの色です。編集結果は以下。
#pillmenu2 li a, #pillmenu li a:hover, #active_menu-nav {
border-right: 1px solid #999999;
}
６、５までで下準備は終わりました。管理画面のエクステンションからモジュールを選択して、右上のアイコンで新規を選択します。モジュールの種類はメニューをチェックし次へ。タイトルとメニュー名 、メニュースタイルを選択します。配置はuser5を選択します。拡張パラメータのクラスに-nav2と入れておきます。これを入れておかないと選択しマウスでクリックした後、選択されていることがわかるように色が変わりません(今回の場合は色はブルーのグラデーション)。
７、メニュー管理からメニューの新規作成を選びます。固有の名前をsecondmenu、タイトルをセカンドメニューとします。
これでセカンドメニューが作成されました。
以上、ざーっと書きましたがいかがでしょうか。結構手間がかかる感じがすると思います。
ただいろいろいじっているとどんな仕組みなのが次第にわかってきます。失敗を恐れずいろいろじってみることをおすすめします。必ずバックアップをとっておくようにしましょう。なお当然のことながら、こちらに書いた文章をベースに変更される方は自己責任でお願いします。