テンプレートを編集してフロントページをカスタマイズ

Drupalデフォルトのフロントページは、"フロントページに掲載"と設定されたノードのティーザーを新着順に表示するものです。ブログアプリケーションでは一般的な表示ですが、多種多様なコンテンツタイプを作成・管理しているサイトには適していない気がします。フロントページはそのサイトで起こっていることが一目でわかるようなものにしたいものです(実際には難しいですが...)。具体的には以下のようにしたら、サイトの内容を把握できるインデックスページとしての役割を果たすようになると思いますが、いかがでしょうか？

達成したい項目

1. デフォルトのノードティーザーの表示を消去(冗長で一見して内容を把握しにくいため)
2. サイトの簡単な紹介文や挨拶文などを表示(CocoaSpaceではミッションなどを表示しています)
3. Viewsなどで、もっと簡潔で見やすい記事リストのブロック表示を作成
4. レイアウトに凝りたいなら、テーマに追加のリージョンを作成

フロントページをカスタマイズする方法いろいろ

テーマのテンプレートファイルを編集

CocoaSpaceが採用している方法です。

Panelsモジュールを使用

CocoaSpaceでは5.x-2.x系や正式リリース前の6.x-2.x系をに少しだけ試しただけです。そのためPanelsについて詳しいことはわかりませんが、テンプレートファイルを編集するのに慣れていなくて抵抗がある方はPanelsを試してみるといいと思います。もっとも、Panelsに慣れるまでに時間がかかるでしょうが...。

Panelsプロジェクトページ

Front Pageモジュールを使用

全く試してみたことがありませんのでわかりませんが、フロントページをカスタマイズするためのモジュールらしいです。

Front Pageプロジェクトページ

Drupalの管理画面からデフォルトのフロントページを設定

ページノードなどでフロントページ用のノードを作成し、管理セクションのサイト情報編集ページ(DRUPAL_URL/admin/settings/site-information)でデフォルトのフロントページに設定する方法です。

他にもフロントページをカスタマイズする方法があるでしょうが、この投稿ではCocoaSpaceで採用している、テーマのテンプレートファイルを編集する方法について方法をご提案したいと思います。もっと良い方法を見つけましたら、追記または訂正していきたいと思います。

テンプレートの編集方法

1. ノードティーザーの表示を消去

フロントページでノードティーザーを出力するのは、テーマのpage.tpl.phpファイルの$contentという変数です。この変数はフロントページ以外でもメインのコンテンツを出力するのに必要なので削除せずに、フロントページにおいてだけは何も表示しないようにします。 Drupal 6では(Drupal 5でもそうだったと思いますが...)page-front.tpl.phpという、フロントページだけに適用されるテンプレートを配置する方法もあります。しかし、ここでご紹介するような、共通のヘッダ、共通のフッタを使用し、メインのコンテンツの部分だけに少々の変更を加えたいような場合には、わざわざpage-front.tpl.phpファイルを作成するよりも、下のように条件を設定してコンテンツの変数の表示をコントロールするほうがオススメです。テンプレートの数が増えれば、それだけ管理が大変になります。フロントページと他のページのレイアウトが劇的に異なる場合にのみ、page-front.tpl.phpファイルを作成するのがよいでしょう。

テキストエディタでpage.tpl.phpを開き、

<?php print $content; ?>

という部分を

<?php if (!$is_front) { print $content; } ?>

に変更します。

ブラウザで新着順のノードティーザーが消えたか確認してみてください。

2. サイトの簡単な紹介文や挨拶文を表示

CocoaSpaceではミッションを表示しています。下の例ようなコードをpage.tpl.phpのミッションを表示させたい部分に挿入します。大抵のテーマではミッションが表示できるようになっていると思いますので、表示したい部分に移動したりするだけでよいかと思います。

<?php if ($mission): ?>
  <div id="mission"><?php print $mission; ?></div> <!-- /mission -->
<?php endif; ?>

その他、フロントページにだけ表示させたいものがある場合には、下のように、$is_frontを使用してフロントページにだけ表示されるようにします。CocoaSpaceではアイコンや各セクションへのリンクを貼ったボタンなどを表示しています。

<?php if ($is_front): ?>
  <div id="my-front-page">
    <p>This is my front page.</p>
  </div>
<?php endif; ?>

3. 簡潔で見やすい記事リストのブロック表示を作成

Viewsを使用すれば、記事リストのブロックを簡単に作成できます。

4. レイアウトに凝りたいなら、テーマに追加のリージョンを作成

リージョンの追加は簡単です。ご使用のテーマが用意しているリージョンのレイアウトが気に入らない場合、またはリージョンが足りない場合は、リージョンを追加しましょう。リージョンの追加は簡単です。custom regionというリージョンを追加すると仮定して、簡単に方法をご紹介します。。

.infoファイルの編集

.infoファイルを開き、 regions[custom_region] = custom region というコードを追加します。 通常drupal.orgで入手可能なテーマには、.infoファイルに次のようにリージョンを定義している部分がありますので、例えばその一番下あたりに上記のコードを追加してください。

regions[left] = left sidebar
regions[right] = right sidebar
regions[navbar] = navigation bar
regions[content_top] = content top
regions[content_bottom] = content bottom
regions[header] = header
regions[footer] = footer
regions[closure_region] = closure
;ここに追加

page.tpl.phpファイルの編集

page.tpl.phpファイルを開き、custom regionを追加したい位置に次のコードを追加します。

<?php if ($custom_region): ?>
  <div id="custom-region"><?php print $custom_region; ?></div> <!-- /custom-region -->
<?php endif; ?>

管理セクションのパフォーマンスページ(admin/settings/performance)でキャッシュをクリアした後、ブロックページ(admin/build/block)で追加したリージョンが表示されるか確認してください。

CSSファイルの編集

style.cssファイルを開き、適宜スタイルを調整してください。

＊大抵のテーマでは、一般的なCSSの設定はstyle.cssというファイルに書かれていますが、テーマによっては異なる名称がついている場合があります。例えば、CocoaSpaceで使用しているAdaptiveThemeのサブテーマではtheme.cssというファイル名が与えられています。なお、AdaptiveThemeにはGpanelsという簡単にリージョンを追加できるPHPスニペットとCSSが含まれています。興味のある方はGpanelsで簡単パネル表示をご参照ください。