Panelsのテンプレートの追加

drupal
panels
customization
template

モジュールPanelsに含まれているテンプレートが意外に少ないようです。少し複雑なレイアウトを構成する場合、テンプレートの追加は必要となります。この場合に、モジュール：Panels Extra Layoutsをインストールしてより多いテンプレートの選択が可能となりますが、やはり開発に相応しいテンプレートが見つからないことがあるので、自分でテンプレート作成して、Panelsに追加することが必要となります。Panelsのテンプレート追加作業は実に簡単で、いくつかポイントを掴めれれば素早くテンプレートの追加はできます。

既存のテンプレートフォルダの複写

  • Panelsのテンプレートフォルダ（例：/sites/all/modules/panels/plugins/layouts/threecol_25_50_25）ごとをコピーします
  • テーマフォルダに貼り付ける（例：/sites/all/themes/ltheme/layouts/threecol_25_50_25）
  • レイアウトの名前をフォルダ名からファイル名までを変更します（例：threecol_25_50_25 ⇒ staffprofilelayout）
  • フォルダ/ファイル名を変更時に、単語の間にハイフン（―）とアンダーバー（_）をつけない方がよいでしょう。
    • もしアンダーバーを単語の間に入れた場合に、必ずテンプレートファイル（例：panels-threecol-25-50-25.tpl.php）名の単語の間にハイフンをつけなければならないです。
    • 上記ルールを守れなければ、Panelでの追加、設定時にエラーが発生します

      このエラーの発生は、Drupalのテンプレート利用時に、アンダーバーをハイフンに変換するルールによって発生されます。
    • なので、フォルダ名とファイル名の間にハイフンとアンダーバーを入れないほうが間違わないでしょう。

ThemeにPanelsのテンプレートの記述

  • Themeをロード時にPanelsのテンプレートがあることをDurpalに通知しなければならないです
  • Themeの定義ファイル（例：/sites/all/themes/ltheme/theme.info）に以下の情報を追加します 
    plugins[panels][layouts] = layouts
  • 上記記述はPanelsのテンプレートが子フォルダ：layoutsにあります

テンプレートの設定

  • 一つテンプレートを定義する四つのファイルがあります
    • staffprofilelayout.css
    • staffprofilelayout.inc
    • staffprofilelayout.png
    • staffprofilelayout.tpl.php
  • staffprofilelayout.incファイルはPanelsのレイアウト選択画面に使用する定義ファイルとなります
    • ​テンプレート名、カテゴリ名、アイコン、CSS、テンプレートのRegionなどを定義します 
      // Plugin definition
$plugin = array(
    'title' => t('Staff Profile Layout'),
    'category' => t('SP Layout'),
    'icon' => 'staffprofilelayout.png',
    'theme' => 'staffprofilelayout',
    'css' => 'staffprofilelayout.css',
    'regions' => array(
        'top_left' => t('Top left'),
        'top_right_top' => t('Top right top'),
        'top_right_middle' => t('Top right middle'),
        'top_right_bottom' => t('Top right bottom'),
        'middle_row' => t('Middle row'),
        'bottom_row' => t('Bottom row'),
    ),
);
    • staffprofilelayout.tpl.php、staffprofilelayout.cssはテンプレートのレイアウトなので、必要に応じ変更します
    • staffprofilelayout.pngはPanelsレイアウトの選択時に使用されます（約60x80pixelの画像）

キャッシュのクリア

  • キャッシュをクリアしなければ、Panelsがこのテンプレートを認識しません。
  • キャッシュは管理画面で操作できます（ホーム » 管理 » 環境設定 » 開発 » パフォーマンス）

Panelsで追加されたレイアウトの選択

  • Panelsで作成されたVariantの「レイアウト」で、追加したテンプレートが「カテゴリー」選択しから現れるはずです
  • 追加されたレイアウトを選択して、Paneの配置を調整します