【続編】D9からの管理テーマClaroを導入!

最終更新日
2023年5月14日

【続編】D9からの管理テーマClaroを導入!

おはようございます。
ぴころじーの竹川です。

先日、Drupal9で新たに採用された管理テーマClaroのサブテーマを作成しました。作成したあとになるのですが、「あれ?やっぱりちょっとおかしいかも・・・」という疑惑が出てきましたので、一部(最後のとこですが)修正した記事を投稿することにしました。

管理テーマ「Claro」とは

Drupal9から管理テーマとしてSevenの後継となるClaroがCoreモジュールに組み込まれました。ぴころじーではAdminimalを管理テーマとして使ってきたため、これを期にClaroを導入してみようということになりました。

画面がおかしくなる現象

こちらの記事の最後の方に、表示される画面がおかしくなってしまう現象を掲載しています。これは、管理テーマClaroのサブテーマについて、ブロックレイアウトがおかしくなっていたということが原因です。

そして、ベースの管理テーマClaroにブロックレイアウトを合わせようとしても、ブロックを配置をクリックしても、Claroに関するものの一部が存在しない。という現象に見舞われました。

ベースの管理テーマClaroのブロック

これは、どのテーマのブロックレイアウトを見ても同様です。しかし、ベースの管理テーマClaroには初期時点で表示されています。Claroのブロックですが、2つの環境で同じことをやってみて、差異がありました。サブテーマにブロックが表示されているものと、そうでないもの・・・。はて・・・こまった・・・。

ブロックのインストール状況の確認

今回の対象のブロックは次の通り。

  • Page title(Core)
  • Primary tabs(Core)
  • Secondary tabs(Core)
  • Breadcrumbs(System)
  • Status messages(System)
  • Help(Help)
  • Primary admin actions(Core)
  • Main page content(System)

この中で、サブテーマに表示されているものと、表示されていないものがありました(太文字)。これは、環境によって異なるのかもしれません。

ブロック自体が存在しないのであれば、ベースの管理テーマClaroでも表示されないはずです。念のため、ブロック自体が存在しているかどうかを確認します。

環境設定の開発セクションにある構成の同期をクリックします。

ベースの管理テーマClaroのブロックの確認

エクスポート>シングルアイテムから、構成タイプにブロックを選択します。構成名をドロップダウンして存在の確認をします。

ベースの管理テーマClaroのブロックの確認

Claroがインストールされているので存在するはず・・・です。

結果的に、これらのブロックをブロックレイアウトのブロックの配置に表示させることはできませんでしたが、初期配置として表示・配置することができました。

テーマの初期設定

テーマの初期設定を行うためのファイル群が存在します。これらをサブテーマに追加で配置します。

<document root>/core/themes/claroにあるconfigディレクトリ配下のファイル群です。

テーマの初期設定

configディレクトリごと、サブテーマのディレクトリにコピーします。

コピーしたら、ファイル名と内容を編集していきます。まずはファイル名をサブテーマ名に適合するように合わせます。

</config/optional>
block.block.claro_breadcrumbs.yml → block.block.claro_subtheme_breadcrumbs.yml
block.block.claro_content.yml → block.block.claro_subtheme_content.yml
block.block.claro_help.yml → block.block.claro_subtheme_help.yml
block.block.claro_local_actions.yml → block.block.claro_subtheme_local_actions.yml
block.block.claro_messages.yml → block.block.claro_subtheme_messages.yml
block.block.claro_page_title.yml → block.block.claro_subtheme_page_title.yml
block.block.claro_primary_local_tasks.yml → block.block.claro_subtheme_primary_local_tasks.yml
block.block.claro_secondary_local_tasks.yml → block.block.claro_subtheme_secondary_local_tasks.yml

</config/schema>
claro.schema.yml → claro_subtheme.schema.yml

続いて、ファイルの内容を書き換えます。

</config/optional>
例として、block.block.claro_subtheme_breadcrumbs.ymlを書き換えます。他のファイルも同様です。(太文字の個所)

langcode: en
status: true
dependencies:
module:
- system
theme:
- claro_subtheme
id: claro_subtheme_breadcrumbs
theme: claro_subtheme
region: breadcrumb
weight: 0
provider: null
plugin: system_breadcrumb_block
settings:
id: system_breadcrumb_block
label: Breadcrumbs
label_display: '0'
provider: system
visibility: { }

</config/schema>
claro_subtheme.schema.ymlを書き換えます。

claro_subtheme.settings:
type: theme_settings
label: 'Claro Subtheme settings'

サブテーマへの反映

サブテーマにこれらを反映させるためには、一度サブテーマをアンインストールする必要があります。その上で、インストールしてみましょう。

サブテーマの設定の反映

ブロックレイアウトを確認すると、初期時点でブロックが設定されていることを確認できます。

サブテーマの設定を確認する