Umi Blog

ウミブログ

Drupal 7 のテーマのインストール方法

Studio Umi

本日は Drupal 7 において「テーマ」をインストールする方法をご紹介できればと思います。

緑の Druplicon

具体的なインストール方法のお話に入るその前に、まずは「 Drupal のテーマとは何ぞや」というところについて少しご説明します。

Drupal の「テーマ」とは

Drupal において「テーマ」とは、ページの基本となるレイアウトや画像、色、フォントなどの見た目の部分を担う部分のことです。

WordPress その他の CMS でも「テーマ」「テンプレート」と呼ばれるものがありますが、それに相当するものを Drupal でも「テーマ」と読んでいます。 テーマは管理画面から変更することが可能で、コンテンツや機能はそのままにテーマだけをごっそり変更するということができるようになっています。

ウェブの「ページ」においては HTML と CSS がそれぞれ「コンテンツ」と「見た目」を分担した形で担いますが、 Drupal ではそれよりもうひとつ上の「サイト」という枠組みで「コンテンツ」と「見た目」(そして「機能」)の分割を可能にしてくれます。

ちなみに Drupal の場合はコンテンツ、見た目、機能のそれぞれを担う部分に次のような名前がついています。

  • コンテンツ: ノード/エンティティ
  • 見た目: テーマ
  • 機能: モジュール

Drupal の「テーマ」の種類

そんな Drupal のテーマですが、大きく分けると次の 3 種類に分けることができます。

  1. コアテーマ
  2. コントリビュートテーマ
  3. オリジナル(カスタム)テーマ

1 の「コアテーマ」というのは、その名前のとおり Drupal のコア(本体)に同梱されている組み込みのテーマのことです。 Drupal 7 の場合はデフォルトで 4 つのコアテーマ―― - Bartik (bartik) 、 Seven (seven) 、 Garland (garland) 、 Stark (stark) が用意されています。 こちらのコアテーマは特に追加のファイルをダウンロードすることなく Drupal を入れればすぐにでも使いはじめることができます。

2 の「コントリビュートテーマ」というのは、世界の Drupal コミュニティによって開発・配布されているテーマのことです。 「コントリビュートテーマ」という言い方はあまりされませんが、コアに同梱されているものやオリジナルで作成するものと区別する意味では、モジュールと同じく「コントリビュート」ということばを使うのがふさわしいでしょう。

3 の「オリジナル(カスタム)テーマ」というのは、制作会社の開発者が個別に制作した個別のテーマのことです。 ホームページ制作会社が「 Drupal のテーマ制作やりますよー」と言っている場合にはほぼほぼこの「オリジナルテーマ」のことを指すと考えてよいかと思います。

テーマのこのあたりの考え方は「モジュール」の場合と同じです。

ではここから本題のテーマのインストール方法に入っていきましょう。

テーマのインストール方法

1. コアテーマ

まずはコアテーマの場合から見ていきます。

まず、セットアップした Drupal サイトにアクセスし管理者としてログインします。

Drupal サイトに管理者としてログインした画面

管理画面のメニューから「テーマ」(日本語化していない場合は「 themes 」)を選択し、テーマ管理のページを開きます。

管理画面のメニューからテーマを選ぶ操作

テーマページでは、上側に「有効なテーマ」、下側に「無効なテーマ」が一覧で表示されています。

有効なテーマと無効なテーマが並ぶテーマ管理ページ

無効なテーマの中からひとつを選んで「有効にしデフォルトに設定する」をクリックしましょう。 デフォルトでは Seven という名前のテーマが無効なテーマの一覧に含まれているはずです。 これをクリックしてみます。

無効なテーマの一覧に Seven テーマが含まれている状態

すると、「テーマ XX が有効になりました。」というメッセージが表示され、選択したテーマが有効かつデフォルトになります。

テーマが有効になったことを知らせるメッセージ

これでコアテーマのインストール(有効化)は完了です。 ファイルなどを触る必要なく管理画面からすべてできるため、かんたんですね。

コアテーマの有効化が完了したテーマ管理ページ

ちなみに、各テーマには「環境設定」のページが設けられており、どのリージョン(エリア)を表示するのか、ロゴはどうするのか、といったことを選べるようになっています。 テーマによってはサイトに使用しているさまざまな色を変更できるものなんかもあります。 デフォルトの Bartik がよい例です。

コアテーマの場合にはまずそんなことはありませんが、テーマをデフォルトに設定した直後にページ表示がおかしくなったりページが真っ白になったりする場合はテーマファイルが壊れている可能性があります。 画面が正しく表示されないと管理画面から締め出されてしまうこともあります。 そういう場合の対処法についてはまた別の機会にご紹介できればと思います。

2. コントリビュートテーマ

つづいてコントリビュートテーマ、 Drupal.org で配布されているテーマの場合を見ていきましょう。

基本的には 1 のコアテーマと手順は同じですが、コントリビュートのテーマの場合はその前にもうひとステップあります。 「テーマファイル一式をダウンロードして所定の場所に設置する」という作業が必要です。

Drupal.org のテーマ一覧ページに行って、どれかひとつ気に入ったテーマを選んでみましょう。

今回は最もポピュラーな Zen テーマを例に見ていきます。

Drupal.org の Zen テーマのプロジェクトページ

Zen テーマのページを開いたら、ダウンロードリンクのところまでスクロールして使っている Drupal のバージョンに合った最新の安定版の zip ファイルをクリックします。

今回は Drupal 7 の場合のご紹介なので、クリックすべきは Recommended releases と書かれているエリアの 7.x-x.x の横にある zip (...) というリンクです。

Recommended releases の zip ダウンロードリンクを示した図

zip ファイルがダウンロードされてきますので、これを展開(解凍)してディレクトリまるごと Drupal のテーマディレクトリの中に入れましょう。

Drupal 7 の場合のテーマディレクトリは (Drupal プロジェクトのルート)/sites/all/themes です。 (Drupal プロジェクトのルート)/themes にもそれらしき名前のものがありますが、こちらはコアテーマのためのディレクトリです。 Drupal のコアで管理されているところなのでこちらには絶対に入れないようにしましょう。

Zen テーマのファイルを上記の場所にインストールすると次のようになるはずです。

sites/all/themes に Zen テーマを配置したディレクトリ構成

これでファイルの設置が完了したので、 Drupal が自動的にテーマを認識し管理画面上から管理できるようにしてくれます。 ですので、あとはコアテーマと同じ要領で有効化するだけで OK です。

配置したコントリビュートテーマがテーマ一覧に現れた状態

以上でコントリビュートテーマのインストール(有効化)は完了です。

ちなみに、すでに Drush が入っている環境であればコントリビュートテーマのダウンロードとインストール、有効化は次のコマンド 3 行で行うことができます。

$ drush dl zen  # Zen テーマをダウンロード
$ drush en zen  # Zen テーマを有効化
$ drush vset theme_default zen  # Zen テーマをデフォルトに設定

Drush に興味があってまだ入れていない方は次の記事などがご参考になるかと思います。

3. オリジナル(カスタム)テーマ

最後にオリジナルテーマの場合を見てみましょう。

オリジナルテーマの場合も、基本的な流れはコアモジュール、コントリビュートモジュールと同じです。

ただし、オリジナルテーマの場合はコントリビュートモジュールの場合にダウンロードしたファイル一式を自分で作成する形になります。

Drupal のテーマには強力な「サブテーマ」「テーマの継承」というシステムがあるので、今回はそれにのっかった形で最もシンプルな形のテーマを作成してみましょう。 今回作るのは Umi (umi) という名前のモジュールです。

Drupal のオリジナルテーマに最小限必要なものは次の 2 つです。

  1. テーマファイルを格納するディレクトリ
  2. テーマのメタ情報を表す .info ファイル

以下実際にこれを作っていきます。 まずは Drupal のテーマディレクトリ( (Drupal プロジェクトのルート)/sites/all/themes )の中に umi というディレクトリを作成しましょう。 これがそのままひとつのテーマを表すディレクトリになります。

sites/all/themes に umi ディレクトリを作成した構成

つづいて作成した umi ディレクトリの中に umi.info という次の内容のテキストファイルを作りましょう。

自作テーマの umi.info ファイルの内容
name = Studio Umi theme.
description = This is a theme of Studio Umi, sub-theme of theme Seven.
core = 7.x
base theme = seven

この内容が意味するところについては別記事で解説しているので興味のある方はそちらをご覧になってみてください。

以上でオリジナルの Drupal テーマができました。

今回はコアの Seven というテーマを継承する形で作っています。 Drupal の強力なサブテーマシステムのおかげで、これだけでテーマができあがってしまいます。 実際にテーマを作成するときにはもちろんこれだけでは不十分ですが、テーマ作成の最初の一歩はこんなにかんたんなんだなぁということを思っていただけたら幸いです。 サブテーマの作成のルールについては次の記事がご参考になるかもしれません。

これで Drupal にテーマが認識されるようになったので、あとはコアテーマの場合と同じ要領で管理画面からテーマを有効化します。 管理画面のテーマのページを開くと Studio Umi というテーマが新しく追加されているので、これを「有効にしデフォルトに設定する」とすると、このテーマがサイトに反映されます。

自作テーマ Studio Umi がテーマ一覧に追加された状態

以上です。

終わりに

いかがだったでしょうか? 今回は Drupal 7 においてテーマをインストール(有効化しサイトに反映)する方法をご紹介しました。

Drupal のテーマには大きく分けて「コア」「コントリビュート」「オリジナル(カスタム)」の 3 つがありました。

コアテーマは Drupal コアに同梱されているため、特に追加のファイルを用意する必要なく管理画面上の操作だけで利用することができます。 コントリビュートテーマは Drupal.org のテーマ一覧のページから zip をダウンロードしてきて Drupal プロジェクトの所定のテーマディレクトリに展開する形で利用することができます。テーマディレクトリに正しくテーマファイルを置いたら、あとは管理画面からの操作だけで OK です。 カスタムテーマもファイルをダウンロードするか自分で作成するかのちがいはあるものの、基本はコントリビュートのテーマと同じ流れで利用、インストールすることができます。

最初は少しわかりづらいところがあるかもしれませんが、一度慣れたら後はサクサク使うことができる便利な仕組みになっているので、興味のある方はぜひご自身の環境でも試してみてください。

最後に少し宣伝を。

スタジオ・ウミでは Drupal のテーマ制作・開発のお仕事をお受けしています。 デザインが一切ないゼロの状態からのデザイン制作も、デザインがある状態からの Drupal テーマコーディングだけでもお受けすることが可能です。 「サイトの見た目にも SEO にも Drupal の機能にもこだわりたい!」、そんな方のお力になることができます。 Drupal でご検討中の方はぜひお気軽にお声がけいただければと思います。

\

小さなご意見も、私たちにとっては大きなヒントです!

ぜひ率直なご感想をお寄せください

/

この記事はお役に立ちましたか?

スタジオ・ウミのメンバー

Masters of Drupal Engineering.

人に、技術に、品質に、まっすぐ。

Download
会社案内をダウンロード
Contact
お気軽にお問い合わせください
Recruit
スタジオ・ウミの採用情報