【Drupal】テーマ1
～オリジナルテーマを作成する～
Drupalをインストールすると、以下のような画面が表示されます。
私が最初に思ったのは、「ナニコレ？」でした。。
そもそも仕事で見てきた画面はこんな画面じゃなかったし、Drupalってどうやって画面をカスタマイズするの？という状態でした。
モジュールを適当にインストールしても、コンテンツを登録しても、画面の構造や色味はまったく変わらなかったためです。
それもそのはずで、画面のカスタマイズは、「テーマ」がカギを握っていたのです。
テーマとはCSSやJavaScript、コンテンツの画面配置を司る機能です。
そう言われてもよくわからないですよね。なのでとりあえず触ってみてイメージをつかんでいきましょう!
まず、Drupalに管理者ユーザでログインし、「テーマ」タブをクリックしてみてください。以下のような画面が出ますよね。
Drupalをインストールした直後は、「Bartik」というテーマが適用されている状態となります。
「Bartik」はDrupalがデフォルトで提供するシンプルなテーマですが、実態はどこにあるのでしょうか。
それは以下にあります（今後、ディレクトリパスは/var/www/html/サイト名 を省略します）。
これを参考にテーマを作成したいと思いますが、「Bartik」はcoreディレクトリに含まれており、 Drupalのバージョンが上がると変更される可能性があります。なので「Bartik」を別の場所にコピーしてしまいましょう。
テーマを自作するときは、以下のディレクトリにて行います。
また、第三者から提供されたコード（コントリビュート）と自作のコードが混ざると管理しづらいので、 以下のようなディレクトリを作っておきます。
少しでも自分で変更したコードはCustomディレクトリに格納し、そうでないものはContribに格納することとします。
そうすることで、バグの原因と対処方法が特定しやすくなります（Contribの中でバグが発生していたら提供元の サイトに何か情報が無いか探せますし、Customでバグが発生したら自分で特定できますよね）。
「Bartik」はコントリビュートテーマなので、「Contrib」に格納します。
私のDrupalバージョン9.1.7だと、この状態で以下のようなエラーとなります。
‘core_version_requirement’の設定がないとのことなので、bartik.info.ymlに以下を追加してあげます。
これは、このテーマがDrupal9に対応していることを示す設定です（なんで最初は書かれていないんだろう）。
とりあえずこれで準備は整いました。いよいよ、テーマをつくります。
テーマを作成するには、info.ymlファイルを作成するだけでいいです。
Customディレクトリ配下に適当なテーマ名のディレクトリを作成し、その中にテーマ名.info.ymlファイルを作成してみてください。
記述する内容は以下です。
themes/Custom/okitheme/okitheme.info.ymlの記述内容
type: theme
description: ‘練習用のテーマです。’
base theme: bartik
core_version_requirement: ^9
regions:
header: Header
primary_menu: ‘Primary menu’
secondary_menu: ‘Secondary menu’
page_top: ‘Page top’
page_bottom: ‘Page bottom’
highlighted: Highlighted
featured_top: ‘Featured top’
breadcrumb: Breadcrumb
content: Content
sidebar_first: ‘Sidebar first’
sidebar_second: ‘Sidebar second’
featured_bottom_first: ‘Featured bottom first’
featured_bottom_second: ‘Featured bottom second’
featured_bottom_third: ‘Featured bottom third’
footer_first: ‘Footer first’
footer_second: ‘Footer second’
footer_third: ‘Footer third’
footer_fourth: ‘Footer fourth’
footer_fifth: ‘Footer fifth’
いろいろ書いちゃっていますが、「regions:」以下は「Bartik」のbartik.info.ymlからコピペしたものです。
それぞれの意味は以下です。
| 項目名 | 意味 |
|---|---|
| name | テーマを選択する画面で使用されるテーマの名前です。 |
| type | モジュールのタイプを指定します。今回は「theme」です。 |
| description | テーマを選択する画面で使用されるテーマの説明です。 |
| base | ベースとなるテーマを指定します。今回はbartikです。 |
| core_version_requirement | 対応しているコアバージョンを指定します。 |
| region | 画面の領域を定義します。 |
この時点で、テーマ選択画面に以下のようにテーマが表示されることとなります。
「インストールしてデフォルトに設定」ボタンを押下すると、作成されたテーマがインストールされます。
テーマを作ったのにDrupalが認識しないよーという方は、 「環境設定」-「パフォーマンス」から、「すべてのキャッシュをクリアー」を押してください。
これで、とりあえずテーマを作成することができました。
次回は、このただコピペしただけのテーマを少し変更してみたいと思います。
私はこの本（Drupal 9 Module Development）でDrupalの 勉強をしています。