Adaptive Themeの設定

1.設置

(1)ダウンロード

http://drupal.org/project/adaptivethemeからAdaptive Themeをダウンロードします。
今回はadaptive_theme7.x-2.3.tar.gzをダウンロードしました。
※このサイトでは当時の最新版であった7.x-2.3を使用しています。現在の最新版は7.x-3.2になります。
※Drupal7からはダウンロードマネージャが使用できますのでモジュール管理画面から新規モジュールのインストールでダウンロードファイルのURLを入力した方が便利です。
※ダウンロードマネージャを利用した場合は(2)の配置まで完了しています。
 

(2)配置

ダウンロードしたファイルをサーバ上の「【Drupalルートディレクトリ】/sites/all/themes」で解凍します。
これがスターターテーマの配置となります。

次にサブテーマを配置します。
※操作手順は「adaptivetheme/adaptivetheme_subtheme/Readme.txt」に記載されています。
 

①サブテーマの作成

「adaptivetheme/adaptivetheme_subtheme」を「【Drupalルートディレクトリ】/sites/all/themes」にコピーし、「adaptivetheme_subtheme」をユニークな名前に変更します。
ここでは「pegasus」にしました。(※これがテーマ名になります。以降はテーマ名をpegasusとして説明します。)

補足
作成する前にどんな感じかをすぐに確かめたいのであればFreeのサブテーマが用意されていますのでそちらを使用するかデモサイトで確認してください。

 

②「adaptivetheme_subtheme.info」ファイル名の変更と編集

サブテーマ名「pegasus」配下にある「adaptivetheme_subtheme.info」のファイル名を「pegasus.info」に変更します。
そして、そのファイルをエディタで開いて以下のように編集します。編集が終われば上書き保存でファイルを閉じます。

  name        = pegasus
  description = My custom subtheme for Adaptivetheme.

 

③「theme_settings.php」と「template.php」の編集

それぞれのファイルをテキストエディタで開いて「adaptivetheme_subtheme」の箇所を「pegasus」に置換します。
また、このついでに不要な機能やフォームがあればコメントにしてください。
編集が終われば上書き保存でファイルを閉じます。

以上でテーマの設置は完了です。 以下の図のような配置になっています。
サブテーマ

 

2.テーマの有効化と環境設定

(1)テーマの有効化

Drupalのテーマ管理画面(admin/appearance)で追加したテーマが利用可能になっていますので、それを有効にします。

サブテーマの有効化

次に環境設定にてテーマの設定を行ないます。
 

(2)環境設定

GUI操作でサイトの環境設定を行います。
Adaptive Themeではデバイスに応じてStandard Layout(デスクトップなど大画面用)、Tablet Layout(ipadなどのタブレットクラスの画面用)、SmartPhone Layout(iphone,Android,WIndows Phoneなど小型画面用)のレイアウトが用意されています。
それぞれ、デバイスの画面表示サイズに合わせて自動にレイアウトが変更されるようになっています。
たとえば、PCなどデスクトップでフル画面表示にしてからブラウザーのウィンドウ画面サイズを小さくしていけば、レイアウトの表示の変化が確認できます。
この機能は各レイアウト設定画面下の「Media query for this layout」に設定している数値で実現していますので、無闇に変更するとうまく表示できなくなるので留意してください。
レイアウトの選択


4番でカスタムスタイルシートを別途用意するのであれば以下の設定が必要です。
カスタムスタイルシート

設定が終われば「デフォルトに設定」ボタンをクリックすればサイトのテーマが変更されます。
※画面一番下に管理画面を設定する箇所がありますが、管理画面用のテーマはデフォルトのまま使用することをお勧めします。
※Adaptivetheme(コアテーマ)、Adaptivetheme_admin(Adminテーマ)、Adaptivetheme_subtheme(サブテーマ)は有効にする必要はありません。
 

3.GPanelsの設定(Optional)

GPanelsを利用するとpanelsモジュールと同じようなことが可能になります。
 

(1)GPanelsのサンプルコードのコピー

以下は、3col 50-25-25 Gpanelの例です。
 

<!-- Three column 50-25-25 Gpanel -->
<?php if ($page['three_50_25_25_first'] || $page['three_50_25_25_second'] || $page['three_50_25_25_third']): ?>
  <div class="three-50-25-25 gpanel clearfix">
    <?php print render($page['three_50_25_25_first']); ?>
    <?php print render($page['three_50_25_25_second']); ?>
    <?php print render($page['three_50_25_25_third']); ?>
  </div><?php endif; ?>

 

(2)page.tpl.phpの配置(※optional)

※テーマモジュールにpage.tpl.phpがない場合のみ作業してください。
※カスタムテーマにAdaptiveTheme SubThemeを利用している場合はこの作業が必要です。
「sites/all/themes/adaptivetheme/template」から「sites/all/themes/dragon」にpage.tpl.phpをコピーします。
※ページをカスタマイズするのであれば最低限page.tpl.phpが必要であるためコピーして利用しています。
その他のパーツもカスタマイズするのであればコピーして利用します。
 

(3)GPanelsのサンプルコードの挿入

コピーした「page.tpl.php」をテキストエディタで開いて先ほどコピーしたサンプルコードを適切な位置に挿入します。

以下は、3col 50-25-25を挿入する例です。
 

(4)GPanelsの有効化

「sites/all/themes/dragon/dragon.info」をテキストエディタで開いて、Gpanels Regionの該当する箇所のコメントを削除して有効にします。
※有効にするのは①でコピーしたのと同じ名称のものになります。

以下は、3col 50-25-25を有効にする例です。

  ; 3 col 50-25-25
  regions[three_50_25_25_first]  = 3col 50-25-25 Gpanel col 1
  regions[three_50_25_25_second] = 3col 50-25-25 Gpanel col 2
  regions[three_50_25_25_third]  = 3col 50-25-25 Gpanel col 3

以上でGpanelsの設定は完了です。
ブロック管理画面(admin/structure/block)を表示すると追加したGpanelsのリージョンが利用できるようになっているはずです。
 

 

4.カスタムスタイルシートの設定(Optional)

カスタマイズに使用するスタイルシートの準備をします。
 

(1)カスタムスタイルシートの有効化

「sites/all/themes/dragon/theme_settings.php」を開いて以下の赤字箇所を削除します。
 

function dragon_form_system_theme_settings_alter(&$form, &$form_state)  {

  // Style Schemes
  /* -- Delete this line if you want to use Style Schemes

  if (theme_get_setting('style_enable_schemes') == 'on') {
    $form['at']['style'] = array(
      '#type' => 'fieldset',
      '#title' => t('Style schemes'),
    );
    $form['at']['style']['style_schemes'] = array(
      '#type' => 'select',
      '#title' => t('Styles'),
      '#default_value' => theme_get_setting('style_schemes'),
      '#options' => array(
        'none' => t('None'),
        'style-default.css' => t('Default Style'),
        ;'my-style.css' => t('My Style'), // Add your schemes, these MUST be placed in your subthemes /schemes directory!
      ),
    );
    $form['at']['style']['style_enable_schemes'] = array(
      '#type' => 'hidden',
      '#value' => theme_get_setting('style_enable_schemes'),
    );
  }

  // */
}

 

(2)カスタムスタイルシートの作成

「sites/all/themes/dragon/css/schemes/my-style.css」を作成します。


以上でAdaptive Themeの導入は完了です。
あとは、スタイルシートを編集したり、テンプレートを編集したりしてカスタマイズしていってください。
 

Drupalバージョン

Drupal 7.x テーマ

モジュール

Adapitive Theme