Drupal8のテーマカスタマイズ

このサイトは WordPress のデフォルトテーマ、twentysixteen の子テーマ(child theme)を作ってカスタマイズしています。

Drupal8 の場合はサブテーマと呼ぶようですが、同じようなやり方でカスタマイズできそうなので、いまの Nexus をカスタマイズしようと思いました。しかし、Drupal のサブテーマの作り方を調べてみると、Drupal7 の情報は多く出てくるのですが、8の情報は一から作り上げるやり方くらいしか見付かりません。

どうにかこちらの「Drupal8でサブテーマを作ってみる」を見付けられましたので、テーマカラーの変更をしてみました。

WordPress の場合ですと、子テーマ用のディレクトリを用意して、style.css の始めに子テーマ用の設定を加えるだけで、後は変更のある PHPソースや CSSファイル、JavaScript だけを設置すれば動作します。

Drupal8 の場合はテンプレートエンジンに Twig を採用しているため、必要な設定を Twig 用のテンプレートファイルに記述していきます。見慣れないので最初は戸惑いましたが、慣れれば python に似た記述が出来て分かりやすかったです。

ここでいくつかはまったポイントを。まず base theme に指定するのは元になるテーマのディレクトリ名です。テーマに付いている名前ではありません。Nexus なら小文字で nexus になります。

また、CSS や JavaScript を変更してもすぐには反映されません。[環境設定]-[パフォーマンス]-[すべてのキャッシュをクリアー] で Drupal のキャッシュをクリアしないと反映しません。これはデフォルトで CSS や JavaScript も含めたキャッシュを生成しているためです。

機能拡張モジュールですぐに反映させるものがあるとか、設定を変更すれば出来るらしいのですが、何やら難しかったので簡単なキャッシュクリアでやっています。カスタマイズしたい CSS の要素は、PC用のブラウザならメニューから表示してくれる動作モードがありますので、便利に使っています。

普段使いが Firefox のわたしの場合、メニューから [Web開発]-[インスペクター] でブラウザ内の構成要素を表示してくれるようになります。昔は一つ一つソースを確認してやっていましたが、いやぁ、いい時代になりました。

とりあえず Nexus の標準カラーの明るい赤ベースから、明るい緑ベースに変えてみました。こんな感じです。

これからさらに勉強して、ブロックのデザインやら変えていきたいと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA