D9からの管理テーマClaroを導入!

最終更新日
2023年5月14日

Drupal9からの管理テーマClaroを導入!

こんにちは。
ぴころじーの竹川です。

今回のテーマは、管理テーマの導入です。

最初うまくいかなかったのですが、何とか導入できました。・・・、といいますのは、ぴころじーでは管理テーマも普通のテーマもそうですが、手を加える可能性があるため、必ずサブテーマを作成します。

管理テーマ「Claro」とは

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

とりあえずサブテーマを作成してみた

いつもの手順で、サブテーマをさくっと作ってみました。

$ mkdir <document root>/themes/custom/claro_subtheme

サブテーマ用のディレクトリを作り、そこに必要なファイルをコピーします。コピーするのは、とりあえず以下の通りで、コピー元のファイルは<document root>/core/themes/claroにあります。

  • claro.info.yml
  • claro.libraries.yml
  • js配下のファイル群
  • css配下のファイル群

なお、info.ymlとlibraries.ymlはサブテーマのディレクトリ名にあわせてファイル名を変更しておきましょう。また、info.ymlの必要な箇所も一部変更しておきます。

特に何も考えず、流れでやってしまったためか、有効にした途端真っ白な画面にエラーが表示され、復旧不能になってしまいました。やはり、調査は必要だということです。

お願いGoogle先生!

データをバックアップから戻し、Claroのサブテーマについて検索をしてみたところ、日本では皆無、Drupalの公式フォーラムに1件だけそれっぽい記事がありました。あまり議論されていないということは、需要がないのかな?とも思いましたが、ぴころじーには絶対必要です。

質問者の内容は、まさに私の欲しい解答と一致しています。いくつかの解答がありましたので、一つ一つ試すも、どうしてもうまくいかない・・・。結局のところ、こちらの解答によりうまく稼働するようになりました。
Claroのサブテーマを作成する

zipファイルをダウンロードし、展開するとこのような感じになります。
Claroのサブテーマの解答を得る

ファイル名をそのままにして、サブテーマのディレクトリ名をあわせても構いませんが、私はディレクトリ名も分かりやすいようにするために、ディレクトリ名にテーマのファイル名をあわせました。
Claroのサブテーマのファイル名

展開したファイルとディレクトリをサブテーマの所定の場所に配置し、テーマ一覧を再読込するとサブテーマが表示されます。

サブテーマをインストールできない・・・

しかし、メッセージが出ており、インストールできません・・・。
Claroの状態を確認

info.ymlのcoreかcore_version_requirementを確認するように、とのメッセージが出ており、確認します。
Claroの設定ファイルを確認する

要は、core_version_requirementがないので、追加してね。ということで、Drupal8~10に対応するように追記をしました。
Claroの設定ファイルを編集する

その上で、テーマの再読み込みを行うと、インストールできるようになります。

追加したサブテーマをインストールし、画面の左下にある管理用テーマから、インストールしたサブテーマを選択します。
Claroのサブテーマを選択する

少し右往左往しましたが、めでたしめでたし!

そう簡単にはいかなかった・・・

はい。有効にしてみると、画面がおかしいのです。

Claroのサブテーマの表示がおかしい
※画面は環境により異なります。

ヘッダー部に既存のコンテンツ等が読み込まれている、というなんともな現象に出くわしました。ちなみに、下の方へスクロールすると管理する内容が出てきます。ということは、見るべきはひとつです。そう、サイト管理→ブロックレイアウトです。
Claroのサブテーマのブロックレイアウトを変更する

大変なことになっています・・・。

ベーステーマのClaroを参考にして、内容を合わせます。合わせたら、管理項目の各タブを確認し、正常に表示されていることを確認しましょう。