読者です 読者をやめる 読者になる 読者になる

IMUZA.com

Joomla!によるウェブ制作, PHP, Javascript, CSS

はてなブログ

はてなブログ テーマ制作
・とことこ with Menubar
・Simple Responsive with Menubar
・Mobile-First Responsive
・Hyperspace

Joomla!

Joomla! によるウェブ制作
・テンプレート自作
・モジュール自作
・Joomla!でサイト構築

Web Tips

ウェブサイトづくりに役立つかも
・Javascript
・CSS

Windows, Linux

Windows10
Plamo Linux

Joomla!(13)テンプレートを自作する -システムが出力するレイアウトを上書きする方法-

Joomla!

「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

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

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

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

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

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 に書き加えていきます。