Drupal8のテーマにリージョンを追加する

Drupal8テーマ作成ガイド
この記事は「 Adding Regions to a Theme 」の翻訳です。
この記事の目次

最終更新日 2018年5月23日

テーマにリージョンを追加時に必要なこと

  • THEMENAME.info.yml ファイルにリージョンメタデータを追加する。
  • page.html.twig ファイル内に、上記で追加したリージョンを記載する。

注:テーマにリージョンを1つ以上宣言した場合は、デフォルトのリージョンはすべて適用されなくなります。すべての使用するリージョンを宣言する必要があります。

THEMENAME.info.ymlを編集後、キャッシュをクリア(drush cr)すると、存在しないリージョンにあったブロックは無効になります。その際は、以下のようなメッセージが表示されます。

The block themename_breadcrumbs was assigned to the invalid region breadcrumb and has been disabled. ブロック [ブロック名] は無効なリージョン [リージョン名] に割り当てられ、無効にされました。

/admin/structure/block にアクセスすると、無効なブロックが一番上のリージョンに表示され、 "(無効)":(disabled)と表示されます。ブロックをドラッグアンドドロップで他のリージョンへ移動、もしくは、各ブロックのリージョンドロップダウンメニューでリージョンを再設定します。不要なブロックの場合は削除します。

page_topとpage_bottom リージョンは、システム上必要です。これらは「非表示 」リージョンで、アナリティクスや管理ツールバーなど、ページの上部と下部のマークアップに使用されます。THEMENAME.info.ymlファイルにこれらのリージョンを設定する必要はありません。また、モジュールがこれらのリージョンの存在を前提としている場合もありますので、html.html.twigから削除しないでください。

.info.ymlファイルへのリージョンの追加

THEMENAME.info.ymlファイルへ新しいリージョンをを設定します。各リージョンは regions の子キーとして設定します。

regions:
  header: 'Header'
  content: 'Content'
  footer: 'Footer'

各リージョンキーは、英数字でアンダースコア(_)を含めることができます。キーは英字で始める必要があります。キーは、コードで使用するリージョン名、値は、ヒューマンリーダブルな形式で管理UIに表示されます。

テンプレートにリージョンを追加する

リージョンにコンテンツを表示するには、リージョンをpage.html.twigファイルに追加する必要があります。リージョンは、page.に THEMENAME.info.ymlファイルで設定したキーを Twig変数として追加します。

例:

THEMENAME.info.ymlファイル

header: 'Header' 

page.html.twig ファイル

{{ page.header }} 

これらの変数は、他のTwig変数と同様に作動し、利用状況に合わせて適切なマークアップと共に使用されます。 (デフォルトの非表示領域の構文は異なります。下記を参照してください。)

デフォルト領域

デフォルトリージョンの一覧は、page.html.twigのドキュメントを参照してください。

  1. page.header
  2. page.primary_menu
  3. page.secondary_menu
  4. page.highlighted
  5. page.help(主に管理ページのヘルプテキスト用)
  6. page.content(ページのメインコンテンツ)
  7. page.sidebar_first
  8. page.sidebar_second
  9. page.footer
  10. page.breadcrumb

テーマにリージョンを設定していない場合、上記のデフォルトリージョンが設定されます。これらのリージョンは、デフォルトの
core/modules/system/templates/page.html.twigファイルで設定されています。 上記のデフォルトリージョンをオーバーライドする場合には、{{ page_top }}と{{ page_bottom }}Twig変数を、html.html.twigテンプレート内に残す必要がありますが、2つの隠しリージョン(page_top、page_bottom )を、再度設定する必要はありません。

この記事を書いた人 : Yoshikazu Aoyama

ANNAI株式会社の出社しないCTO。
昔は回線交換やL2/L3のプロトコルスタックの開発をしてました。その後、組み込みLinuxやJava/Ruby on RailsなどのWebシステム開発などを経て現職。
インフラからDrupalのモジュール開発、Drupal以外の開発までなんでもやります。
普段は札幌で猫と一緒にリモートワークしています。 好きなモジュールは Restful Web Services と Rules

関連コンテンツ