AdaptiveThemeの更新

このサイトでは「AdaptiveTheme」を利用しています。

Adaptive Theme 7.x-2.xはサポート終了となり、Adaptive Theme 7.x-3.xへのアップデートが必要となりました。

新バージョン(3.x)のAdaptive Themeをインストールしてしまうと旧バージョン(2.x)が使えなくなるため、旧バージョンのサブテーマが動かなくなります。
これを回避するには、ローカルにDrupalを導入して開発環境を構築しておくのが理想です。

今回はこのまま行いました。
しかし、新バージョンで以前と同じようにできる保障はありません。
 

バックアップ

2.xのAdaptiveThmeフォルダーをリネームして、これをバックアップとしました。
 

標準のテーマをデフォルトに設定

作業中にアクセスを許可するのであれば、標準のテーマなど別のテーマをデフォルトに設定しておきます。
テンプレートやスタイルシートの設定などが初期状態のテーマでは、当然、表示されるページの見え方はことなってしまいます。
それを回避するのであれば、オフライン設定にして作業中はアクセスできないようにする方法もあります。
 

3.xのインストール

通常の方法でダウンロードとインストールを行いました。
drushを使うと便利です。
 

サブテーマの作成

2.xと同じ方法でサブテーマを作成します。

サブテーマフォルダの作成
Adaptive Themeフォルダーにある「at_subtheme」を「sites/all/theme」にコピーします。
コピー後は「sites/all/theme/at_subtheme」

次に「at_subtheme」を新しいサブテーマ名にリネームします。
ここでは「phoenix」として説明します。

リネーム後は「sites/all/theme/phoenix」になります。

サブテーマモジュールの修正
サブテーマフォルダー内でテーマ名に関連する箇所をすべて「adaptivetheme_subtheme」から「phoenix」へ変更します。

「adaptivetheme_subtheme.info」を「phoenix.info」へリネーム

次に以下の3つのファイルを編集して、「adaptivetheme_subtheme」の箇所をすべて「phoenix」に変更します。
※編集ソフトの置換機能で一括置換すると便利です。

  • phoenix.info
  • template.php
  • theme-settings.php


「phoenix.info」に関してはモジュール情報を記載する箇所がありますので、その個所は自由に編集してください。
管理画面に表示される名称に使用されます。
 

サブテーマの有効化とデフォルトに設定

作成したサブテーマを有効にし、デフォルトに設定します。
デフォルトに設定したので、これ以降は新しいサブテーマが使われサイトが表示されます。

テーマの管理


ここまでがドキュメントに記載があったりネットに記載があったりします。
これ以降は何をどうしたいかでいろいろ方法があるため、あまり情報はありません。
 

サブテーマの設定

Adaptive Themeはデバイスの画面サイズに合わせてレイアウトを自動で切り替えてくれるresponsiveテーマです。
Standard/Tabllet/smallTouchの3段階のレイアウト設定があって、それぞれ画面サイズで切り替わります。
またそれぞれどのようにカラムを配置するかを選択できます。
これらの設定をここでは行います。

Extensions項目をONにすると、拡張機能がアクティブにあります。
カスタムCSSファイルを利用したりなど可能になります。

※このカスタムCSSファイルでアイコンなどの画像を使用する場合は、カスタムCSSファイルのある場所からの相対パスで記述するかURIで記述することになります。
※カスタムCSSファイルが作成される場所は、「File Management」にある「Path to Generated Files」で設定した場所に作成されます。
※「Path to Generated Files」でカスタムの場所を自由に設定可能ですが、アクセス権がないと作成できません。

ここまでは一般的なAdaptive Theme 7.x-3.xの説明です。
これ以降の作業は、Adaptive Theme 7.x-3.xが関連することもあるし、CSSやHTML5などが関連してきたり、javascriptが関連してきたりで様々です。
結局、何をどうしたいのかで必要な情報も変わってくるため、どうすべきというのは1つの記事に記載できる量でもありません。
仮に膨大な量の記事が記載してあってもそれは1例でしかすぎません。
アイデアは無限です。

そういう類の話になるのがこれ以降の作業です。
 

サイトのデザイン詳細

同じテーマを使用していても各サイト見た目はまるっきり異なります。
ここからの作業は個性が出る部分になります。
自分自身がどうしたいかを考え決めなければならない作業です。
それゆえに、手間であり面倒であり、そういったものは、ビジネスになる部分です。

ケースバイケースなので、ここでは、基本的な内容だけ触れておきます。

新しいサブテーマになるとこれまで使用していたテーマに追加設定していた項目は消えています。
たとえば、「template.php」や「theme-settings.php」の内容はリセットされています。
また、CSSフォルダーやtemplatesフォルダも同じです。

最初から新しいレイアウトデザインで作成するか、以前と同じレイアウトデザインになるように修正していくことになります。

※テーマごとにRegionが異なります。マイナーバージョンアップであれば変わることはないと思いますが、今回のようなメジャーバージョンアップや全くことなるテーマを使用している場合では異なるのが当たり前だと思ってください。
Regionがことなれば、たとえばブロックの設定画面で表示される名称がことなりますし、それが実際にどの位置に配置されるかも異なります。

今回はRegionが変わっているのと各テンプレート内のhtmlタグの構造がことなっているようなので、コアのtemplateフォルダーから編集する可能性のあるテンプレートのみコピーし、カスタム作成したテンプレートは以前のサブテーマからコピーしました。
※カスタムテンプレートは使えればそのまま使い。だめそうなら新規作成しようと思っています。

通常は、page.tpl.phpやnode.tpl.phpがあればよいと思います。
これらを以前のサブテーマと同じようになるように編集していきました。

※ティザー用テンプレート(node--teaser.tpl.php)を使用していますが、デフォルトではこのテンプレートを読み込んでくれません。
そのため、「template.php」にティザー用テンプレート(node--teaser.tpl.php)を読み込むように記述を追加します。

そのほか、拡張モジュールで必要なHookなどもこの「template.php」に記述が必要になる場合があります。
前のサブテーマの内容から使用しているもののみコピーしました。

CSSとpage.tpl.php、node.tpl.phpを編集してなんとか以前のような見た目にはなりました。

テーマの環境設定にある、「Debuggers」にある項目をONにするとRegionの表示などが可能になりますので、デバッグが楽になるかもしれません。
注意点はテーマをデフォルトにしているとサイトにアクセスした人にも同じように見えているということです。
デバッグ

しかし、現状、何点か不都合があります。
 

現状の不都合

  1. Xperia ZL2標準ブラウザーでウィンドウ幅が極めて小さく表示されてしまう。(画面横にするとOK、縦にするとウィンドウ幅が狭くなりすぎコンテンツが見えない)
  2. ChromeでカスタムCSSがロードされていないような動作である。(テンプレートは読み込まれてはいますが、CSSが読み込まれません)
  3. CSSスプライトという方法でメインメニューボタンを表示していたが安定して表示できない。

 

未対応の項目

  1. SyntaxHighlighterの動作およびpreタグの調整
  2. ブロック引用の対応(backquoteタグの調整)

1番は2.xのテーマでも途中から使用できなくなっており、今回の件は無関係であると思われます。
今後、Drupal8への移行も視野にいれていかないといけないので、新たにBootstrap3というテーマを入れた際、JQuery Updateを導入してしまった影響が考えられます。
現在、JQuery Updateはアンインストールしていますが、SyntaxHighlighter(使用しているモジュール名:SyntaxHighlighter insert)やWysiwyg FiledsはJQueryのバージョンの影響を受けるため、注意が必要です。

記事への画像挿入やコードの挿入を今後どうしていくのがベストなのかも課題です。

ローカル環境にテスト環境を作るのがよいのですが、できるときにやるという感じでやっていると、どこまでやったかわからなくなり・・・
さらにそれには、Hyper-V(仮想マシン)を稼働したほうがよいでしょうからまたかぁと思うと気が重いです。