Sub Themeの設定

Civic Themeのインストールが完了したので、Sub Themeの設定をします。

Sub Themeのメリットは、Themeのアップデートをした際にレイアウトに不具合が出てしまったり、機能が動かなくなるなどの不具合が出てしまう問題の影響を受けない事があります。ローカル環境で、Themeのアップデートの検証を行い、不具合の確認を行った上で、稼働中のWEBサイトのThemeの更新を行う事でアップデートの不具合に対応出来ますのでSub Themeの設定をしなくてもWEBサイトの構築や稼働は出来ますが、後の不具合への対応を考慮すると行った方が良い設定です。（私は必須と考えています。）

※DrupalのSub ThemeはWord Pressを使った事がある方だとお馴染みの"子テーマ"と同様な考え方になります。DrupalやWord PressのようなオープンソースのCMSを利用するメリットに、豊富なテーマやプラグインが用意されていて、それらを組み合わせる事で、構築したいWEBサイトのイメージに近い形をゼロからの開発をせず構築する事が出来ます。オープンソース故、様々な開発者が自由にプラグインやテーマを開発しているので、相性の問題やバージョン管理の違いにより不具合も出てしまいます。

WEBサイトを構築する上で場合によっては、PHPのソースなどを独自に変更したりするカスタマイズのケースもありますが、テーマのアップデートを行うと、この独自に変更した箇所がデフォルトに戻ってしまうので、変更したくない独自のカスタマイズを残す場合には、Sub Themeや子テーマという考え方が必須になります。

Civic ThemeのSub Themeの設定

Civic ThemeはSub Themeを設定しデフォルトとして使用する事が推奨されています。元々用意されている機能がSub Themeを使う事が前提で設定されていますのでSub Themeを設定します。

<Civic Theme> Drupal Download & Extend <Theme>(Opens in a new tab/window)

Drupal公式内のダウンロードページのガイドに従い設定します。

提供されているスクリプトを使用してサブテーマを作成します

Sub Themeの設定:

% php civictheme_create_subtheme.php <theme_machine_name> "theme_machine_name" "Human theme description" /path/to/theme_machine_name

サブテーマ・スターター・キットで提供されているツールの完全な恩恵を受けたい場合は、このステップをスキップしないでください

UIまたはDrushでテーマを有効にする:

% drush theme:enable theme_machine_name

フロントエンドのアセットをコンパイルする（NodeJSのバージョン>=18.14が必要）:

% npm run build

以上が公式サイトのSub Themeの設定方法ですが、少しわかりにくいので次項で私の設定例を参考に説明します。

phpコマンドでCivic ThemeのSub Themeを設定する。

実際の設定を実行するphpコマンド

% php civictheme_create_subtheme.php civictheme_demo "CivicTheme Demo" "Demo sub-theme for a CivicTheme theme." ../../custom/civictheme_demo

<theme_machine_name>
インストールフォルダ名になります。
civictheme_demo

Human theme name
サブテーマの名前 管理画面のテーマに表示
CivicTheme Demo

Human theme description
サブテーマの説明 管理画面のテーマに表示
Demo sub-theme for a CivicTheme theme.

/path/to/theme_machine_name
インストール先
../../custom/civictheme_demo
※パスになります。

※参考 パスの設定の説明
Project/web/themes/contrib/civictheme
にて作業しています。
※Sub Themeのインストール先を
Project/web/themes/custom/civictheme_demo
とする為 2階層上のパスを書く必要があり
../../custom/civictheme_demo とパス指定しています。

phpコマンドを実行し設定をします。

Storybook(Figmaで構成された設定マニュアル)の設定

実行結果の"Next Step"としてstorybookの設定と、Sub Themeをデフォルトに設定するコマンドが記載されていますので指示に従い実行していきます。

Civic Themeの設定マニュアルはFigmaで構成されているので、Node.jsが必要です。Node.jsをインストールしビルドしたらstorybookを動かします。

% npm install

% npm run build

% npm run storybook

storybookが起動します。Gulpで動いています。

Sub Themeの有効化とデフォルトテーマの設定

Enable theme in Drupal:

メインテーマのインストール

% ddev drush theme:enable civictheme -y

メインテーマをデフォルト設定

% ddev drush config-set system.theme default civictheme

サブテーマのインストール

%  ddev drush theme:enable civictheme_demo -y

サブテーマのデフォルト設定

% ddev drush config-set system.theme default civictheme_demo

Sub Themeの設定が完了したので、上記のコマンドで, メインテーマのインストール > メインテーマのデフォルト設定 , サブテーマのインストール > サブテーマのデフォルト設定,を行うか、管理画面 > テーマ で同様の設定を行いインストールしたCivic Themeのサブテーマをデフォルトに設定します。

以上でサブテーマが利用出来ます。

Sub Themeの設定が完了しました。

Civic ThemeのSub Themeの設定が完了しました。

色々つまづきながらも無事インストールが完了しましたので、次項からWEBサイトの構築を進めていきます。次項では、Drupalをインストールして使ってみた雑感やWordPressの使用感との差異などをまとめてみたいと思います。DDEV > DrupalとMAMP PRO > WordPressとの使用感の違いなどにも触れていきたいと考えています。