アイキャッチ画像: デスクの上でパソコンを使用している

今回は Drupal （ドルーパル）を本格活用していく上で欠かせない「テーマ作成」について解説させていただこうと思います。

本記事で対象とする Drupal のバージョンは本記事執筆時点の最新安定版の Drupal 7.x です。 Drupal はメジャーバージョン（バージョンの最初の数字）が変わると実装は大きく変わるため、テーマの作り方等も大きく変わってきます。 参考にされる際はまずはお使いの Drupal のバージョンを確認するようにしてください。

「テーマ作成」とひとことで言ってもその範囲はとても広いので、今回では「入門」ということで Drupal に馴染みの薄い方を対象とした情報に絞った形でご紹介してみたいと思います。 具体的には以下のようなトピックについて取り上げていきます。

  • Drupal のテーマとは
  • 最小単位のテーマの作成方法
  • CSS や JavaScript の利用方法

余談ですが、テーマは英語だと「 theme 」で、読み方はどちらかというと「スィーム」というような感じです。 テーマは英語だと思ってそれっぽく「ティーマ！」なんて言ってもなかなか英語圏の人には通じにくいのでご注意ください。

それではまずは Drupal のテーマとは何ぞやというところから話を進めていきたいと思います。

Drupal のテーマとは

Drupal には多くの概念がありますが、中でも最も重要なものが「コア」「モジュール」「テーマ」の 3 つです。

  • コア
  • モジュール
  • テーマ

「コア」というのは Drupal の標準ディストリビューションに含まれるコードのことです。 Drupal の配布ページに行って zip ファイルをダウンロードしてくると中に入っているファイル一式が「コア」と呼ばれるものになります。

「モジュール」というのはひとまとまりの機能をパッケージにしたものです。 WordPress でいうところの「プラグイン」、 Chrome などのブラウザでいうところの「エクステンション」「拡張機能」に近いイメージです。 コアの機能を強化したり、新たな機能を追加したり、他のモジュールと連動して動いたり、モジュールを使うことでいろんなことを実現することができます。 「 Drupal の機能面をカスタマイズする」、そのために使うものがモジュールです。

「テーマ」というのは Drupal サイトの見た目をカスタマイズするためのひとまとまりのパッケージです。 モジュールが機能を提供するのに対して、テーマは「見た目」「 UI 」をカスタマイズします。 CMS の世界では一般的ですが、テーマを使用することによって、機能は保ったままで見た目だけリニューアルすることなども可能となっています。

Drupal をすでにセットアップした方は次の場所を確認してみてください。

  • サイトの管理画面「テーマ」 /admin/appearance: 現在サイトで利用できるテーマの一覧を確認することができます。有効になっているテーマが上に、無効なテーマが下に一覧になっています。
  • Drupal プロジェクトの「テーマ」ディレクトリ [Drupal のルート]/themes [Drupal のルート]/sites/all/themes: ここにはテーマのためのファイル群が入っています。

最小単位のテーマの作成方法

テーマとは何ぞやというところがわかったら、続いて実際に最小単位のテーマを作っていきましょう。

Drupal のテーマに必要なものは次の 2 つです。

  • テーマディレクトリ
  • .info ファイル

オリジナルテーマを作る場所は [Drupal のルート]/sites/all/themes です。こちらに移動して以下の構造でディレクトリとファイルを作成しましょう。

─ sites/all/themes/
  └ mytheme/
    └ mytheme.info

mytheme という名前のディレクトリを作成しその中に mytheme.info という名前でファイルを作成しましょう。 ファイルを作成したら以下の 3 行を記入して保存します。

name = My Theme
description = はじめての Drupal テーマです。
core = 7.x

続いて Drupal の管理画面にログインし、「テーマ」 /admin/appearance のページを開いてみましょう。 すると今作成したテーマを Drupal が認識しページに表示してくれているはずです。

Drupal 新しく作成されたテーマ

ここでテーマが正しく認識されない場合には以下のことを確認してみるとよいでしょう。

  • ファイルを正しい場所に配置したか
  • ファイル名などは間違っていないか
  • ファイルの中身は間違っていないか

テーマが正しく認識されたら、試しにこのテーマを有効化して「デフォルト」に設定してみましょう。 すると Drupal がこちらのテーマを利用してページを表示するようになります。

Drupal テーマを有効化しデフォルトに設定する

Drupal テーマ作成に必要なことはたったこれだけ！です。 イメージするよりも意外とかんたんだったのではないでしょうか。

ただこれだと何のスタイルも入っていないおもしろみがない見た目になってしまうため、続いて実際に使い物になるようなカスタマイズを加えていきたいと思います。

CSS や JavaScript の利用方法

テーマの作りこみには大きく分けて 3 つの方向性があります。

  1. HTML: テンプレートファイルの追加/上書き
  2. CSS: スタイルの追加/上書き
  3. JavaScript: 動的な処理や動きの追加/上書き

サイトの見た目をちゃんと作り込む場合には 1 つめの「テンプレートファイル」の改変が必要になってきます。 ただこちらにはちょっとだけ PHP が入ってきて馴染みの薄い方には少しハードルが高くなってしまうため今回は扱わないことにします。 今回は比較的シンプルな CSS や JavaScript の追加の方にまずはトライしてみましょう。

CSS

テーマの CSS ファイルは .info ファイルに記述することで追加することができます。 以下の行を mytheme.info ファイルに追加しましょう。

stylesheets[all][] = mystyle.css

続いて、 mytheme.info ファイルと同じ場所に mystyle.css という名前の CSS ファイルを作成します。 中には試しに以下のコードを入れてみてください。

html, body {
  background-color: #eee;
}
.section {
  padding: 10px;
}
#page-wrapper {
  margin: 0 auto;
  width: 760px;
}
#header {
  background-color: #ddd;
}
#main {
  overflow: hidden;
}
#content {
  float: left;
  width: 70%;
}
.sidebar {
  background-color: #ddd;
  float: right;
  width: 26%;
  padding: 0 2%;
}

これで CSS の追加は完了！です。

あとは Drupal のキャッシュをクリアすれば mystyle.css ファイルが読み込まれるようになるはずです。 Drupal のキャッシュをクリアするには管理画面の「環境設定」「開発」（ /admin/config/development/performance ）のページを開き「すべてのキャッシュをクリアー」をクリックすれば OK です。

Drupal スタイルが効いたページ

いかがでしょうか？ ページにスタイルが効くようになったでしょうか。

ここまでの流れが問題なく進んでいる場合は Drupal サイトが次のような見た目になっているはずです。 手作り感はありますが、ひとまずスタイルが変更できるようになりました！

試しに、オリジナルのスタイルをいくつか作ってサイトに反映させてみてください。 どんなセレクタが使えるかは、この段階では実際のページを見ながら Chrome などの Inspector などを使って調べていくのが手っ取り早いのでおすすめです（もっと進んでこれば実際のコードを見るのが早いです）。

スタイルシートを変更したのにサイトに反映されないという場合には Drupal のキャッシュをクリアしてみましょう。 それでも解決しない場合は以下のことを確認してみてください。

  • .info ファイルに追加した行は間違っていないか
  • スタイルシートのファイル名や場所は間違っていないか
  • スタイルシートはちゃんと保存したか
  • 利用しているテーマは間違っていないか

スタイルの追加については以上です。 実際のプロジェクトではひとつのスタイルシートで済ませるケースはあまりありませんが、ひとまず CSS の追加の流れを知るという意味ではこれで十分かと思います。

続いて JavaScript を試してみましょう。

JavaScript

JavaScript の場合も CSS と同様の考え方で追加することができます。

CSS の場合と同じように以下の行を mytheme.info ファイルに追加してください。

scripts[] = myscript.js

続いて mytheme.info ファイルと同じ場所に myscript.js というファイル名で JavaScript ファイルを作成します。 中には試しに以下の内容を書き込んでみてください。

console.log('これは私の秘密のスクリプトです。');

Drupal のキャッシュをクリアすれば、次のページリクエストからこのスクリプトが読み込まれるようになります。 ブラウザのコンソールに以下のようなメッセージが表示されるようになれば成功です（エラーメッセージはロゴ画像の読み込みエラーです。今回は無視してください）。

Drupal テーマの JavaScript からのメッセージ

これで JavaScript を追加するという部分は成功です。 これだとちょっとおもしろみがないので、試しにページをふんわり表示するエフェクトを追加してみましょう。 以下の行を myscript.js に追加してください。

jQuery(function () {
  jQuery('body').css('opacity', '0').animate({'opacity': '1'});
});

問題なくコードが追加できたときには、ページをリロードしたときにページがふんわり表示されるようになっているはずです。

Drupal 7 には jQuery 1.4.3 が同梱されているため、別段準備をすることなくすぐに jQuery を利用しはじめることができます。

スクリプトがうまく読み込まれない場合には次のことを確認してみてください。

  • .info ファイルに追加した行は間違っていないか
  • スクリプトのファイル名や場所は間違っていないか
  • スクリプトはちゃんと保存したか
  • 利用しているテーマは間違っていないか

JavaScript の追加については以上です。 JavaScript の追加については別の記事でもご紹介していますので、興味のある方はご覧になってみてください。

今回はひとまず JavaScript を追加するということでこのような形のコードを利用しましたが、実際のプロジェクトでは押さえるべきこと、守るべきお作法がたくさんあります。 たとえば JavaScript / jQuery 周りのコーディングスタンダードはなるべく早い段階で押さえておくとよいでしょう。

このあたりについては英語で検索していただくとドキュメントが豊富に見つかるので、次のステップに進まれたい方は検索してそれらの記事を参照してみてください。

以上です。

今回は「 Drupal 7 カスタムテーマ作成入門」ということで Drupal 7 の基本的なテーマの作成方法についてご紹介しました。 まずは最小限のテーマの作り方から入り、 CSS と JavaScript の追加を試みてみました。

今回ご紹介した範囲は最初の一歩で、まだこれだけでは実際のプロジェクトでテーマ作成をするところまでには至りません。 でも、ある意味この最初の部分がいちばん大変かと思いますので、テーマ開発に興味のある方はぜひご参考にしていただければと思います。

Drupal のテーマにはテンプレート、プリプロセス、フックシーム、継承などなど強力な仕組みがたくさん用意されており、奥が深くておもしろい部分がたくさんあります。 汎用性の高いおしゃれテーマができたときには公式サイト上から全世界に対して配布できる道も Drupal には開かれていますので、ぜひぜひテーマ開発をマスターしてすてきな Drupal サイトを作りましょう。

以下テーマ関連の記事です。こちらもご参考になるかと思いますので興味のある方はよろしければのぞいてみてください。

関連リンク
Drupalでテーマ作成に必須な.infoファイルについて
html.tpl.phpやpage.tpl.phpなど***.tpl.phpについて
Drupal 7 のテーマのインストール方法
Drupal サブテーマの作成 日本語訳
Drupal 7 の 4 つのコアテーマ
共に働く新しい仲間を
募集しています

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

採用情報を見る