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

最終更新日 2020 年 9 月 12 日

テーマにリージョンを追加する上で、以下が必要になります：

• 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ファイルで設定されています。 上記のデフォルトリージョンをオーバーライドする場合には、Twig変数 {{ page_top }} と {{ page_bottom }} を、html.html.twig テンプレート内に残す必要がありますが、2つの隠しリージョン（page_top、page_bottom ）を、再度設定する必要はありません。