Drupal のテーマ (デザイン) をカスタマイズしたい。そういうとき、テーマ Zen はドキュメントが充実していて、
Zen is the ultimate starting theme for Drupal.
(Zen | drupal.org より)
これを元にテーマを作成するのがいいらしい。
以下、上記ドキュメントの中の「How to build your own sub-theme (6.x)」に従った作業記録。
STARTERKIT を元に新しいテーマ用のディレクトリを作成
予め sites/all/theme/ ディレクトリ に zen テーマを置く。「管理セクション › サイトの構築 > テーマ」を見ると、3 つのテーマが追加されたことがわかる。
ここから Zen Themer’s starter Kit を元にテーマをカスタマイズしていく (サブテーマ) 。 zen テーマのディレクトリ中にある zen/STARTERKIT を sites/all/theme/ 以下に名前を変えて置く。zen ディレクトリの外に置くのがポイント。ここでは `testzen’ と名付けた。この時点では、上記のテーマ一覧を見ても testzen というテーマは表示されない。
theme/testzen/ 以下にある STARTERKIT.info をディレクトリの名前と同じに変更。(theme/testzen/testzen.info)
.info の編集
testze.info を開き次のように一部内容を変更。
- STARTERKIT.css → testzen.css
- name = Zen Themer's Starter Kit" → name = testzen
- description = Read... → A Zen sub-theme
これで「管理セクション › サイトの構築 > テーマ」を見ると、testzen が表示されるようになる。
ただし、この時点で、testzen を有効にしても、サイドバーの部分がコンテンツの下に来てしまう。
.info ファイルについて詳しくは Structure of the .info file を参照。
layout.css
今回は、ウィンドウの幅に応じてコンテンツの幅が変化するようにしたいので、theme/zen/zen/layout-liquid.css を theme/testzen/ 以下にコピーし、ファイルの名称を layout.css に変更した。(固定幅にしたい場合は、 layout-fixed.css) これにより、先ほど下にあったサイドバーに相当する部分が左側に来るようになる。
プリント用の CSS である theme/zen/zen/print.css を theme/testzen/ 以下にコピー。testzen.info に print.css が書かれていることを確認する。
testzen.css
theme/zen/zen/zen.css を theme/testzen/ にコピーし、名前を testzen.css に変更。これは最初に testzen.info で変更したもの。
template.php, theme_setting.php
theme/testzen/template.php, theme_setting.php 内の `STARTERKIT’ を `testzen’ に置換した。
スタイルシートやテンプレートファイルを変更したいとき
- zen/ 以下にあるものをサブテーマのディレクトリに移動
- 「管理セクション > サイトの環境設定 > パフォーマンス」 の キャッシュデータのクリア
スタイルシートの場合は、.info ファイルに対象のファイルが指定されていることを確認。
ちなみに、キャッシュデータのクリアをしたら、Breadcrumb separator が文字化けしてしまった。「管理セクション > サイトの構築 > テーマ の 設定 > テーマ固有の設定 > Breadcrumb separator」 を ` > ‘ に変更した。
テーマが作成できたら
また、画面上部には以下のようなメッセージが表示された。
The theme registry has been rebuilt. Turn off this feature on production websites.
テーマの作成が終わったら、同ページにて、Theme development settings の `Rebuild theme registry on every page.’ のチェックをはず。
上記の文字化けの原因は、どうやら zen を解凍するときに、.info ファイルが SJIS として解凍されてしまったことによるみたいだった。エディタで UTF-8 にして開いたら文字化けが直った。(cf. サクラエディタで文字コードの変更) ただし、同じことをローカル環境 (Windows) で編集しているときは文字化けが起こらなかった。
0コメント:
コメントを投稿