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を設定します。
Drupal公式内のダウンロードページのガイドに従い設定します。
| Sub-theme |
|
提供されているスクリプトを使用してサブテーマを作成します
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で動いています。
-
Story Bookのターミナル
ターミナルからstorybookを起動
% npm run storybook
│ Storybook 6.5.16 for Html started
│ 8.98 s for manager and 9.42 s for preview
│
│ Local: http://localhost:56003/
│ On your network: http://192.168.1.3:56003/
│
│ A new version (8.1.11) is available!
│
│ Upgrade now: npx storybook@latest upgrade
│
│ Read full changelog:
│ https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md
Gulpで動いているのでターミナルに戻るにはCTRL+C
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との使用感の違いなどにも触れていきたいと考えています。