IMUZA.com

<<WordPress(ConoHa)<<はてなブログ

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

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

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

Joomla!(12)テンプレートを自作する -Bootstrapテンプレートを移植する4-
Joomla!(14)テンプレートを自作する -Bootstrapテンプレートを移植する5-
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2022/06/26

WordPress:Aレコード変更でウェブだけ他サーバへ移転

2022/06/13

WordPress Popular Posts 他のプラグインに変えたほうがいいかも

2022/06/06

WordPress Popular Posts 表示されないを解決する

2022/06/03

WordPress Popular Posts 表示されない(解決だが…)

2022/05/29

WordPress:テーマをゼロから作ってみる(2)

最新記事を一覧で見る

よく読まれている記事

カテゴリー

  • はてなブログ211
  • WebTips108
  • javascript95
  • Joomla!88
  • Windows68
  • CSS62
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Wordpress34
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php18
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • cms-style10
  • Chrome10
  • iPhone9
  • Git入門6
  • genesis6
  • Android4
  • Python4
  • ConoHa WING4
  • 静的サイトジェネレーター3
  • Firefox3
  • Blankslate3
  • Docker3
  • SSD3
  • Facebook3
  • スマートフォン3
  • GitHub2
  • Mactype2
  • 映画1
  • rails入門1
  • Twitter1
  • はてなブクマ1
  • youtube1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Another Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2022 · IMUZA.com