Drupal8のテーマカスタマイズ
このサイトは WordPress のデフォルトテーマ、twentysixteen の子テーマ（child theme）を作ってカスタマイズしています。
Drupal8 の場合はサブテーマと呼ぶようですが、同じようなやり方でカスタマイズできそうなので、いまの Nexus をカスタマイズしようと思いました。しかし、Drupal のサブテーマの作り方を調べてみると、Drupal7 の情報は多く出てくるのですが、８の情報は一から作り上げるやり方くらいしか見付かりません。
どうにかこちらの「Drupal８でサブテーマを作ってみる」を見付けられましたので、テーマカラーの変更をしてみました。
WordPress の場合ですと、子テーマ用のディレクトリを用意して、style.css の始めに子テーマ用の設定を加えるだけで、後は変更のある PHPソースや CSSファイル、JavaScript だけを設置すれば動作します。
Drupal8 の場合はテンプレートエンジンに Twig を採用しているため、必要な設定を Twig 用のテンプレートファイルに記述していきます。見慣れないので最初は戸惑いましたが、慣れれば python に似た記述が出来て分かりやすかったです。
ここでいくつかはまったポイントを。まず base theme に指定するのは元になるテーマのディレクトリ名です。テーマに付いている名前ではありません。Nexus なら小文字で nexus になります。
また、CSS や JavaScript を変更してもすぐには反映されません。[環境設定]－[パフォーマンス]－[すべてのキャッシュをクリアー] で Drupal のキャッシュをクリアしないと反映しません。これはデフォルトで CSS や JavaScript も含めたキャッシュを生成しているためです。
機能拡張モジュールですぐに反映させるものがあるとか、設定を変更すれば出来るらしいのですが、何やら難しかったので簡単なキャッシュクリアでやっています。カスタマイズしたい CSS の要素は、PC用のブラウザならメニューから表示してくれる動作モードがありますので、便利に使っています。
普段使いが Firefox のわたしの場合、メニューから [Web開発]－[インスペクター] でブラウザ内の構成要素を表示してくれるようになります。昔は一つ一つソースを確認してやっていましたが、いやぁ、いい時代になりました。
とりあえず Nexus の標準カラーの明るい赤ベースから、明るい緑ベースに変えてみました。こんな感じです。
これからさらに勉強して、ブロックのデザインやら変えていきたいと思います。