AdaptiveThemeにはGpanelsというものが含まれています。Gpanelsは元々、AdaptiveThemeの作者のJeff Burnzさんが提供されている別のスターターテーマ、Genesisに含まれていたものなので、Gpanelsという名称なのかなと想像していますが、詳しいことはわかりません。それはともかく、Gpanelsとはその名のとおり、50%x2の2コラムや33%x3の3コラムなど、既にCSSでスタイルされたパネルレイアウト(Drupal的に言えばリージョン)を追加するためのものです。テーマ作成者は提供されたGpanelsのスニペットをコピーしてpage.tpl.phpなどのパネルを表示したい部分に挿入し、.infoファイルでGpanelsを有効化するだけでコラム表示のためのリージョンを追加することができてしまいます。この記事を書いている2010年5月24日現在のCocoaSpaceのサイトでも33%x3のGpanelsを若干CSSを変更して利用させてもらっています。
上記のとおり、Gpanelsの設定は簡単なのですが、ドキュメントが英語のためイマイチわかり難いという方もいらっしゃるかもしれません。ですので、本投稿ではCocoaSpaceの実体験を基に、Gpanelsの使い方を簡単にご紹介したいと思います。Gpanelsを利用すれば、CSSにあまり詳しくない方でもパネル表示を簡単に実現できます。また、シンプルなパネル表示のためにPanelsモジュールをインストールしたくないという方にもオススメです。現在CocoaSpaceで使用しているAdaptiveTheme 6.x-2.2を基に書いていきます。
1. スニペットのコピー&ペースト
使用したいスニペットを選択、コピー
まずは必要なGpanelsのスニペットを決定します。AdaptiveThemeのパッケージのadaptivetheme/adaptivetheme/gpanelsディレクトリに9種類のファイルがあります。ファイル名がそのままGpanelsのコラムレイアウトを表しています。例えば、3col-3x33.phpというファイルを開くと、3コラムの3x33%幅のパネルのためのスニペットがあります。ファイルをテキストエディタで開いて以下の部分をコピーします。
<!--// Three column 3x33 Gpanel //-->
<?php if ($three_col_3x33_first or $three_col_3x33_second or $three_col_3x33_third): ?>
<div class="three-col-3x33 gpanel clearfix">
<div class="section region col-1 first"><div class="inner">
<?php if ($three_col_3x33_first): print $three_col_3x33_first; endif; ?>
</div></div>
<div class="section region col-2"><div class="inner">
<?php if ($three_col_3x33_second): print $three_col_3x33_second; endif; ?>
</div></div>
<div class="section region col-3 last"><div class="inner">
<?php if ($three_col_3x33_third): print $three_col_3x33_third; endif; ?>
</div></div>
</div>
<?php endif; ?>
<!--/end Gpanel-->
page.tpl.phpにペースト
たった今コピーしたスニペットをpage.tpl.phpのパネルを表示したい部分に挿入します。もしも、ご使用のサブテーマにpage.tpl.phpファイルがない場合には、AdaptiveThemeのパッケージのadaptivetheme/adaptivetheme/templateディレクトリからpage.tpl.phpファイルをコピーして、サブテーマディレクトリ名/template/page.tpl.phpに配置してください。
CocoaSpaceのようにコンテンツの下にGpanelsを表示したい場合には
<?php if ($content_bottom): ?>
<div id="content-bottom"><?php print $content_bottom; ?></div> <!-- /content-bottom -->
<?php endif; ?>
の直前、または直後あたりにスニペットを挿入すると良いでしょう。
2. .infoファイルを編集してGpanelsを有効化
CSSを有効化
.infoファイルを開いて、Gpanels用に用意されたCSSファイルを読み込むようにします。テーマの幅を960pxの固定幅にしている場合には、
;stylesheets[all][] = css/core/gpanels-960-fixed.css
の『;』を外して有効化し、テーマがそれ以外の幅に設定されている場合には、
;stylesheets[all][] = css/core/gpanels-fluid.css
の『;』を外して有効化するようです。CocoaSpaceでは960px幅でもstylesheets[all][] = css/core/gpanels-fluid.cssのほうを読み込むように設定し、サブテーマのtheme.cssでオーバーライドして、細かい調整をするようにしています。
リージョンを有効化
.infoファイルを開いて、regionsの前についている『;』を外して有効化します。33%x3の3コラムレイアウトを使用したい場合は、以下のようにリージョンを有効化します。
; 3 col 3x33 Gpanel
regions[three_col_3x33_first] = 3col 3x33 Gpanel col 1
regions[three_col_3x33_second] = 3col 3x33 Gpanel col 2
regions[three_col_3x33_third] = 3col 3x33 Gpanel col 3
ここまで終えたら、example.com/admin/settings/performanceでキャッシュをクリアして、これまでの設定の変更が反映されるようにしてください。
3. ブロックに表示
ここまできたら後は、example.com/admin/build/blockで新しく追加されたGpanelsのリージョンに最新記事のブロック表示など、好きなブロックを表示させるようにするだけです。ちゃんと表示されるようになったでしょうか？
4. CSSの細かい調整
GpanelsのデフォルトのCSSでは思い通りのレイアウトにならない場合は、ご使用のサブテーマのtheme.cssでスタイルをオーバーライドします。どのCSSクラスのスタイルすればよいかは、FirefoxのアドオンのFirebugを使用するとすぐにわかると思います。
33%x3の3コラムのGpanelsは、Internet Explorerで表示が乱れてしまうかもしれません。デフォルトのCSSスタイルでは右側のコラムが幅に収まらなくなり、下の行に回り込んでしまったように記憶しています。
AdaptiveThemeの作者のウェブサイトで解決法が公開されていますので、CocoaSpaceではその方法を採用しています。
5. その他、参考になる情報
念のため、その他いくつかの英語ドキュメントへのリンクもリストしておきますので、英語でも大丈夫な方は参考にしてください。
- Gpanels | drupal.org： drupal.orgでのドキュメンテーション(英語)
- Gpanels & Adaptivetheme: Create a 2 column section for blocks on Vimeo： 英語ですが、この記事でご紹介したような内容を説明するスクリーンキャストです。テーマ作者のJeff Burnzさんによるものです。
コメントを追加