梅雨が空けたのにもかかわらず土砂降りの雨が降っていて家でごろごろするには最適な天気ですねー！

こんにちは。プログラマーの山中です。

今回は Zen をベーステーマとしたサブテーマのセットアップ方法(=新規作成方法)を紹介します。

サブテーマを作成する、と聞くとセットアップの時点で面倒な気がしますよね。 でも大丈夫！Zenなら手動でも比較的簡単にサブテーマをセットアップすることができるんです。 Drushを使用すればたった3行のコードでサブテーマのセットアップを行うことができますよ。

まずはじめに

まず最初にさらっと サブテーマ と Zen について説明し、 その後に手動でのセットアップ方法と Drush でのセットアップ方法を記述します。

なお、この記事では 2015年7月時点 で最新バージョンの 7.x-5.5 を元に執筆しています。 バージョンが変わるとサブテーマのセットアップ方法が変わることもありますので、もしこの記事の内容を実践される場合は使用されている Zen のバージョンを確かめてくださいね 。

サブテーマとは？

Drupal には 「 テーマの継承 」というシステムがあります。 継承、という単語の通り 基礎となるテーマ(=ベーステーマ) の機能などを引き継いだテーマが サブテーマ と呼ばれます。

サブテーマ作成ドキュメントの日本語翻訳記事もございますので サブテーマについてより理解を深めたい方はこちらをご覧ください。

Zen テーマとは？

HTML5、レスポンシブデザイン、モバイルファースト、Sass / Compass、RTL(昔の日本語のように右から左へ記述すること)言語のサポート、 Zen Grid、 パンくずリスト...などに対応したベーステーマです。

ドキュメントも豊富に用意されていて、コントリビュートされているテーマの中では世界中で最も使用されているテーマのひとつです。 このテーマはベーステーマとして利用されることを想定しているため、Drupal サイト上でデフォルトのテーマに設定するとほぼ真っ白なページが表示されます。

参考リンク (英語)

Zen のサブテーマのセットアップを行う

公式の英語のドキュメントはこちらからご確認いただけます。

セットアップを行う前に準備しておくもの

まず、以下の2つの項目をあらかじめ準備しておきましょう。

  1. Zen テーマはあらかじめダウンロードしておくこと
  2. サブテーマの名前を決めておくこと

準備 1. Zen テーマはあらかじめダウンロードしておく

Zen テーマは以下のテーマディレクトリにダウンロードしておいてください。

sites/all/themes/

パス構造は sites/all/themes/zen

Drush が使える環境で Drupal がすでにインストールされている状態であれば、以下のコマンド1行で自動的に適切なディレクトリ内に Zen をダウンロードすることができます。

$ drush dl zen

上記コマンドを実行してもうまく動いていないようであれば、Drupalはインストール済かどうか、コマンドを実行しているディレクトリが Drupal のディレクトリ内かどうかを確認してください。

準備 2. サブテーマの名前を決めておく

テーマの名前については 人間にとってわかりやすい名前 と 半角英数字(小文字限定)とアンダースコア( _ )で作った名前 の2通りを考えておきます。 半角英数字(小文字限定)とアンダースコア( _ )で作った名前はいわゆる システム内部名称 と考えていただければ良いかと思います。

この記事では便宜上 「人間にとってわかりやすい名前」 を 「テーマ名」、「半角英数字(小文字限定)とアンダースコア( _ )で作った名前」 を 「機械名」 としておきます。

この記事では以下のように設定して説明を進めています。

  • テーマ名: 抹茶
  • 機械名: matcha_theme

それでは手動で Zen のサブテーマのセットアップを行う場合からご紹介します。

手動で Zen のサブテーマのセットアップを行う場合

英語のドキュメントはこちらから

How to build a sub-theme (Zen 7.x-5.x) - Manually | Drupal.org

1． 新しいサブテーマの場所を作成

ダウンロードした Zen テーマディレクトリ内にある STARTERKIT をコピーして 一つ上の themes ディレクトリにペーストします。

/sites/all/themes/zen/STARTERKIT
↓
/sites/all/themes/STARTERKIT

STARTERKIT をコピーして貼り付け

2. コピーしたディレクトリの名前を変える

コピーしたディレクトリの名前を 機械名 に変更します。

/sites/all/themes/STARTERKIT
↓
/sites/all/themes/matcha_theme

ディレクトリの名前を機械名に変更

3. サブテーマディレクトリの 「STARTERKIT.info.txt」 のファイル名を変更する

サブテーマディレクトリの 「 STARTERKIT.info.txt 」 を 「 機械名.info 」に変更します。

この記事の場合だと 「 matcha_theme.info 」ですね。

infoファイルの名前を変更

4. .infoファイルを編集する

3． の工程でファイル名を変更した.infoファイルを編集します。name と description を変更します。 name には テーマ名 を設定してください。

screenshot  = screenshot.png
name        = Zen Sub-theme Starter Kit
description = Read the <a href="https://drupal.org/node/873778">online docs</a> or the included README.txt on how to create a theme with Zen.

↓

screenshot  = screenshot.png
name        = 抹茶
description = 抹茶のサイトのテーマです。

5. 読み込むCSSファイルを設定する (固定幅デザインのみ)

もし固定幅のデザインが良いのであれば style.css あるいは style.scss を少し編集する必要があります。 レスポンシブデザインが良いのであればこの 5. の工程は飛ばしてください。

Sassを使わない、あるいはSassがよくわからない場合は css/styles.css を、 Sassを使用しているのであれば scss/styles.scss を それぞれテキストエディタで開き、以下の該当する箇所を変更します。

cssの場合

変更前

@import "layouts/responsive.css";

↓

変更後

@import "layouts/fixed.css";
sassの場合

変更前

@import "layouts/responsive";

↓

変更後

@import "layouts/fixed";

6. PHPの関数名を適切な名前に変更する

もしサブテーマ内の 「 template.php 」や「 theme-settings.php 」の中の関数を使用する場合は 「 STARTERKIT 」と記述されている箇所を 機械名 に変更する必要があります。 例えば以下のようにします。

theme-settings.php (変更前)

/**
 * Implements hook_form_system_theme_settings_alter().
 */
function STARTERKIT_form_system_theme_settings_alter(&$form, &$form_state, $form_id = NULL)  {

  /* -- Delete this line if you want to use this setting
  $form['STARTERKIT_example'] = array(
    '#type'          => 'checkbox',
    '#title'         => t('STARTERKIT sample setting'),
    '#default_value' => theme_get_setting('STARTERKIT_example'),
    '#description'   => t("This option doesn't do anything; it's just an example."),
  );
  // */
}

theme-settings.php (変更後)

/**
 * Implements hook_form_system_theme_settings_alter().
 */
function macha_theme_form_system_theme_settings_alter(&$form, &$form_state, $form_id = NULL)  {

  /* -- Delete this line if you want to use this setting
  $form['macha_theme_example'] = array(
    '#type'          => 'checkbox',
    '#title'         => t('macha_theme sample setting'),
    '#default_value' => theme_get_setting('macha_theme_example'),
    '#description'   => t("This option doesn't do anything; it's just an example."),
  );
  // */
}

これでサブテーマのセットアップが完了しました。

7. サブテーマを有効化させる

最後にセットアップが完了したサブテーマを有効化・デフォルトのテーマに設定して実際に動くかどうか確かめてみましょう。

Drush で Zen のサブテーマのセットアップを行う場合

英語のドキュメントはこちらから

How to build a sub-theme (Zen 7.x-5.x) - Automated using Drush | Drupal.org

まずはzenテーマを有効化し、drush のキャッシュをクリアします。

$ drush -y en zen
$ drush cc drush

次に drush zen "テーマ名" 機械名 とコマンドを打ってください。 このコマンドには description を設定するオプションもあります。 description を設定するなら次のようにコマンドを入力します。 drush zen "テーマ名" 機械名 --description="テーマの説明"

この記事の設定で dscription も設定するとコマンドは以下のようになります。

$ drush zen "抹茶" matcha_theme --description="抹茶のサイトのテーマです。"

問題がなければ Starter kit for "抹茶" created in: /DRUPAL_SITE_ROOT/sites/all/themes/matcha_theme のようなメッセージが表示されます。このメッセージが表示されたらセットアップ完了です。

なんと、たったの3行のコマンドで Zen のサブテーマのセットアップが完了するんですね！(∩´∀`)∩ﾜｰｲ

あとは以下の2行のコマンドを入力すれば、今作成したサブテーマが有効化され、デフォルトのテーマとして設定されます。

$ drush en matcha_theme
$ drush vset theme_default matcha_theme

いかがでしたでしょうか？ Zen のサブテーマのセットアップを行う方法を紹介いたしました。

ベーステーマがある状態でテーマ開発を行うと 1からテーマ開発をするよりも開発コストが抑えられ、楽ができたり効率よく開発できたりしますのでサブテーマ作ったことが無い方はぜひこれを機にサブテーマを作ってみてください。

関連リンク
Zen | Drupal.org
Create a Zen Subtheme | Drupal.org
How to build a sub-theme (Zen 7.x-5.x) - Manually | Drupal.org
How to build a sub-theme (Zen 7.x-5.x) - Automated using Drush | Drupal.org
共に働く新しい仲間を
募集しています

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

採用情報を見る