自分でカスタムテーマを作る
コントリビュートテーマを利用することで、コードを書くことなくWebサイトのデザインを変更することができました。しかし、実際にウェブサイトを構築する際には、デザインが細かく指定されていることが多く、ありもののテーマでは対応できないことが多くあります。そのような場合に1から自分で作成する「カスタムテーマ」を作成します。「カスタムテーマ」を作るステップは以下の通りです。
- テーマ.info.ymlの作成
- CSS、JSの追加
- テンプレートファイルを作成・編集
テーマをすべて独自に構築するため、作業負荷は高くなりますが、Drupalがテーマをどのように扱うかを学習するために、この連載で紹介していきます。カスタムテーマの後には、コントリビュートテーマを上書きする形で、独自のテーマを開発する「サブテーマ」についても紹介します。こちらの方が工数は低くなります。
ファイル構成
Drupalがカスタムテーマを適切なテーマとして認識するためには、テーマ.info.ymlを作成し、適切なディレクトリに配置する必要があります。まずはDrupalのルートディレクトリからthemes/custom（新規に作成）/marucha_custom（新規に作成）へ移動し、中にmarucha_custom.info.ymlファイルを作成します。marucha_custom.info.ymlの中身は以下です。これらがDrupalがテーマを認識するための必須項目です。
name: Marucha Custom type: theme description: 'まる茶のためのカスタムテーマ' core_version_requirement: ^8 || ^9 base theme: classy
ymlファイルなので、インデントはタブでなくスペース2つで行う必要があるため注意です。
ymlファイルの保存ができたら、テーマ管理画面を開きます。アンインストール済みテーマに「Marucha Custom」が表示されています。「インストールしてデフォルトに設定」をクリックすることで、1クリックで利用テーマとして設定し、トップページへ戻ります。
以前設定したコントリビュートテーマのデザインではなく、CSSが適用されていないページが表示されていれば成功です。エラーが出ている場合には、ymlファイルの内容に相違がないか確認してください。
CSS・JSを追加する
次に、サイトにCSSとJavaScriptを追加します。DrupalではテンプレートにCSSやJSのURLを埋め込むのではなく、アセットライブラリと呼ばれる内部のシステムに登録する形で行われます。これにより、システム内部でDrupalがCSSとJSの圧縮やキャッシュ、ロードする順番を入れ替える処理を行うことができます。
CSS・JSファイルを配置する
CSSとJSのファイルを作成し、テーマの中に保存します。marucha_customテーマ内にcssフォルダを作成し、styles.cssファイルを設置します。次に同テーマ内にjsフォルダを作成し、script.jsファイルを設置します。各ファイルの内容は以下の通りです。
article {
border: 1px solid #333;
background-color: #ccc;
}
console.log('JSが読み込まれました。');
現状のmarucha_customテーマ内のフォルダ構成は以下となっています。
└── marucha_custom
├── css
│ └── styles.css
├── js
│ └── script.js
└── marucha_custom.info.yml
ライブラリを定義する
次に、設置したCSSとJSをテーマに登録し、テーマがインストールされた際にDrupalが読み込めるようにします。marucha_customフォルダ直下にmarucha_custom.libraries.ymlファイルを作成します。ファイルの内容は以下の通りです。
global-styling:
version: 1.x
css:
theme:
css/styles.css: {}
global-scripts:
version: 1.x
js:
js/script.js: {}
最後に、定義したライブラリをテーマに追加します。
name: 'Marucha Custom' type: theme description: 'marucha' core_version_requirement: ^8 || ^9 base theme: false libraries: - marucha_custom/global-styling - marucha_custom/global-scripts
これで、Marucha CustomテーマへのCSS・JS追加が完了です。管理画面の環境設定＞開発＞パフォーマンスから「すべてのキャッシュをクリア」ボタンをクリックしてからトップページへ戻ります。
以下のようにarticleタグにCSSが適用されます。また、ブラウザの開発者ツールのコンソールに「JSが読み込まれました。」という文字列が表示されていれば成功です。
テンプレートファイルを作成する
次に、テンプレート機能を紹介します。Drupalのテンプレートは命名規則通りのファイル名を付与し、既存のコンポーネントを上書きする形で作成します。下図は簡略化したDrupalのテンプレート構成です。
html.html.twigファイルの中に、page.html.twigの内容を表示します。その下にはregion.html.twig、block.html.twigファイルがあります。このように、入れ子状にテンプレートファイルが存在するのが1つ目のポイントです。
また、リージョンテンプレートの1つがregion--content.html.twigになっています。このように、汎用的なテンプレート（この場合、region.html.twig）はより具体的なテンプレート（コンテント・リージョンのテンプレートならregion--content.html.twig）で上書きできることもポイントです。
Twigのデバッグを有効化
テンプレート開発を行う前に、Twigのデバッグを有効化することをお勧めします。ルートディレクトリからsites/default下にdefault.services.ymlファイルがあります。これをコピーし、名前をservices.ymlに変更します。このファイル内のtwig.config内debugプロパティの値をfalseからtrueに変更します。
キャッシュをクリアしてからトップページへ戻ります。ブラウザの開発者ツールなどからソースを表示すると、コメントとして各コンポーネントについて、現在使われているテンプレートと上書き可能なテンプレートの命名規則が表示されるようになります。
テンプレートを上書きする
デバッグ機能により上書きするテンプレートの命名規則が判明したので、実際にテンプレートファイルを作成します。今回はコンテンツの表示部分を担うnode.html.twigを上書きします。marucha_customにtemplatesフォルダを作成します。フォルダの中身はDrupalのルートディレクトリからcore/modules/node/templatesにあるnode.html.twigをそのままコピーし、node--3.html.twigと名前を変更します。次にarticleタグにクラスを追加するために、75行目の<article{{ attributes }}>を<article{{ attributes.addClass('my-class') }}>に変更します。
キャッシュをクリアしてからトップページのコンテンツ部分のソースを見ると、articleタグにmy-classというクラスが追加されています。
自分でゼロから作るカスタムテーマの紹介は以上で終了です。Drupalがテーマを認識する条件と、CSS・JSをライブラリとして定義して追加する方法、テンプレートの上書き方法を紹介しました。実際のテーマ開発では、このようにまっさらな状態からスタートするよりも、ベースとなるコントリビュートテーマをカスタマイズするサブテーマを利用することが多いのですが、まずはテーマシステムの基本を理解することが重要です。
