html.tpl.phpやpage.tpl.phpなど***.tpl.phpについて

こんにちは。プログラマーの山中です。滋賀県はすっかり秋になり朝夕が涼しくなりました。過ごしやすくなったのは良いものの、ほぼ毎年この時期に風邪をひくので油断してはいけないと気を張っています。季節の変わり目は体調をくずしやすいので皆さんもお気をつけくださいね。

さて、今回はDrupal上でテンプレートファイルとして使用される「html.tpl.php」「page.tpl.php」「node.tpl.php」「block.tpl.php」などの「***.tpl.php」についてざっくり説明させていただきます。このファイルたちにはテーマ作成の時にページをカスタマイズするのによくお世話になっているのですが、私はいざ使おうと思ったときに「どのファイルをいじればいいんだっけ？」と悩んでしまって他のサイトのテーマフォルダを見て思い出すことも多いです。そんなテンプレートファイルの中から利用頻度の高いものを取り上げていきますね。

以下、「テンプレートファイル」＝「***.tpl.phpファイル」と読み替えてください。

tpl.phpファイルの役割

このテンプレートファイルは最終的にHTMLを吐き出すファイルとなっています。 Wordpressのテンプレートファイル（content.phpやheader.phpなど）に似てますね。

コアで定義されたテンプレートファイルは、カスタムモジュールやテーマフォルダ内に同じ名前のファイルを作成してあげることで上書きすることができます。

例えばbartikテーマがデフォルトテーマになっている場合、コアのpage.tpl.phpは使われずにbartikテーマのpage.tpl.phpが利用されます。

ファイルをまるごと上書きする形になるのでテンプレートファイルの中身を何も記述せずに保存してしまうと画面が真っ白になったりスタイルが崩れたりすることもあります。そんなときは慌てずにベースとなったテンプレートファイルの中身をコピーして貼り付けちゃいましょう(上の画像のpage.tpl.phpの場合はsystemフォルダ内のpage.tpl.phpですね)。

tpl.phpファイルの使用条件

このテンプレートファイルは以下の4つの全てのレイヤーで定義することができます。

コア
モジュール
テーマエンジン
テーマ

私たち開発者がよくさわるのはテーマとモジュールの部分でしょうか。

また、以下3つの条件が揃えばテンプレートファイルを利用することができます。

元のテンプレートファイルが存在する
有効化されたモジュールのフォルダやテーマのフォルダ内にテンプレートファイルが存在している
条件に合ったファイル名を使っている(命名規則が正しい)

tpl.phpファイルの命名規則

英語ですがこちらにわかりやすく書かれています。

基本的にテンプレートファイルは上書きしたいファイルと同じ名前のファイルを作ってあげると利用することができますが、ファイル名を変えることで特定の場面だけで有効となるテンプレートファイルを作ることもできます。例えば、

システム内部名称が「article」のコンテンツの記事内の部分のテンプレートを変更したい場合
node--article.tpl.php (ベース:node.tpl.php)
フロントページのヘッダーやフッターなどのテンプレートを変更したい場合
page--front.tpl.php (ベース:page.tpl.php)
ノードIDが5のヘッダーやフッターなどのテンプレートを変更したい場合
page--node--5.tpl.php (ベース:page.tpl.php)
sidebar_firstリージョン内のブロックのテンプレートを変更したい場合
block--sidebar_first.tpl.php (ベース:block.tpl.php)

...とこんな感じで特定の条件に絞り込みたい時は二重ハイフン(--)を使って単語を区切って条件を絞り込んであげればOKです。 --の前にどのテンプレートを上書きするのかを示し、--の後が絞込の条件を示しています。

ちなみにDrupal6ではハイフン一つだけでOKだったようですが、Drupal7の場合、ハイフン一つだけだとハイフン前後の単語をひっくるめて一つの単語であると認識してしまいます。

tpl.phpファイルの簡単な使い方

node.tpl.phpファイルを上書きするためだけのテーマを作ってみましょう。

テーマファイル群を作成します。 sites/all/themes内に好きな名前でフォルダを作って、その中にフォルダ名と同じ名前のinfoファイルを作って必要な項目を記述してあげます。お好みでスタイルシートなども付け加えてあげるとなおよろしいかと思います。 infoファイルの書き方についてはこちらをご覧ください。
元のテンプレートファイルをコピーして作成したテーマフォルダに貼り付けます。(この場合はmodules/node内のnode.tpl.php)
管理画面上で作成したテーマをデフォルトのテーマに設定します。
これでテンプレートファイルは上書きされました。ためしにテンプレートファイル内の <?php ?> で囲われていないHTML部分になにか書き足し、保存して確認してみてください。

要するに上書きしたいテンプレートファイルを自分で作成したモジュールやテーマ内にコピーしてきてあとはそれを好きにいじれば完了です！

これで好きな位置にサイト名を持ってきたりリージョンの位置関係を変更したりして自分好みのデザインのサイトを作成することができますね。

おまけ：html.tpl.phpとpage.tpl.phpなどの違いと関係性

***.tpl.phpって結構たくさんあります。コアのテンプレートファイルだけでもこんなにあります。

全部の関係性についてお話しすると長くなってしまうので、今回は特に利用頻度の高い代表的なテンプレートファイルの関係性についてだけお話ししますね。

html.tpl.php
page.tpl.php
region.tpl.php
block.tpl.php
node.tpl.php

これらのテンプレートファイルには密接な関係があります。まずhtml.tpl.phpが一番下にあって、その上にpage.tpl.phpがあって、その次にregion.tpl.phpがあって・・・といった感じになるのですが、言葉では説明しづらいのでbartikテーマの場合のテンプレートファイルのイメージ図とそれぞれのclassやphp処理などを除いたコアのテンプレートの簡易的な内容を記述します。それぞれのテンプレートファイル名にリンクをつけているので詳しい内容はそちらよりご確認ください。それぞれのリンク先の「▸View Source」からファイルの内容を確認することができます。

bartikテーマのメインテンプレートファイルの領域(リージョン)のイメージ

html.tpl.php

  <!DOCTYPE html>
  <html>
    <head>
      <!-- <meta>タグなど -->
      <title><!-- ページタイトル --></title>
      <!-- スタイルシートやjapascriptなどを読み込み -->
    </head>
    <body>
      <!-- pageコンテンツ(page.tpl.phpの内容)など -->
    </body>
  </html>

page.tpl.php

  <div id="page">
    <div id="header">
      <!-- ロゴ -->
      <div id="name-and-slogan"> <!-- サイト名か h1タイトル + サイトスローガン --></div>
      <!-- *** headerリージョン(region.tpl.phpの内容) *** -->
    </div>
    <div id="navigation"><!-- メインメニューとサブメニュー --></div>
    <div id="breadcrumb"><!-- パンくずリスト --></div>
    <div id="main">
      <div id="content">
        <!-- *** highlightedリージョン(region.tpl.phpの内容) *** -->
        <!-- 編集用などのタブ -->
        <!-- *** helpリージョン(region.tpl.phpの内容) *** -->
        <!-- *** contentリージョン(region.tpl.phpの内容) / メインコンテンツ *** -->
      </div>
      <div id="sidebar-first"><!-- *** sidebar_firstリージョン(region.tpl.phpの内容) *** --></div>
      <div id="sidebar-second"><!-- *** sidebar_secondリージョン(region.tpl.phpの内容) *** --></div>
    </div>
    <div id="footer"><!-- *** footerリージョン(region.tpl.phpの内容) *** --></div>
  </div>

region.tpl.php

  <div>
    <!-- コンテンツがあればブロック(block.tpl.php)やノード(node.tpl.php)などのコンテンツを表示 -->
  </div>

block.tpl.php

  <div id="BLOCK-ID">
    <h2><!-- ブロックタイトル --></h2>
    <div><!-- コンテンツ内容 --></div>
  </div>

node.tpl.php

  <div id="node-ID">
    <!-- 投稿者画像 -->
    <h2><!-- viewモードが'full'の場合はタイトル --></h2>
    <div class="submitted"><!-- 投稿時間 --></div>
    <div><!-- コンテンツ内容 --></div>
    <!-- リンクとコメント -->
  </div>

bartikテーマのメインテンプレートファイル全て

表示区域がレイヤー分けされているようなイメージですね！

共に働く新しい仲間を
募集しています

スタジオ・ウミは「Drupal」に特化したサービスを提供する Drupal のエキスパートチーム。
フルリモート＆フレックス制だから、働く場所を選ばず時間の使い方も自由です。
そんなワークライフバランスの整った環境で、当ブログに書かれているような
様々な技術を共に学びながら、Drupalサイト開発に携わってみたい方を募集しています。
まずはお話だけでも大歓迎！ぜひお気軽にご連絡ください。

採用情報を見る