Making theme for Drupal 7. part 1.

オリジナルThemeを作成する、とはいっても一から全て作るのはさすがに手間と時間がかかりすぎる。

ありがたいことにDrupalには最初から完成度の高いThemeファイルがいくつか付属してくるので、そのひとつを雛形として利用させてもらおう。

Drupal7に付属してくる基本Themeは以下の4つ。

• bartik
• garland
• seven
• stark

今回はこのうちの”bartik”を雛形として使わせてもらうことにした。

まずは基になるThemeをフォルダーごとコピーする。

基になるTheme、bartikはルート直下の

 /themes 

ディレクトリに収められている。Theme名とおなじ bartik フォルダーがあるので、それを丸ごとコピーしサイト用（ユーザー用）のThemeディレクトリ

/sites/all/themes

に配置する。このあたりの基本的な構造はDrupal6から変わっていない。

単にThemeをコピーしただけではシステムThemeディレクトリ内に同名のThemeが存在するためユーザーThemeディレクトリに配置したThemeは認識されない。

コピーしたThemeがシステムに認識されるように内容を変更していこう。

具体的にはフォルダ名や.infoファイル内の名前の指定をオリジナルなものに書き換える作業をおこなう。

今回、私は”蔦（ツタ）”をイメージしたThemeを作成する予定なのでTheme名を”ivy”とつけることにした。そのまんまのネーミングである。もちろん読者の方は自由に自分の好きな名前をつけてもらってかまわない。その場合は"ivy"の部分を自分がつけた名前で置き換えてもらいたい。

まずはフォルダーから

/sites/all/themes/bartik => /sites/all/themes/ivy

つぎに.infoファイル

/sites/all/themes/ivy/bartik.info => /sites/all/themes/ivy/ivy.info

そして今度は.infoファイルをエディターで開き内容を修正する。

修正前のivy.infoファイルの中身はこうなっている。

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-12-05
version = "7.10"
project = "drupal"
datestamp = "1323125439"

必要な箇所を書き換える。.infoファイルの仕様もDrupal6とほぼ同じである。書き換え後の中身はこうなる。

name = Ivy
description = A flexible, recolorable theme with many regions.
package = Ivy
version = 1.0
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

名前やversionなどを適宜書き換えてある。

bartik.infoファイルの最後にあるコメント

; Information added by drupal.org packaging script on 2011-12-05

これ以下の行は packaging script によって自動的に付け加えられる部分なので手動で内容を書き換えるのは推奨されない。packaging script 自体がよくわからないものなので、今回はコメント以下を全て削除しておいた（無くても特に問題は発生しない）。

.infoファイルに続き、今度はtemplate.phpの内容を書き換える。

template.phpはシステムによってページの内容がHtmlとして構成される段階で呼び出される関数をフックする目的で利用される。template.phpに記述された関数は同名の既存関数の代わりに呼び出される。Theme製作者はこの仕組みを利用して既存関数を拡張することで目的の機能をThemeに実装することが可能になる。そしてtemplate.phpに関数を配置する場合は既存の関数にTheme名のPrefixを付け足すことが仕様となっている。

テーマbartik のtemplate.phpの一部を見てみよう

/**
 * Add body classes if certain regions have content.
 */
function bartik_preprocess_html(&$variables) {
  if (!empty($variables['page']['featured'])) {
    $variables['classes_array'][] = 'featured';
  }

function名の頭にテーマ名である bartik が付加されているのが分かる。

このPrefix部分を全て”ivy_”に変換するのだ。エディターの置換機能をつかえば一瞬で済む。

書き換えが完了したらサイトのテーマ管理にアクセスしてみよう、きちんと”Ivy”テーマが認識されているはずだ。

ちなみに内容はBartikのままなので有効にしてもbartikとまったく同じThemeが表示されるだけとなる。