テーマにリージョンを追加時に必要なこと
最終更新日 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のドキュメントを参照してください。
- page.header
- page.primary_menu
- page.secondary_menu
- page.highlighted
- page.help(主に管理ページのヘルプテキスト用)
- page.content(ページのメインコンテンツ)
- page.sidebar_first
- page.sidebar_second
- page.footer
- page.breadcrumb
テーマにリージョンを設定していない場合、上記のデフォルトリージョンが設定されます。これらのリージョンは、デフォルトの
core/modules/system/templates/page.html.twigファイルで設定されています。 上記のデフォルトリージョンをオーバーライドする場合には、Twig変数 {{ page_top }} と {{ page_bottom }} を、html.html.twig テンプレート内に残す必要がありますが、2つの隠しリージョン(page_top、page_bottom )を、再度設定する必要はありません。