テーマは、Drupal Web サイトのユーザー・インターフェース (UI) に適用されます。Drupal バージョン 7 では、テーマ構造に目に見える変化はないものの、新しいテーマの実装方法を導入しています。この記事では、新規の Drupal 7 テーマを作成する方法を紹介します。
Drupal テーマの目的は、フレームワークの処理ロジックをデザイン要素から切り離すことです。そのために、Drupal ではテーマ、テーマ・エンジン、フックからなる複合テーマ・システムを採用しています。テーマのコンポーネントが Drupal コア・システムおよびモジュールのデザイン要素と連動して、独特のルック・アンド・フィールのユーザー・インターフェースを作成し、個々の Drupal ページとフォームを仕上げます。Drupal のビジネス・ロジックがそのプレゼンテーション・ロジックから切り離されることにより、コードは保守しやすくなります。しかも、テーマ層の実装を別のものに交換するにあたってコード層を作成し直す必要はなく、また同様にコード層の実装を別のものに交換するにあたってテーマ層を作成し直す必要もありません。図 1 に、Drupal フレームワークのアーキテクチャーを示します。
図 1. Drupal フレームワークのアーキテクチャー
テーマは Drupal コアがデータベースから取得したデータを、テーマ・エンジンをベースに表示します。つまりテーマ・エンジンは、Drupal コアとテーマ・テンプレートの間のインターフェースとしての役割を持ちます。
テーマ・エンジンは、テーマが Drupal コアとやりとりするための手段です。Drupal で使用できるテーマ・エンジンはさまざまにあります。そのうち最もよく使われているのは、以下のテーマ・エンジンです。
PHPTemplateXTemplate- Plain PHP
- Smarty Engine
お望みであれば、独自に作成したカスタム・エンジンを使用することもできます。
この記事では、Drupal のデフォルト・テーマ・エンジンである PHPTemplate
のみを使用します。PHPTemplate テーマ・エンジンは、filename.tpl.php というような名前の付いた個々のテーマ・ファイルを使用して、Drupal の
theme_filename()
関数にテーマを設定します。これらのテーマ・ファイルのそれぞれに含まれているのは、動的データのための HTML スケルトン、そして PHP
ステートメントです。テーマを作成するために必要なコードの量はほんのわずかなので、PHP の基礎知識があれば、PHPTemplate を使って高度なテーマを簡単に作成することができます。
テーマは複数のファイルで構成されます。実際のファイルの数はテーマの複雑さによって異なり、3 つのファイルしかないこともあれば、theme ディレクトリー内の複数のフォルダーに配置されたグラフィック要素とさまざまなスクリプトを含め、数十のファイルで構成されることもあります。図 2 に、テーマのメイン・フォルダー内に通常あるはずの典型的なファイルをその種類 (color フォルダー、images フォルダー、ロゴ・ファイル、テンプレート・ファイル、スタイルシート・ファイル、PHP ファイルなど) とともに示します。
図 2. テーマ・フォルダーの典型的な内容
上記のファイルのすべてがテーマに必要なわけではないことに注意してください。テーマによっては、多くの人々が必要不可欠であると考えている CSS (Cascading StyleSheet) ファイルでさえ使用していないものもあります。これらのテーマ・ファイルの用途を理解することによって、テーマの構造、そしてテーマが機能する仕組みが明らかになってきます。そこで、上記の図に示されている theme ディレクトリー内のファイルをいくつか取り上げ、テーマ全体のなかでのそれぞれの役割を調べていきましょう。
.info ファイルは必須のファイルです。Drupal がテーマを認識するためには、このファイルが含まれていなければなりません。.info ファイルはテーマの内部名を Drupal に指示します。例えば、.info ファイルの名前が ibmtheme.info だとすると、Drupal はこのテーマに ibmtheme という名前を付けることになります。JavaScript、メタデータ、スタイルシート、ブロック・リージョンなどの要素がテーマで使用されている場合には、これらの要素も .info ファイルの中で定義しなければなりません。それ以外の内容はすべてオプションです。リスト 1 に一例として、Bartik テーマの .info ファイルの内容を記載します。
リスト 1. Bartik テーマの .info ファイルの内容
; $Id: bartik.info,v 1.5 2010/11/07 00:27:20 dries Exp $ name = Bartik description = A flexible, recolorable theme with many regions. package = Core version = VERSION core = 7.x stylesheets[all][] = css/layout.css stylesheets[all][] = css/style.css stylesheets[all][] = css/colors.css stylesheets[print][] = css/print.css regions[header] = Header regions[help] = Help regions[page_top] = Page top regions[page_bottom] = Page bottom regions[highlighted] = Highlighted regions[featured] = Featured regions[content] = Content regions[sidebar_first] = Sidebar first regions[sidebar_second] = Sidebar second regions[triptych_first] = Triptych first regions[triptych_middle] = Triptych middle regions[triptych_last] = Triptych last regions[footer_firstcolumn] = Footer first column regions[footer_secondcolumn] = Footer second column regions[footer_thirdcolumn] = Footer third column regions[footer_fourthcolumn] = Footer fourth column regions[footer] = Footer settings[shortcut_module_link] = 0 ; Information added by drupal.org packaging script on 2011-01-05 version = "7.0" project = "drupal" datestamp = "1294208756" |
theme ディレクトリーには、xxx.tpl.php といった名前が付けられたテンプレート・ファイルがいくつか格納されます。これらのテンプレート・ファイルに含まれるのは、テーマの XHTML (Extensible HTML) マークアップと PHP の変数です。場合によっては、これらのテンプレート・ファイルを、RSS などの別のデータ・タイプで出力するようにコーディングすることができます。一般的には、Drupal テーマの各 .tpl.php ファイルは、それぞれに特定のデータ出力を処理するようにコーディングされます。テンプレート・ファイルに複雑なロジックを組み込むと、ファイルを保守するのが難しくなり、混乱を招いて非生産的になる可能性があるからです。望ましいシナリオは、テンプレート・ファイルには単純な XHTML タグと PHP だけを含めることです。
リスト 2 に node.tpl.php ファイルの内容を記載します。これは、主要なテーマである Garland の基本ノードの出力を記述するテンプレート・ファイルです。
リスト 2. Garland テーマの node.tpl.php ファイルの内容
<?php
// $Id: node.tpl.php,v 1.24 2010/12/01 00:18:15 webchick Exp $
?>
<div id="node-<?php print $node->nid; ?>"
class="<?php print $classes; ?>"<?php print $attributes; ?>>
<?php print $user_picture; ?>
<?php print render($title_prefix); ?>
<?php if (!$page): ?>
<h2<?php print $title_attributes; ?>><a href="<?php
print $node_url; ?>"><?php print $title; ?></a></h2>
<?php endif; ?>
<?php print render($title_suffix); ?>
<?php if ($display_submitted): ?>
<span class="submitted"><?php print $submitted ?></span>
<?php endif; ?>
<div class="content clearfix"<?php print $content_attributes; ?>>
<?php
// Hide the comments and links now so you can render them later.
hide($content['comments']);
hide($content['links']);
print render($content);
?>
</div>
<div class="clearfix">
<?php if (!empty($content['links'])): ?>
<div class="links"><?php print render($content['links']); ?></div>
<?php endif; ?>
<?php print render($content['comments']); ?>
</div>
</div>
|
template.php ファイルには通常、テーマの出力に対する条件付きロジックおよびデータ処理のすべてが格納されます。template.php ファイルは、テーマの
.tpl.php ファイルを整頓しておくためにも使用することができます。これは PHP ファイルなので、ファイルの内容は PHP の開始タグ <?php で始めなければなりませんが、終了タグは省略しても構いません。
テーマが機能するために不可欠ではないものの、多くのテーマで使用されている要素がいくつかあります。具体的には、ロゴおよびスクリーン・キャプチャー、theme-settings.php ファイル、color.inc ファイルなどです。
- ロゴおよびスクリーン・キャプチャー: これらの要素は推奨されますが、テーマが機能するためには絶対に必要というわけではありません。ただし、自分で作成したテーマを Drupal リポジトリーに寄稿する場合には、必ずスクリーン・キャプチャーが必要です。図 3 に、Garland テーマのスクリーン・キャプチャーを示します。
図 3. Garland テーマのスクリーン・キャプチャー
- theme-settings.php: このファイルは、管理 UI 設定や一般的な設定にはない高度なフィーチャー
(検索、ミッション、ロゴなど) を表示します。リスト 3 に示す Garland テーマの theme-settings.php の内容を見ると、このファイルが最終的にどんな内容を表示するかがおおよそわかるはずです。
リスト 3. Garland テーマの theme-settings.php ファイルの内容<?php // $Id: theme-settings.php,v 1.3 2010/09/04 15:21:09 dries Exp $ /** * @file * Theme setting callbacks for the garland theme. */ /** * Implements hook_form_FORM_ID_alter(). * * @param $form * The form. * @param $form_state * The form state. */ function garland_form_system_theme_settings_alter(&$form, &$form_state) { $form['garland_width'] = array( '#type' => 'radios', '#title' => t('Content width'), '#options' => array( 'fluid' => t('Fluid width'), 'fixed' => t('Fixed width'), ), '#default_value' => theme_get_setting('garland_width'), '#description' => t('Specify whether the content will wrap to a fixed width or will fluidly expand to the width of the browser window.'), // Place this above the color scheme options. '#weight' => -2, ); }
最終的に表示されるのは、図 4 のようなフォームです。
図 4. テーマ設定ページ
- color.inc: color モジュールの役割は、管理者がスタイルシートに自ら手を加えなくても、テーマのカラー・スキームを完全に変更できるようにすることです。テーマに color モジュールによるサポートが必要な場合には、color.inc ファイルと各種のサポート・ファイルが格納されたカラー・ディレクトリーを必ず含めてください。
テーマを作成するには、2 つの基本的な方法があります。1 つは一から作成するという方法、もう 1 つは既存のテーマを変更するという方法です。この記事では一から新しいテーマを作成しますが、テーマがどのような構造をしているものなのかを確認するために、その都度、既存のテーマの内容を参照します。
まず初めに、テーマ・ファイルを格納するディレクトリーを作成します。このディレクトリーを配置するのに最適な場所は、sites/all/themes ディレクトリーです。作成するディレクトリーには、テーマの内容を表す固有の名前を付けてください。名前にはスペースを含めることはできません。
絶対にそうしなければならないわけではありませんが、スタイルシート (CSS ファイル) 用、画像用、スクリプト用 (テーマでスクリプトが使用されている場合) にそれぞれサブディレクトリーを作成すると、ファイルを整理しておくのに役立ちます。
.info
ファイルは、一般に構造とテーマの内容および構成を記述するために必要なパラメーターがデータとして含まれる、単なるテキスト・ファイルに過ぎません。このテキスト・ファイル内の各行はキーと値のペアになっており、等号
(=) の左側のキーと右側の値が対にされます。リスト 4 に、一例を記載します。
リスト 4. Garland テーマの .info ファイルの内容の抜粋
; $Id: garland.info,v 1.10 2010/11/07 00:27:20 dries Exp $ name = Garland description = A multi-column theme that can be configured to modify colors and switch between fixed- and fluid-width layouts package = Core version = VERSION core = 7.x stylesheets[all][] = style.css stylesheets[print][] = print.css settings[garland_width] = fluid ; Information added by drupal.org packaging script on 2011-01-05 version = "7.0" project = "drupal" |
コメントを追加するには、セミコロン (;) でコメント行を開始します。大括弧 ([]) は、関連付ける値の配列を作成する場合に使用します。ここからは、.info ファイルに含まれていなければならない要素、あるいは含めることができる要素をひと通り説明します。
name
値は必須です。値には、人間が読んで理解できる名前としてアルファベットで始まるテーマ名を指定してください。テーマ名には、PHP
で関数を作成するときと同じ制限が適用されます。Drupal はテーマ名をそれと同じ目的で使用するためです。したがって、名前には数字とアンダーバー (_) を含めることはできますが、ハイフン (-)、スペース、句読点を含めることはできません。構文は以下のとおりです。
name = Garland |
description
キーは推奨される要素です。これは、テーマの簡単な説明にとどめてください。ここに入力する説明は、テーマ選択または「Appearance (外観)」ページに表示されます。構文は以下のとおりです。
description = A multi-column theme that can be configured to modify colors and switch between fixed- and fluid-width layouts |
screenshot キーはオプションです。このキーは、新しく作成したテーマのサムネール画像が置かれている場所を
Drupal に指示します。このキーを指定しておくと、「Appearance (外観)」ページに指定のサムネール画像も表示されます。.info ファイルにこのキーが定義されていない場合、Drupal はデフォルト・テーマのディレクトリーからデフォルトの screenshot.png ファイルを呼び出します。サムネール・ファイルに screenshot.png 以外の名前を付けた場合や、サムネール・ファイルをテーマのメイン・ディレクトリー外部のディレクトリーに配置している場合には、このキーを定義する必要があります。構文は以下のとおりです。
screenshot = /images/screenshot.png |
スクリーン・ショット・ファイルを作成するには、単純に、ブラウザーに表示された完成後のテーマの画像をキャプチャーします。その後、画像のサイズを 294 x 219 ピクセルの大きさにトリミングしてから、screenshot.png という名前を付けて画像を保存します。このファイルは、.info ファイルと同じフォルダーに配置してください。
よく使われているテーマの多くには version
キーが組み込まれていますが、このキーの使用は推奨されません。作成したテーマを Drupal テーマ・リポジトリーにホストする予定の場合には、version を定義する必要はありません。ダウンロード用にリリースがパッケージ化される時点で、drupal.org が自動的にバージョン文字列を追加するからです。Drupal テーマ・リポジトリーにホストしない場合には、自分の気に入るバージョン文字列を定義することができます。構文は以下のとおりです。
version = 1.0 |
core キーは、必須の値です。現在サポートされている Drupal のすべてのバージョンでは、作成したモジュールとテーマが対応する Drupal のバージョンを示すことが要件となっています。このキーに設定する値が Drupal Core Compatibility 定数 (include/bootstrap.inc ファイル内にあります) と比較され、一致しない場合には、Drupal がそのテーマを無効にします。この定数の構文は以下のとおりです。
<?php
define('DRUPAL_CORE_COMPATIBILITY', '7.x')
?>
|
drupal.org のパッケージング・スクリプトは、各リリース・ノードの Drupal Core Compatibility の設定に基づいて、自動的にこの値を設定します (テーマを寄稿する場合)。
engine キーは、テーマが使用するテーマ・エンジンの種類を指定します。ほとんどの場合、このキーは必須です。.info
ファイル内に engine が指定されていないと、Drupal はそのテーマを、.theme
ファイルで実装されたスタンドアロンのテーマであると見なします。Drupal.org リポジトリーに含まれるテーマの大半は、Drupal
コアにパッケージ化されているデフォルトの PHPTemplate エンジンを使用します。構文は以下のとおりです。
engine = phptemplate |
作成するテーマが別のテーマのサブテーマである場合、必ずその base theme を宣言して、テーマの継承を有効にしてください。つまり、ベース・テーマのファイル・リソースをサブテーマで使用できるようにするということです。それには、マシンで読み取り可能なベース・テーマの内部名を入力する必要があります。構文は以下のとおりです。
base theme = garland |
regions キーは、テーマに使用可能なブロック・リージョンを定義します。明確に regions キーを定義してから、マシンで読み取り可能な内部名を角括弧で囲みます。その後、人間が読んで理解できる名前を該当する値として定義する必要があります。構文は以下のとおりです。
regions[highlighted] =Mission Statement |
リージョンを定義しないことにした場合、Drupal 7 テーマにはデフォルトで以下の値が適用されます。
regions[header] = Header regions[highlighted] = Highlighted regions[help] = Help regions[content] = Content regions[sidebar_first] = Left sidebar regions[sidebar_second] = Right sidebar regions[footer] = Footer |
特定のニーズに応じて、上記の値を変更することができます。その場合、以下の構文で行を宣言する必要があります。
regions[highlighted] =Mission Statement |
テーマの設定ページ上では、さまざまなページ要素の表示/非表示を切り替えることができます。テーマの設定ページにどのチェック・ボックスが表示されるかは、features キーで制御されます (図 5 を参照)。したがって、テーマで定義または使用しない要素については、対応するチェック・ボックスを非表示にすることができます。フィーチャーのエントリーを省略すれば、そのフィーチャーのチェック・ボックスが非表示になります。フィーチャーが 1 つも定義されていない場合は、デフォルトで想定されているすべてのチェック・ボックスが表示されます。
図 5. テーマのフィーチャー設定ページ
リスト 5 に、features キーに使用できるすべての要素を記載します。
リスト 5. .info ファイル内のテーマのフィーチャー・エントリー
features[ ] = logo features[ ] = name features[ ] = slogan features[ ] = node_user_picture features[ ] = comment_user_picture features[ ] = favicon features[ ] = main_menu features[ ] = secondary_menu |
Drupal テーマはこれまで、デフォルトで style.css を使用するように設定されていましたが、現在のバージョンでは style.css が .info ファイル内に指定されていない場合、テーマはデフォルトで style.css を使用することはありません。また、.info ファイルに指定することで、新しいスタイルシートを追加することもできます。構文は以下のとおりです。
stylesheets[all][] = css/style.css stylesheets[print][] = css/print.css |
これまで、JavaScript ファイルを組み込むには、テーマの template.php ファイル内の drupal_add_js() などの関数を呼び出すだけというのが一般的でした。しかし Drupal 7 では、JavaScript ファイルが .info ファイルに指定されている場合にのみ、そのファイルが組み込まれます。構文は以下のとおりです。
scripts[] = scripts/myscript.js |
この要素に定義する文字列が、テーマでサポートする最小 PHP バージョンとなります。デフォルト値は、DRUPAL MINIMUM
PHP 定数 (includes/bootstrap.inc ファイル内) から得られます。
<?php
define('DRUPAL_MINIMUM_PHP', '5.2.4')
?>
|
この値を変更することはできますが、文字列を追加する必要はありません。構文は以下のとおりです。
php = 5.2.4 |
.info ファイルには、Drupal があらゆるインストール済みテーマに対して前提とするデフォルト値が含まれます。これらの値が .info ファイルに定義されていなければ、Drupal はテーマにデフォルト値を使用させます。ただし、これらの値はグループとして適用されることに注意してください。例えば、以下のように行を変更したとします。
regions[sub_header] = Sub-header |
この場合、残りのデフォルト・リージョンを再定義しなければ、それらのリージョンはすべて省略されます。この規則は、スタイルシートにも適用されます。厳密に言うと、スタイルシートはグループで定義されませんが、.info ファイルに別のスタイルシートを定義する場合には、style.css を再定義する必要があります。そうしなければ、style.css は組み込まれません。
リスト 6 に記載するキーと値は、Drupal 7 のテーマのデフォルトの設定です。
リスト 6. デフォルトの .info 値
regions[sidebar_first] = Left sidebar regions[sidebar_second] = Right sidebar regions[content] = Content regions[header] = Header regions[footer] = Footer regions[highlighted] = Highlighted regions[help] = Help regions[page_top] = Page Top regions[page_bottom] = Page Bottom engine = phptemplate features[ ] = logo features[ ] = name features[ ] = slogan features[ ] = node_user_picture features[ ] = comment_user_picture features[ ] = favicon features[ ] = main_menu features[ ] = secondary_menu screenshot = screenshot.png |
ここで、典型的な page.tpl.php ファイルの内容を検討します。図 6 に示す画像は、Garland テーマから引用しています。ブラウザーでソースがどのように表示されるかを見てください。
図 6. ブラウザーに表示されたpage.tpl.php のソース・コード
よく見てみると、page.tpl.php テンプレートは PHP のステートメントが大量に散りばめられた単なる HTML ページに過ぎません。非常に都合の良いことに、PHP 要素のほとんどはすでに Drupal に定義されているため、必要な作業は、これらの要素を好きなように配置するだけです。
注: http://drupal.org/node/190815 [Core
Templates] リンクにアクセスすると、page.tpl.php テンプレートで使用できる変数のリストを確認することができます。
page.tpl.php
を作成するには、いくつもの変数を使用することができます。どの変数を組み込むかは、テーマで実現したい機能によって決まります。例えば、パンくずリストをページに表示したい場合には、$breadcrumbs 変数を追加します。
以下に、page.tpl.php で最もよく使用されている変数を記載します。
$site_name$logo(テーマの設定によってアップロードされるロゴ。ロゴ・テーマ・フィーチャーを実装する場合にのみ役立ちます。)$title(ページ・タイトル)$main_menu$secondary_menu$breadcrumbs(ユーザーが Web サイトをナビゲートする際に参照したリンクの跡を残す、ナビゲーション支援)
Drupal の管理に関連する変数もあります。
$tabs(特に管理メニューを編集または表示するときに使用するメニュー。モジュールでよく使用されます。)$messages$action_links
さらに、以下の変数も役に立ちます。
$base_path(サイトのルートへのパス)$front_page(サイトのフォント・ページへのパス)$directory(テーマへのパス)
変数を挿入するには、Render アプリケーション・プログラミング・インターフェース (API) を以下のように使用します。
<?php print render($tabs); ?> |
PHP および HTML に関して平均以上のスキルを持っていれば、サンプルがどのように作成されているかを調べることにより、使用可能な変数を使って独自の素晴らしいテーマを作成できるはずです。
Drupal コアには、その他のテーマ・ファイルに使用できるデフォルト・テンプレートが同梱されています。デフォルト・テンプレートのリストは、Drupal サイト (「参考文献」にリンクを記載) で確認することができます。page.tpl.php ファイルに関して、簡単に独自のテンプレート・ファイルを作成する最善の方法は、コア・ファイルを見つけて、その構成をよく調べてから独自のファイルを作成することです。Drupal サイトにアクセスすると、あらゆるテーマ・ファイルに使用できる変数のリストを参照することができます。
通常の静的 HTML ページでは、ページの表示に使用するスタイルシートの場所を示すポインターをページの head 要素の中で組み込む必要があります。以下は、ポインターの一例です。
<link rel="stylesheet" type="text/css" href="/model.css" /> |
すでに説明したように、新しいスタイルをテーマに追加することで、デフォルトのスタイルを上書きすることができます。新しいスタイルとデフォルトのスタイルのどちらを使用するにしても、テーマのスタイルシートに関する情報を .info ファイルに入力する必要があります。どのような形でスタイルシートを使用するかと言うと、Drupal コアがフレームワークの標準ページ要素に CSS クラスを使用する場合と同じようなモジュール手法を使用します。テーマ開発者が独自のスタイルシートを作成したとしても、Drupal サイト全体で多数のクラスが出現します。Drupal 7 コアの全クラスを網羅したリストについては、「参考文献」を参照してください。
この記事では、Drupal 7 でテーマ・システムが機能する仕組みを概説しました。また、Drupal テーマを構成する各種のコンポーネントについて説明した後、デフォルトの
PHPTemplate テーマ・エンジンを使って一から新しいテーマを作成する方法を紹介しました。各コンポーネント・テーマ・ファイルの標準的な構造、そして独自のカスタム・テーマを作成するために何が必要なのかがわかった今、新しいテーマの作成をお楽しみください!
学ぶために
- Drupal
サイトにアクセスして、Drupal コアに同梱されているその他のテーマのデフォルト・テンプレートを調べてください。
- page.tpl.php
リファレンス・ページで、独自に作成するテーマで使用できる変数のリストを調べてください。
- Drupal サイトで、CSS クラスの完全なリストを参照してください。
- developerWorks Open source
ゾーンには、オープソースのツールおよびオープンソース技術の使用に関する情報が豊富に揃っています。
- developerWorks Web development
に、多種多様な Web ベースのソリューションを話題にした記事が揃っています。
- さまざまな IBM 製品や IT 業界のトピックに焦点を絞った developerWorks のTechnical
events and webcasts で最新情報を入手してください。
- 無料の
developerWorks Live! briefing に参加して、IBM の製品およびツールについての情報や IT
業界の動向についての情報を迅速に把握してください。
- developerWorks の
on-demand demos で、初心者向けの製品のインストールとセットアップから、熟練開発者向けの高度な機能に至るまで、さまざまに揃ったデモを見てください。
- Twitter で developerWorks
をフォローするか、developerWorks で Linux
に関するツイートのフィードに登録してください。
製品や技術を入手するために
- Drupal 7 の詳細を調べてください。
- ご自分に最適な方法で IBM
製品を評価してください。評価の方法としては、製品の試用版をダウンロードすることも、オンラインで製品を試してみることも、クラウド環境で製品を使用することもできます。また、SOA Sandbox
では、数時間でサービス指向アーキテクチャーの実装方法を効率的に学ぶことができます。
議論するために
- developerWorks
blogs から developerWorks コミュニティーに参加してください。
- developerWorks
コミュニティーに参加してください。ここでは他の developerWorks
ユーザーとのつながりを持てる他、開発者によるブログ、フォーラム、グループ、ウィキを調べることができます。
