「Bootstrapテンプレートを移植する」の途中ですが、先へ進むために必ず必要となることがありますのでまとめて書いておきます。

テンプレートを弄っていきますとシステムが吐き出す html ファイルを変更したい場合が必ず出てきます。システムファイルを変更すれば何でもできるのですが、そうしますとシステムをアップグレードする場合に作業が増え面倒なことになります。

Joomla! はそんな時のためにシステムが吐き出すレイアウトを変更する方法を提供しています。

• メニューモジュールの出力レイアウトを変更する

Joomla! Documentation

コンテンツはコンポーネントまたはモジュールで出力されますが、それぞれ views フォルダの中にテンプレートを持っています。たとえばメインのコンテンツを出力する com_content は次のような構成になっています。

components    
 ├ com_content  
    ├ views  
       ├ article  
          ├ tmpl  
             ├ default.php (this is a layout)  
             ├ default_links.php (this is a layout)  
             └ default.xml  
          ├ view.html.php (this is the view that outputs the HTML)  
└ metadata.xml

この内、 default.php, default_link.php が出力ファイルですので、変更したいファイルを次のように作成するテンプレート内にコピーすれば、こちらが優先的に呼びだされます。このファイルを変更すれば出力 html が変更されます。

templates
 ├ TEMPLATE_NAME
    ├ html
       ├ com_content
          ├ article
├ default.php

モジュールの場合も同様です。メニューモジュールで試してみましょう。

01メニューモジュールの出力レイアウトを変更する

Joomla!（9）テンプレートを自作する －Bootstrapテンプレートを移植する2－ でメニューモジュールの設定をした際に、サブメニューの表示を css でコントールしましたが、Bootstrapテンプレートではクリックイベントを使っており、また アイコンも表示するようになっています。これはどちらでも構いませんが説明のためにオリジナルと同等にしてみましょう。

modules\mod_menu\tmpl 内から３つのファイルを次の構成でコピーします。

templates
 ├ flat-theme
    ├ html
       ├ mod_menu
          ├ default.php
          ├ default_component.php
├ default_url.php

default.php

59行目に dropdown のクラス名を追加します。

 if ($item->deeper)
    {
        $class .= ' deeper dropdown';
    }

91行目に dropdown-menu を追加します。

 if ($item->deeper)
    {
        echo '<ul class="dropdown-menu nav-child unstyled small">';
    }

default_component.php

// 13行目
$class = ($item->deeper || $item->anchor_css) ? 'class="dropdown-toggle ' . $item->anchor_css . '" ' : '';


// 31行目
    case 0:
        if ($item->deeper) {
?><a <?php echo $class . 'data-toggle="dropdown" '; ?>href="<?php echo $item->flink; ?>" <?php echo $title; ?>><?php echo $linktype; ?> <i class="icon-angle-down"></i></a><?php
        } else {
?><a <?php echo $class; ?>href="<?php echo $item->flink; ?>" <?php echo $title; ?>><?php echo $linktype; ?></a><?php
        }
        break;

これでアイコンも入り、template.css の hover スタイルを無効にすれば、Bootstrapテンプレートと同等になります。ただ、親メニューのクリックがサブメニューの開閉トリガーに使われますのでリンクが無効になります。

これは好きずきですが、Joomla! ではサブメニューを持つ親メニューでも自由にコンテンツが指定できます。サブメニューが表示さえされればリンクは必要ない場合は、メニューアイテムに外部URL を指定してリンク先は空白か # でも入れておけばいいと思います。外部URL を指定した場合は、default_url.php が呼ばれますので、上のコードと同じ箇所を変更します。

このメニューモジュールの変更は css でもできることですのであくまでも例としてのサンプルです。

さて、これで準備ができましたので次はメインコンテンツブロックを index.php に書き加えていきます。