Skip to main content

For non-Japanese speakers

All the articles and content on this website are written in Japanese. If you would like to read them in a different language, please use the translation function on your browser. You may not be able to understand the finer points of the text, but you should be able to get the general idea.

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
  1. Create a sub-theme using provided script (do not skip this step if you want to receive the full benefits of the tooling provided with a sub-theme starter kit) :
    php civictheme_create_subtheme.php <theme_machine_name> "Human theme name" "Human theme description"/path/to/theme_machine_name
  2. Enable the theme in UI or with Drush: drush theme:enable theme_machine_name
  3. Compile front-end assets (NodeJS version >=18.14 is required): npm run build
提供されているスクリプトを使用してサブテーマを作成します

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との使用感の違いなどにも触れていきたいと考えています。

Drupalを使ってみた雑感

初めて使うDrupalですが、簡単なBlogを構築していく中で感じた雑感とWordPressとの違いなどをまとめていければと考えています。DDEV > DrupalとMAMP PRO > WordPressとの使用感の違いなどにも触れていきたいと考えています。

次の記事

Drupalの記事

関連するDrupalでWEBサイトを構築する為の環境構築の記事やDrupalについて書いた記事になります。

記事は全てナンバリングしています。Drupalを初めて使う為の準備から始まる最初の記事から読む事もできます。

Civic Themeの記事

このWeb SiteはDrupalのThemeであるCivic Themeで構成されています。Civic Themeはオーストラリア政府関連機関に採用されるGovCMSと言われる情報整理に優れたテーマです。
  • Drupal記事まとめ
  • Civic Theme

Drupal記事

Drupalについて記事を書いています。このWEBサイトを構築していく上でのトピックになります。プログラミングやソースコードなどエンジニア的な記事ではなく、プログラミング経験がない個人がDrupalでパーソナルなWEBサイトを構築するという観点での記事になります。
  • Drupal記事まとめ
最初の記事から購読

最新の記事

Drupalについて書いた最新の記事になります。

#D35 Thanks for technical advice.

当サイトをご覧いただいた方から、リダイレクトエラーについての技術的なアドバイスをいただきました。わかりやすい解説をいただき、エラーの解決ができましたので記事にしています。
  • 雑感
  • Drupalの記事

#D34 Colour Generator Problem

Drupal10.4.xに更新以降、Civic Themeのカラージェネレーターが効かなくなりデフォルトの配色での公開となっていましたが修正パッチが配布されていたので試してみました。
  • Civic Theme
  • Drupalの記事

#D33 Drupal ドキュメントルートの設定

Xserverビジネススタンダードにはドキュメントルートの簡易設定しかないのでDrupalのプライマリードメインの設定は.htaccessの設定をする必要があります。
  • 環境構築
  • Drupalの記事

#D32 Drupal 10.4.0

Drupal Coreが10.3xから10.4xにアップデートされましたので当サイトも早速アップデートします。
  • Civic Theme
  • Drupalの記事

Life Styleの記事

Drupalとは関係ないのですがLife Styleの記事も書いていますのでよろしければ購読ください。

Life Style記事

ライフスタイルの記事になります。Drupalに触れる目的でこのWEBサイトを立ち上げています。元はWord Pressで作成した記事をこちらのWEBサイトに再構築しています。Word Pressも学習目的で利用したのですが記事をしっかり作る事を目的としていたので、テーマに興味があればそれなりに楽しめると思います。
  • Life Style記事まとめ
  • Drupalの記事
  • Civic Theme
Return focus to the top of the page