Views のテーミング、view.tpl.php テンプレートの編集（フィールド、行、ブロック、ページ）。jQuery プラグイン EasySlider の接続

この記事では、Drupal のクエリビルダーモジュール――Views モジュール（http://drupal.org/project/views）――を探ります。Views を使うと、さまざまなコンテンツタイプのフィールド、コメント、タクソノミー用語、ユーザー情報、その他データベースからのデータを出力できます。また、グラフィカルなインターフェースも提供し、マウスを使って簡単にデータベースクエリを構築できます。

注意!!! easySlider を 1 時間以内に使いたい場合は、モジュールをインストールすることを強くお勧めします。この記事は主に、Views テンプレートのテーミング方法を理解する手助けをするためのものです。 easySlider を適切にスタイリングするには、CSS をカスタマイズする必要があります。

Views を設定して必要なフィールドを出力した後、それらを特定の方法で配置する必要がよくあります。これは出力テンプレートファイルを使って行います。デフォルトでは、これらのテンプレートはテーマフォルダーにあります。

Views で表示されるデータに EasySlider jQuery プラグインを設定しましょう。これには、すでに Views と統合されたモジュールがあります:http://drupal.org/project/easySlider。

目的が単に画像をスライダー形式で出力することだけなら、モジュールをインストールすれば十分です。しかし、この記事は Views テンプレート の扱い方を理解する助けになります。

始めるには、Views、CCK、Imagecache モジュールをインストールし、easySlider プラグインを こちら または他の任意のサイトからダウンロードする必要があります。プラグインを Drupal テーマにインストールする方法は、CCK フィールドを設定した後で後ほど説明します。

では、モジュールをインストールした状態で始めましょう:

1. 新しいコンテンツタイプを作成します。

2. コンテンツタイプに画像アップロードフィールドを追加して保存します。必要ならフィールドを並べ替えてもかまいません。

3. フィールド設定で、無制限の画像アップロードを許可し、画像の説明を有効にします。

4. 新しい「Banner」コンテンツタイプを使ってコンテンツ（ノード）をいくつか作成し、スライダーで使う画像をいくつかアップロードします。

5. 出力画像用の画像プリセットを作成します。たとえば、200x200 ピクセルのプリセットです。

6. 必要なプリセットサイズに合わせるために、「scale and crop（拡大縮小して切り抜き）」の画像エフェクトを追加します。

7. では、このフィールドを Views でブロック形式で表示しましょう。

新しい view を作成します。

8. 「Image（画像）」フィールドを追加し、グループ化とラベルを削除して、画像プリセットを選びます。

9. フィルターを設定します:
Content: Published（公開）— yes
Content: Type（タイプ）— Banner

Basic Settings（基本設定）で:
Style（スタイル）: HTML List

view にブロック表示を追加します。

10. ブロックをテーマのリージョンに配置して、サイトに表示します。

この時点では、出力はまだスライダーのようには見えません。easySlider を統合しましょう。

11. easySlider プラグイン（先ほどリンクしたもの）を解凍します。2.html の例を使います。その CSS をテーマの style.css ファイルにコピーし、プラグインの画像をテーマの images フォルダーに移します。

12. easySlider1.5.js をテーマの js フォルダーにコピーします。テーマの .info ファイルでリンクします:

scripts[] = js/easySlider1.5.js

キャッシュをクリアします――これでファイルが読み込まれるはずです。

スライダープラグインの JS を調べると、適切に機能するためにどんなマークアップ構造を期待しているかがわかります。

13. ブラウザーのインスペクター（Firebug や Chrome DevTools など）を使ってブロックのマークアップを分析します。Views が、スライダーの邪魔になりかねない多くの余分な div を追加していることに気づくでしょう。

14. View の設定に戻り、「Theme: information」をクリックします。これにより、view のレンダリングに使われるテンプレートファイルが表示されます。

デフォルトの出力を上書きするために、テーマフォルダーに views-view-fields--view-banner.tpl.php という名前の新しいテンプレートファイルを作成します。

元の views-view-fields.tpl.php ファイルの内容をコピーし、整理を始めます――不要な div、span、区切り文字、ラベルを削除します。必要なもの（おそらく画像フィールドだけ）だけを出力します。

15. 新しいテンプレートを保存し、Drupal のキャッシュをクリアします。出力を調べます――これでよりすっきりし、<ul> の中に画像が入った <li> 項目だけが表示されるはずです。

16. views-view.tpl.php を views-view--view-banner.tpl.php という名前のファイルで上書きし、<div class="view-content"> のようなラッパーを削除することもできます。

17. さらに多くのラッパーを削除するには、views-view-list.tpl.php を views-view-list--view-banner.tpl.php で上書きします。

18. 最後に、ブロック周りのすべての余分な div を削除するには、block.tpl.php をカスタマイズします。テーマにこのファイルがまだない場合は、Block モジュールからコピーします。

block.tpl.php で、次のようなものを使ってバナーブロックを条件付きで <div id="slider"> で囲みます:

<?php if ($block->delta == 'views-banner-block_1'): ?>
  <div id="slider">
    <?php print $content; ?>
  </div>
<?php else: ?>
  <?php print $content; ?>
<?php endif; ?>

19. 再度キャッシュをクリアすると、出力は期待される構造に従うはずです:<div id="slider"><ul><li><img>...

20. EasySlider の初期化 JavaScript を、page.tpl.php にインラインで、または js/custom.js のような外部 JS ファイルに追加します:

$(document).ready(function() {
  $("#slider").easySlider();
});

21. すべてが整えば、EasySlider は機能するはずです。必要に応じて、レイアウト、余白、ナビゲーションボタンの CSS を調整してください。

結論:スライダーやカルーセルには既製のモジュールを使う方が簡単ですが、Views のテーミングとテンプレートの上書きを理解すれば、任意の jQuery プラグインを統合し、出力構造を完全に制御できます。