Drupal 7 用に新しいテーマを作成する

Drupal サイト向けのカスタム・ルック・アンド・フィールを作成する

テーマとは、Drupal のコアとなるルック・アンド・フィールを作成または拡張するための Drupal 用プラグインです。この記事では、Drupal ではテーマ・システムがどのように機能するのか、その概要を説明します。そのなかで、Drupal テーマを構成する各種のコンポーネントについて、さらにはどのコンポーネントが必要で、どのコンポーネントがオプションの要素であるかを判断する方法を説明します。また、デフォルトのテーマ・エンジンである PHPTemplate を使って一から新しいテーマを作成する方法も紹介します。

Timi Ogunjobi, Software Engineer and Author, Xceedia Limited

Photograph of Timi OgunjobiTimi Ogunjobi は、執筆家兼 Web アプリケーション開発者で、Web およびモバイル・アプリケーションを開発するソフトウェア・エンジニアリング会社、Xceedia Limited の CEO を務めています。彼の著書の中には、Drupal を話題にした本も 3 冊あります。



2012年 6月 21日

テーマは、Drupal Web サイトのユーザー・インターフェース (UI) に適用されます。Drupal バージョン 7 では、テーマ構造に目に見える変化はないものの、新しいテーマの実装方法を導入しています。この記事では、新規の Drupal 7 テーマを作成する方法を紹介します。

Drupal テーマの目的は、フレームワークの処理ロジックをデザイン要素から切り離すことです。そのために、Drupal ではテーマ、テーマ・エンジン、フックからなる複合テーマ・システムを採用しています。テーマのコンポーネントが Drupal コア・システムおよびモジュールのデザイン要素と連動して、独特のルック・アンド・フィールのユーザー・インターフェースを作成し、個々の Drupal ページとフォームを仕上げます。Drupal のビジネス・ロジックがそのプレゼンテーション・ロジックから切り離されることにより、コードは保守しやすくなります。しかも、テーマ層の実装を別のものに交換するにあたってコード層を作成し直す必要はなく、また同様にコード層の実装を別のものに交換するにあたってテーマ層を作成し直す必要もありません。図 1 に、Drupal フレームワークのアーキテクチャーを示します。

図 1. Drupal フレームワークのアーキテクチャー
Drupal フレームワークのアーキテクチャー

テーマは Drupal コアがデータベースから取得したデータを、テーマ・エンジンをベースに表示します。つまりテーマ・エンジンは、Drupal コアとテーマ・テンプレートの間のインターフェースとしての役割を持ちます。

テーマ・エンジン

テーマ・エンジンは、テーマが Drupal コアとやりとりするための手段です。Drupal で使用できるテーマ・エンジンはさまざまにあります。そのうち最もよく使われているのは、以下のテーマ・エンジンです。

  • PHPTemplate
  • XTemplate
  • Plain PHP
  • Smarty Engine

その他の Drupal テーマ・エンジン

Drupal でよく使用されているテーマ・エンジンには、他にも PHPTALwgSmarty、Zengine、Awesomengine、ETS、Haml、XSLengine、Peroxide などが挙げられますが、この記事では PHPTemplate エンジンを使用します。PHPTemplate は、デフォルト・テーマ・エンジンとして Drupal 7 にパッケージ化されている唯一のテーマ・エンジンです。

お望みであれば、独自に作成したカスタム・エンジンを使用することもできます。

この記事では、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 ファイル

.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"

.tpl.php テンプレート・ファイル

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 ファイルには通常、テーマの出力に対する条件付きロジックおよびデータ処理のすべてが格納されます。template.php ファイルは、テーマの .tpl.php ファイルを整頓しておくためにも使用することができます。これは PHP ファイルなので、ファイルの内容は PHP の開始タグ <?php で始めなければなりませんが、終了タグは省略しても構いません。

その他のファイル

テーマが機能するために不可欠ではないものの、多くのテーマで使用されている要素がいくつかあります。具体的には、ロゴおよびスクリーン・キャプチャー、theme-settings.php ファイル、color.inc ファイルなどです。

  • ロゴおよびスクリーン・キャプチャー: これらの要素は推奨されますが、テーマが機能するためには絶対に必要というわけではありません。ただし、自分で作成したテーマを Drupal リポジトリーに寄稿する場合には、必ずスクリーン・キャプチャーが必要です。図 3 に、Garland テーマのスクリーン・キャプチャーを示します。
    図 3. Garland テーマのスクリーン・キャプチャー
    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 ファイルを作成する

.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

リージョン

テーマのリージョンを新規に作成する

作成したページ内で、「Blocks (ブロック)」管理ページで編集できるようにしたい部分は、リージョンにする必要があります。一般に、リージョンにはヘッダー、右側のサイドバー、コンテンツ領域、フッターが含まれます。.info ファイルには、すべてのリージョンを定義してください。そうしなければ、Drupal にとってリージョンは存在しないことになります。

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

この要素に定義する文字列が、テーマでサポートする最小 PHP バージョンとなります。デフォルト値は、DRUPAL MINIMUM PHP 定数 (includes/bootstrap.inc ファイル内) から得られます。

<?php
define('DRUPAL_MINIMUM_PHP', '5.2.4')
?>

この値を変更することはできますが、文字列を追加する必要はありません。構文は以下のとおりです。

php = 5.2.4

デフォルトの .info 値

.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 ファイルを作成する

ここで、典型的な page.tpl.php ファイルの内容を検討します。図 6 に示す画像は、Garland テーマから引用しています。ブラウザーでソースがどのように表示されるかを見てください。

図 6. ブラウザーに表示されたpage.tpl.php のソース・コード
ブラウザーに表示された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 に関して平均以上のスキルを持っていれば、サンプルがどのように作成されているかを調べることにより、使用可能な変数を使って独自の素晴らしいテーマを作成できるはずです。


その他のテンプレート・ファイルを作成する

print と render のどちらを使用するか

変数のなかには、render() 関数を使用して表示しなければならないもの、あるいは単純に出力できるものがあります。page.tpl.php リファレンス・ページ (「参考文献」のリンクを参照) に記載されている変数が配列に含まれる場合は、render() を使用する必要があります。それ以外の場合は、<?php print $variable; ?> の形で変数を出力することができます。

Drupal コアには、その他のテーマ・ファイルに使用できるデフォルト・テンプレートが同梱されています。デフォルト・テンプレートのリストは、Drupal サイト (「参考文献」にリンクを記載) で確認することができます。page.tpl.php ファイルに関して、簡単に独自のテンプレート・ファイルを作成する最善の方法は、コア・ファイルを見つけて、その構成をよく調べてから独自のファイルを作成することです。Drupal サイトにアクセスすると、あらゆるテーマ・ファイルに使用できる変数のリストを参照することができます。


style.css ファイル

通常の静的 HTML ページでは、ページの表示に使用するスタイルシートの場所を示すポインターをページの head 要素の中で組み込む必要があります。以下は、ポインターの一例です。

<link rel="stylesheet" type="text/css" href="/model.css" />

すでに説明したように、新しいスタイルをテーマに追加することで、デフォルトのスタイルを上書きすることができます。新しいスタイルとデフォルトのスタイルのどちらを使用するにしても、テーマのスタイルシートに関する情報を .info ファイルに入力する必要があります。どのような形でスタイルシートを使用するかと言うと、Drupal コアがフレームワークの標準ページ要素に CSS クラスを使用する場合と同じようなモジュール手法を使用します。テーマ開発者が独自のスタイルシートを作成したとしても、Drupal サイト全体で多数のクラスが出現します。Drupal 7 コアの全クラスを網羅したリストについては、「参考文献」を参照してください。


まとめ

この記事では、Drupal 7 でテーマ・システムが機能する仕組みを概説しました。また、Drupal テーマを構成する各種のコンポーネントについて説明した後、デフォルトの PHPTemplate テーマ・エンジンを使って一から新しいテーマを作成する方法を紹介しました。各コンポーネント・テーマ・ファイルの標準的な構造、そして独自のカスタム・テーマを作成するために何が必要なのかがわかった今、新しいテーマの作成をお楽しみください!

参考文献

学ぶために

製品や技術を入手するために

  • Drupal 7 の詳細を調べてください。
  • ご自分に最適な方法で IBM 製品を評価してください。評価の方法としては、製品の試用版をダウンロードすることも、オンラインで製品を試してみることも、クラウド環境で製品を使用することもできます。また、SOA Sandbox では、数時間でサービス指向アーキテクチャーの実装方法を効率的に学ぶことができます。

議論するために

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Open source, Web development
ArticleID=821332
ArticleTitle=Drupal 7 用に新しいテーマを作成する
publish-date=06212012