Starterkit でテーマを作る

作業のゴール

Drupal のカスタムデザインテーマを作り、サイトに適用する。

Drupal では、Twig (PHPテンプレート) を使って好みのテーマでページを表示できる。
今回は、そのテーマの最初の設定を新しい仕組み（Starterkit）を使って構築する。
構築後、Twigや修正したCSSを適用することで、テーマ開発ができるようになる。

補足

今回テーマ開発に使う Starterkit の仕組みは比較的新しいDrupalのテーマ開発の仕組み。

Drupalのテーマでは、テーマの継承・親子関係があり、
Base themeを指定して、Sub-theme側をカスタマイズするのが基本のよう。

Starterkitでは、こうした継承元のテーマも含めて最初にまるっとコピーされるような形になる。

 

作業の概要

  • Starterkit でテーマを構築する
  • Drupalサイトでテーマを有効化する

 

作業

Starterkit

Starterkitを使って新しいテーマを生成する

作業

  • ドキュメントルート（web, docrootなど）に行く
  • phpスクリプトを実行する
    • テーマの名前を決めておく（今回は wireframe という名前に）
$ cd path/to/docroot
$ php core/scripts/drupal generate-theme wireframe

 

補足

このscriptを実行すると、 web/themes 配下にテーマのファイル一式ができる。

最低限必要な (themename).info.yml  や、ダミーのロゴ画像などができる。

generate-theme

この info.yml がテーマの情報が書かれた大事なファイル。

テーマの名前や、ライブラリ（CSS/JS）、Drupal上で表示されるDescriptionなどが書かれる。

詳細はDrupal.orgの記事を参考に。

参考記事

Defining a theme with an .info.yml file
https://www.drupal.org/docs/develop/theming-drupal/defining-a-theme-with-an-infoyml-file

 

テーマをインストールする

Drupalサイトにログインし、カスタムテーマをインストールする

 

作業

  • Drupal管理画面にログインし、"テーマ" の設定画面を開く。
  • インストール or インストールしてデフォルトに設定
  • キャッシュクリア

 

補足

info.yml ができているので、テーマの管理ページを開くと
すでにカスタムテーマが表示されているはず。

Install theme

info.ymlの通り、Stark をベースにカスタムテーマができているので、
隣のStarkと同じサムネが出ている。

インストール にすると、サイトにインストールされるだけでまだ表示は変わらない。
インストールしてデフォルトに設定とすると、サイトの表示も切り替わる。

今更だが、Drupalのテーマには２種類ある。

１）テーマ
　　→ サイトの表示に使われるテーマ
　　→ 通常想像するのはこっちの方

２）管理用テーマ
　　→ 管理画面（ログインしてコンテンツの編集などを行う方）のテーマ
　　→ デフォルトではClaroが選ばれている
　　→ 管理用テーマも、テーマの管理画面で設定できる（ページ末尾）

デフォルトに設定し、キャッシュを消すことでページが閲覧できる。

ちなみにキャッシュの削除は、

$ lando drush cr

で行う（lando を使っていて、drushコマンドが入っている場合）

 

完成

Starterkit init

 

 

参考記事