このサイトで使っているDrupalのテーマは、zenというカスタマイズ用のテーマのサブテーマである。Drupalでは誰かが作ったテーマをサーバからダウンロードしてきて使ってもよいし、そのようなテーマを自分で修正して使ってもよい。zenというテーマはもともとカスタマイズしてサブテーマを作成できるように作られたテーマだ。自分で作ったzen のサブテーマは親テーマであるzenのデザインを継承し、必要な箇所だけカスタマイズすることができる。
zenのバージョンは2.xを使っている。実は、1.0からバージョンをあげるとかなり内容が変わっており、めちゃくちゃになってしまっていたのだ。これはいかんと思って、ちゃんとドキュメントを読み、各ファイルの内容もチェックしたので、まとめておきたいと思う。まず、手始めは、.info ファイルだ。
.info ファイルは各テーマのフォルダ内に置かれ、そのテーマについての情報を記述する configuration ファイルみたいなものだ。zen の場合、STARTERKIT フォルダにある STARTERKIT.info.txt というファイルを修正して使うことになる。このファイルの内容を順を追って見ていく。
name = Zen Sub-theme Starter Kit
description = Read the online docs on how to create a sub-theme.
; The screenshot used on the admin/build/themes page.
screenshot = screenshot.png
はじめの3つは、管理セクションのテーマリストのページにテーマの名称、説明、画面の例を表示するためのものだ。name は必須項目、description は推奨項目となっている。zenのサブテーマを作る場合、nameとdescriptionを適切に書き換えておく。
core = 6.x
base theme = zen
core はテーマがどのDrupalのバージョンに対応しているかを示すもので、必須項目だ。base themeはこのテーマがzenのサブテーマであることを示している。base theme を書くことによって、親テーマから各種のリソースが継承される。継承されるのは以下の通りだ。
- スタイルシート
- JavaScript
- template (.tpl.php) ファイル
- どのテーマengineを使うか
- template.phpの内容
- screen shotファイルの指定
継承されないものは以下の通りだ。
- ロゴの画像（logo.png）
- .infoに書いた設定
- “theme-settings.php” ファイルに書いた設定
- colorディレクトリの内容
stylesheets[all][] = html-elements.css
; stylesheets[all][] = wireframes.css
stylesheets[all][] = layout.css
stylesheets[all][] = backgrounds.css
(略)
stylesheets[print][] = print.css
; stylesheets[handheld][] = mobile.css
; stylesheets[only screen and (max-device-width: 480px)][] = iphone.css
その次の部分には、このテーマがどのようなスタイルシートを使うかが定義してある。ここで宣言したスタイルシートファイルがサブテーマのフォルダに置かれて親テーマとは異なるスタイルを実現する。
コメントにしてあるスタイルシートはサブテーマでは使用しないスタイルシートであり、zenの場合は、親テーマであるzenのフォルダ内にあるスタイルシートを使用する（継承する）という意味になる。
また、宣言してあるにも関わらずサブテーマフォルダ内にスタイルシートファイルが無い場合、単に親テーマのスタイルシートを使用しないという意味になる。STARTERKITの例だと、html-elements.css, layout.css, backgrounds.css, …などはサブテーマでカスタマイズすることを想定している。wireframes.cssはzenフォルダ内にあるものを継承する。もし、backgrounds.cssをサブテーマフォルダに置かなければzenのbackgrounds.cssファイルを単に無視することになる。
ここで、all, print, handheld などとあるのは、メディアタイプと呼ぶもので、Drupal ではなくW3CでCSS2.1の規定として定めたものだ。実際にページとして表示する際に、HTMLのヘッダに以下のような行が挿入され、media属性の値になる。
<link type="text/css" rel="stylesheet" media="print" href="/sites/all/themes/nyanchew/print.css?h" />
HTMLのヘッダに書かれる順番は、.infoファイルに書いた順番になる。
; scripts[] = script.js
スタイルシート同様、javascript ファイルを指定することもできる。
regions[left] = primary sidebar
regions[right] = secondary sidebar
regions[navbar] = navigation bar
regions[content_top] = content top
regions[content_bottom] = content bottom
regions[header] = header
regions[footer] = footer
regions[closure_region] = closure
次が regions で、zenでは上記のregionを使用することができる。[]内に書いたregion名が、page.tpl.php ファイルの中で、例えば $left のように変数として参照される。= の右側のregion名は、例えば管理セクションのブロックのページで、ブロックを割り当てるメニューの中でregion名として参照される。
features[] = logo
features[] = name
features[] = slogan
features[] = mission
features[] = node_user_picture
features[] = comment_user_picture
features[] = search
features[] = favicon
features[] = primary_links
features[] = secondary_links
featuresはページを表示する時に表示のOn/Offがスイッチできる要素を表す。zenのSTARTERKITの例では、テーマのロゴ、サイト名、スローガン、ミッション、…などがテーマ設定ページでOn/Off設定ができるようになっている。
settings[zen_block_editing] = 1
settings[zen_breadcrumb] = yes
settings[zen_breadcrumb_separator] = ‘ <80> ‘
settings[zen_breadcrumb_home] = 1
settings[zen_breadcrumb_trailing] = 1
settings[zen_breadcrumb_title] = 0
settings[zen_rebuild_registry] = 1
settings[zen_wireframes] = 0
最後に、settings は、theme-settings.php ファイルの中でテーマ設定可能項目として定義した項目の初期値が書いてある。
