テーマのテンプレートをカスタマイズ [D7]

テンプレートカスタマイズのイメージデザインのカスタマイズを進めていくと、どうしてもテンプレートを編集してHTMLタグをカスタマイズしなければならないことがあります。ここでは基本的なテンプレートの構造と編集について簡単に説明します。

Drupal

説明はDrupalコアに付属するBartikのサブテーマを使って行います。サブテーマの作り方は「テーマのスタイルシートをカスタマイズ」で説明しているので参照してください。

Drupalのテンプレート

Drupalでは1つのページは複数の階層構造を持つテンプレートから構成されています。
システムレベルでは最上位のテンプレートであるhtml.tpl.php、page.tpl.php、region.tpl.php が定義されています。名前が示すとおり、それぞれHTML全体、ページレベル、リージョンレベルの出力を担当します。

Drupalのテンプレートは標準では「.tpl.php」という拡張子を持ちます。

例として modules/system/html.tpl.php ファイルを見てみましょう。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
  "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print ＄language->language; ?>" version="XHTML+RDFa 1.0" dir="<?php print ＄language->dir; ?>"<?php print ＄rdf_namespaces; ?>>

<head profile="<?php print ＄grddl_profile; ?>">
  <?php print ＄head; ?>
  <title><?php print ＄head_title; ?></title>
  <?php print ＄styles; ?>
  <?php print ＄scripts; ?>
</head>
<body class="<?php print ＄classes; ?>" <?php print ＄attributes;?>>
  <div id="skip-link">
    <a href="#main-content" class="element-invisible element-focusable"><?php print t('Skip to main content'); ?></a>
  </div>
  <?php print ＄page_top; ?>
  <?php print ＄page; ?>
  <?php print ＄page_bottom; ?>
</body>
</html>

DOCTYPE宣言に続いてHTMLの外郭構造が記述されているのがわかります。
出力される内容はPHPの変数として渡されます。（どのような変数が渡されるかはファイル冒頭のコメントにドキュメントされています。）
テンプレートに渡される時点ですでにHTMLにレンダリングされているので、テンプレートでは変数の内容を出力するだけです。</body>付近を見ると、ページの内容が＄page_top、＄page、＄page_bottomの3つに分けて出力されています。
この＄pageなどの内容は、page.tpl.phpテンプレートで作られています。page.tpl.phpに渡される内容はregion.tpl.phpで、さらにその内容はノード、メニューなど多くのテンプレートで作られる、といった具合です。

参考：How the Drupal theme system works

テンプレートのオーバーライド

Drupalでテンプレートをカスタマイズするには、基本的にはデフォルトのテンプレートを上書き（オーバーライド）することで行います。デフォルトのテンプレートと同じ名前のテンプレートをカスタムテーマの中におけば、デフォルトテンプレートに代わって使われるようになります。
親テーマであるBartik ではnode.tpl.php というテンプレートを持っています。これはノード（Drupal ではWeb ページのことをノードとも呼びます）の出力に使われるものですが、これをmy_theme の中でオーバーライドしてみましょう。

theme/bartik/templates/node.tpl.php ファイルをsites/all/themes/my_theme/templates にコピーしてください。次にテキストエディタでこのテンプレートを編集します。

node.tpl.phpの内容は多少複雑ですが、渡された変数を調べて内容があれば適切なタグでラップして出力する、ということを繰り返しているのがわかります。また表示モードがティザーモードか全文モードかによって出力するタグの構成を変える、ということも行っています。

HTMLタグの構造を壊さないように注意して、適当なタグを追加してみてください。PHPの知識がある方は、変数の内容に応じて出力を変えてみるとおもしろいでしょう。

編集が終わったらDrupalのキャッシュをクリアしてから、基本ページや記事ページなど、適当なページを表示してみてください。編集内容が反映されているはずです。

コンテンツタイプごとのテンプレート

node.tpl.phpをカスタマイズすると、基本ページも記事ページもブログページも、あらゆるノードの出力が全部変更されてしまいます。しかし実際には特定のコンテンツタイプだけをカスタマイズしたいこともあるでしょう。このようなときのため、ノードのテンプレートはコンテンツタイプごとに指定できるようになっています。

たとえば記事ページのテンプレートをカスタマイズしたい場合、記事のコンテンツタイプの内部名は「article」ですので、node--article.tpl.php という名前のテンプレートをつくります。nodeの次にハイフンが二つ入っていることに注意してください。このテンプレートは記事ページの出力時だけに使われます。それ以外のノードではnode.tpl.phpテンプレートが使われます。

コンテンツタイプではなくノードIDによってテンプレートを分けることもできます。たとえばノードのnidが56のページではnode--56.tpl.php が使われます。

テーマ関数のカスタマイズ

テーマはtemplate.phpというファイルを持つことができます。このファイルはDrupalの処理の中で必ず読み込まれ、テーマ関数やレンダリング配列を処理する前処理関数などを記述するのに使われます。この中でテーマ関数をオーバーライドしてみましょう。

sites/all/themes/my_theme/template.php ファイルを作ってください。
テキストエディタで以下のように編集します。
```
<?php
  function my_theme_menu_tree(＄variables) {
    return '<ol class="menu clearfix">' . ＄variables['tree'] . '</ol>';
  }
```
（ファイルの最後に<?phpに対応する?>は不要です。）
Drupalのキャッシュをクリアしてページを表示してください。

ナビゲーションメニューのところを見てみると、メニューのタグが<ul>ではなく<ol>に変わっているはずです。

Drupal のメニューはtheme_menu_tree() というテーマ関数によりレンダリングされます。これをオーバーライドするには関数名の「theme」の部分をテーマ名に変えて、「my_theme_menu_tree」という関数をつくります。親テーマであるBartik も「bartik_menu_tree」というテーマ関数を持っていますが、サブテーマの方が優先されますので、最終的にmy_theme_menu_tree() が使用されることになります。
テンプレート内に出力する内容は、引数の＄variables に配列として渡されます。これは変数名をキーに持つ連想配列になっていて、theme_menu_tree() の場合には＄variables[‘tree’] にメニューアイテムをレンダリングした結果が入っています。

このほかにも、メニューの各項目を処理するtheme_menu_link() やリストを処理するtheme_item_list() 、テーブルを処理するtheme_table() など、多くのテーマ関数が用意されています。これらをオーバーライドすることで、細部にわたるまでタグの構造をコントロールすることが可能になります。