こちらのサイトではDRUPAL10に関連する記事を掲載しています。
はじめに
ベーステーマを継承してサブテーマを作成します。ベーステーマが更新されても改変したコードはサブテーマ用ディレクトリに作成されているためロールバックされることはありません。
メインテーマをダウンロードする
今回利用するベーステーマはBootstrap for Drupalです。テーマ公開のページにアクセスし、コントリビュートテーマと同様にダウンロードします。

解凍したフォルダをthemes/contrib下に保存し、まずはテーマ管理画面から「Bootstrap for Drupal 8.x」を「インストールしてデフォルトに設定」します。

トップページに戻ると、ベーステーマのデザインが反映されています。
サブテーマを作成する
ベーステーマのインストールが完了したら、サブテーマを作成します。ここで紹介するのは汎用的な方法なので、実際のサブテーマ作成方法は各ベーステーマのドキュメントを参照してください。
まずはサブテーマのフォルダをthemes/custom/に「subtheme_bootstrap」として作成し、中にsubtheme_bootstrap.info.ymlファイルを配置します。
subtheme_bootstrap.info.yml
name: 'Subtheme Bootstrap' type: theme description: 'Bootstrapベースのサブテーマです。' core_version_requirement: ^8 || ^9 || ^10 base theme: bootstrap_for_drupal
ymlファイルのbase themeプロパティでベーステーマを指定します。これにより、ベーステーマを拡張する形でサブテーマを作成できます。テーマ管理画面にSubtheme Bootstrapテーマが追加されているので、「インストールしてデフォルトに設定」します。

テーマが変更されましたがトップページに戻ると、デザインが変わっていないことが確認できます。
このサブテーマ機能を利用することで、ベーステーマを上書きすることなく、デザインを継承した独自のテーマを作ることができます。CSSやJSを追加する方法はカスタムテーマの時と同様です。
リージョンを追加する
最後にリージョンを追加する方法を紹介します。リージョンとは連載第2回で紹介したブロックを配置することができるスロットです。まずsubtheme_bootstrap.info.ymlにregionsプロパティを追加します。値はBootstrap for Drupalのinfo.ymlのものをコピーし、「footer_sub_right: ‘Footer sub – right box’」行の下に「footer_bottom: ‘Footer Bottom’」行を挿入します。
subtheme_bootstrap.info.yml
name: 'Marucha Bootstrap' type: theme description: 'Bootstrapベースのサブテーマです。' core_version_requirement: ^8 || ^9 || ^10 base theme: bootstrap_for_drupal regions: header_special: 'Header - special' nav_main: 'Navigation - Main' nav_add: 'Navigation - Additional ' content_before: 'Content - before' content: 'Content - main ' content_after: 'Content - after' sidebar_left: 'Content - Sidebar' footer_left: 'Footer - left box' footer_center: 'Footer - center box' footer_right: 'Footer - right box' footer_sub_left: 'Footer sub - left box' footer_sub_center: 'Footer sub - center box' footer_sub_right: 'Footer sub - right box' footer_bottom: 'Footer Bottom' modal_container: 'Modal box container'
次にBootstrap for Drupalテーマのテンプレートを上書きします。まず、/themes/contrib/bfd/templates/layout/page.html.twigファイルを/themes/custom/subtheme_bootstrap/templates内にコピーします。templatesフォルダは新規に作成してください。コピーしたファイルの最下部に以下のコードを追加します。
{% if page.footer_bottom %} {{ page.footer_bottom }} {% endif %}

最後に、キャッシュをクリアし、サイト構築>ブロックレイアウトの画面からFooter Bottomリージョンに「配信」ブロックを追加します。その際に「ディスプレイ・タイトル」のチェックボックスは外してください。

配信ブロックがきちんとページに掲載されているか確認するために、試しにトップページ以外のページ、例えば以前作成したHELLOWORLDページ(/helloworld)にアクセスしてみます。アクセスするとページ最下部にRSSアイコンが表示されています。


なお、トップページにはこのアイコンは表示されません。これはトップページ専用のページテンプレートであるpage–front.html.twigファイルがBootstrap for Drupalに存在しているため、そちらが優先されて表示されるためです。必要に応じ、Marucha Bootstrapテーマ内に同名のファイルを置くことでトップページのリージョンもカスタマイズできます。

この記事またはDrupalに関するご質問がございましたら、お気軽にお問い合わせください。