9 つのシンプルなステップで Drupal 9 のテーマを作成してみよう

Drupal 9 を使えば、開発者やサイトオーナーはオーダーメイドのコンポーネントを柔軟に作成し、それらを組み合わせて魅力的なデジタル体験を構築することができます。テーマは Drupal のデザインブロックで、ウェブサイトの外観を表現します。Drupal 9 には、コアテーマとサードパーティーテーマが用意されており、最も人気があるのは Bootstrap テーマです。しかし、既存のテーマで満足できない場合はカスタムテーマの開発を検討すべきでしょう。Drupal 9 のカスタムテーマなら、要件に応じてデザインをカスタマイズすることができます。

Drupal 9 では Drupal のフロントエンドテーマとして Bartik が提供されていますが、Drupal 9 のカスタムテーマが必要な場合は、自分で Drupal 9 のテーマ開発を行うことで、Drupal のテーマ開発スキルを向上させることができます。Drupal 9 のテーマ開発を良く理解するための最も簡単な方法は、練習しながら新規に作成することです。（訳注：ANNAI によるテーマシステムについての解説はこちらでご覧になれます。）

Drupal 8 が EOL に達したため、Drupal 9 への移行が必要です。しかし、まだ Drupal 8 でカスタムテーマを作成したい場合にも以下の手順を適用できます。

Drupal 9 カスタムテーマの開発を始める

それでは早速、Drupal サイト用の Drupal 9 テーマを作成してみましょう。

ステップ 1

まず、「web/themes/custom」フォルダにカスタムテーマを作成します。このフォルダーの名前を「custom_theme」とします。

Drupal 9 のカスタムテーマフォルダーの作成

ステップ 2

次に、info.yml ファイルを作成する必要があります。これには基本的なキーを指定する必要があります。ここで指定してみましょう。

Info.yml ファイルの作成

CODE:

name: Custom Theme

type: theme

description: 'Custom Theme for My Website.'

package: Other

core_version_requirement: ^8 || ^9

ステップ 3

それでは、カスタム Drupal 9 テーマに必要なすべてのライブラリー（CSS と JS）を指定するために、libraries.yml ファイルを作成しましょう。また、CSS と JS のディレクトリとそのファイルを作成し、ここにリンクさせます。ライブラリーの名前は global-styling とします。

CODE:

global-styling:

version: 1.x

 js:

js/script.js: {}

 css:

theme:

css/style.css: {}

ステップ 4

libraries.yml ファイルを作成したら、ライブラリー名 global-styling をテーマにリンクさせる必要があります。ライブラリー名を info.yml ファイルに追加して、テーマ全体に適用させます。

Drupal 9 のカスタムテーマと libraries.yml をリンクする

CODE:

libraries:

- custom_theme/global-styling

ここでは、「libraries」をキーとして、パスをテーマ名の「custom_theme」と指定し、ライブラリ名に「global-styling」を指定します。

ステップ 5

次に「ベーステーマ」を継承する必要があります。今回のケースでは、Drupal のコアテーマである「Classy」テーマを継承します。そのため、キーは info.yml のベーステーマ名となります。

ベーステーマ「Classy」を継承する

CODE:

base theme: classy

ステップ 6

次はリージョンを定義します。info.yml 内で 'region' キーを使ってリージョンの定義を行います。

リージョンの定義

CODE:

regions:

branding: Branding

navigation: Main navigation

search: Search

featured: Featured

content: Content

right_sidebar: Right sidebar

footer_first: Footer First

footer_second: Footer Second

footer_third: Footer Third

footer_bottom: Footer Bottom

‘Regions' キーの下に、カスタム Drupal テーマのリージョンを定義します。

branding ：リージョンのIDで、小文字でなければなりません。

Branding：リージョンの名前であり、大文字を用いることができます。

ステップ 7

Drupal のカスタムテーマのためのリージョン定義が済んだら page.html.twig をオーバーライドして、Classy テーマの ‘regions’ の代わりにカスタムテーマの ‘regions’ を取り込む必要があります。templates/system ディレクトリを作成し、その下に page.html.twig を作成します。

page.html.twig のオーバーライド

CODE:

<header aria-label="Site header" class="header" id="header" role="banner">

     {{ page.branding }}

     {{ page.navigation }}

     {{ page.search }}

</header>

<section class="featured" id="featured" role="complementary">

   {{ page.featured }}

</section>

<section class="main" id="main">

   <main aria-label="Site main content" class="content" id="content" role="main">

     {{ page.content }}

   </main>

   <aside class="right--sidebar" id="sidebar" role="complementary">

     {{ page.right_sidebar }}

   </aside>

</section>

<footer aria-label="Site footer" class="footer" id="footer" role="contentinfo">

   <div class="footer--top">

     {{ page.footer_first }}

     {{ page.footer_second }}

     {{ page.footer_third }}

   </div>

   <div class="footer--bottom">

       {{ page.footer_bottom }}

   </div>

</footer>

{{ page.branding }} にあるように、page.html.twig では、リージョン用の HTML 構造を作成します。

page - ページ内で 'regions' をレンダリングするためのキーです。

branding - info.yml ファイルで定義したリージョンです。

これで、リージョンを作成し、ページ上にレンダリングすることができました。

ステップ 8

Drupal サイトの「テーマ」に行くと、カスタム Drupal テーマが「アンインストール済みテーマ」セクションに表示されます。

アンインストール済みテーマセクション

Drupal テーマをサイトにインストールするには、「インストールしてデフォルトに設定」オプションをクリックする必要があります。

インストールが完了したら、「サイト構築」→「ブロックレイアウト」を開きます。カスタムテーマはブロックレイアウトの下に表示されます。

Drupalカスタムテーマ

「ブロックリージョンを仮表示する」のリンクが表示されるので、これをクリックします。info.yml で宣言し、page.html.twig で追加したすべてのリージョンが表示されます。

       Info.yml と page.html.twig に追加されたリージョン

ステップ 9

これで Drupal 9 でのテーマ設定はほぼ完了です。次に、デザインに応じて各リージョンに CSS でスタイルを適用する必要があります。ここでは CSS を使用しますが、必要であれば SCSS を使用することもできます。ブランディング・リージョンを確認すると、リージョン・クラスが表示されますので、そのクラスに CSS を追加してください。

必要に応じて、style.css に CSS を追加します。

.header{

 display: flex;

 justify-content: space-between;

 padding: 10px;

}


.header.region {

 padding: 5px;

}


.header.region-branding {

 flex: 0 1 20%;

}


.header.region-navigation {

 flex: 0 1 50%;

}


.header.region-search {

 flex: 0 1 30%;

}


.region.block-region {

 padding: 15px;

}


.featured{

 padding: 40px 20px;

 background-color: indianred;

}


.main{

 padding: 50px 0;

 display: flex;

 justify-content: space-between;

}


.main.content {

 flex: 0 1 65%;

}


.main.right--sidebar {

 flex: 0 1 30%;

}


.footer--top {

 display: flex;

 justify-content: space-between;

 padding: 10px;

}


.footer--top .region {

 padding: 5px;

}


.region-footer-first, .region-footer-second, .region-footer-third {

 flex: 0 1 30%;

}

結果：

Drupal 9 カスタムテーマの完成です。

もし、Twig ファイルにフックを書いたり、サジェスチョンを作成したりする必要がある場合は、Drupal のカスタムテーマに .theme ファイルを追加することができます（下記参照）。

.theme ファイルの追加