モジュールのカスタマイズ
記事やニュース、カレンダーなど、各モジュールの表示方法を定義しているテンプレートファイルは「system/modules/frontend/templates/」に拡張子が「.tpl」というファイルで格納されています。これらのテンプレートファイルの内容はPHPコードが組み込まれたHTMLなので、表示方法を変更したい場合には、部分的に書き換えることによってサイト上の表示をカスタマイズすることができます。
ただ、このフォルダに格納されているファイルを直接書き換えてしまうと、TYPOlightのバージョンアップの際などにうっかり上書きしたりと、メンテナンス的に好ましくありません。
そこでルートディレクトリにある、テンプレートファイルのオーバーライド専用フォルダ「templates」に同じファイル名でカスタマイズを行ったファイルを保存します。
例として、パンくずナビゲーションのカスタマイズ方法を紹介します。
パンくずナビゲーションは、現在のページまでのパスをリンク付きで表示してくれるモジュールです。
標準のままだとページタイトルの間は「>」記号になっています。
このパンくずナビゲーションを表示するためのテンプレートファイル「mod_breadcrumb.tpl」は、下記の様に記述されています。
mod_breadcrumb.tpl
<!-- indexer::stop --> <div class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>> <?php if ($this->headline): ?> <<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>> <?php endif; ?> <?php foreach ($this->items as $item): ?> <?php if ($item['isActive']): ?> <span class="active"><?php echo $item['link']; ?></span> <?php else: ?> <a href="<?php echo $item['href']; ?>" title="<?php echo $item['title']; ?>"><?php echo $item['link']; ?></a> > <?php endif; ?> <?php endforeach; ?> </div> <!-- indexer::continue -->
この「>」記号の表示を、多少グラフィカルにするために画像の三角に変更してみます。
テンプレートファイルの13行目で、下記の箇所を変更するだけです。
テンプレートファイルの13行目で、下記の箇所を変更するだけです。
//13行目 <a href="<?php echo $item['href']; ?>" title="<?php echo $item['title']; ?>"><?php echo $item['link']; ?></a> > //最後の「>」の部分をimgタグに変更します。 <a href="<?php echo $item['href']; ?>" title="<?php echo $item['title']; ?>"><?php echo $item['link']; ?></a> <img src="tl_files/arrow.png" alt="arrow" />
変更を加えた「mod_breadcrumb.tpl」ファイルを、ルートディレクトリの「templates」フォルダに保存します。
このフォルダに保存すると、「system/modules/frontend/templates/」にある同じファイル名のテンプレートファイルよりも優先して読み込んでくれます。
再度サイトにアクセスすると、下記の様に表示が「>」記号から画像の三角に変更されています。
このようにテンプレートファイルを部分的に変更して、オーバーライドすることによって簡単にモジュールのカスタマイズを行えます。
パンくずナビゲーションの場合は「mod_breadcrumb.tpl」のみで定義しますが、ニュースなど他の主要モジュールでは複数のテンプレートファイルから選択することもできます。
そのため、テンプレートファイル名は個別に変えるとができます。ここで注意しないといけないのは、先頭に「mod_」を付けておかないと、TYPOlight側でモジュール用のテンプレートファイルだと認識してもらえません。
同様にフロントエンドページは「fe_」、mootoolsは「moo_」などファイル名には一定のルールがあります。
このフォルダに保存すると、「system/modules/frontend/templates/」にある同じファイル名のテンプレートファイルよりも優先して読み込んでくれます。
再度サイトにアクセスすると、下記の様に表示が「>」記号から画像の三角に変更されています。
このようにテンプレートファイルを部分的に変更して、オーバーライドすることによって簡単にモジュールのカスタマイズを行えます。
パンくずナビゲーションの場合は「mod_breadcrumb.tpl」のみで定義しますが、ニュースなど他の主要モジュールでは複数のテンプレートファイルから選択することもできます。
そのため、テンプレートファイル名は個別に変えるとができます。ここで注意しないといけないのは、先頭に「mod_」を付けておかないと、TYPOlight側でモジュール用のテンプレートファイルだと認識してもらえません。
同様にフロントエンドページは「fe_」、mootoolsは「moo_」などファイル名には一定のルールがあります。