9つの簡単なステップでカスタムDrupal9テーマを作成する方法

Drupal 9は、開発者とサイト所有者に、魅力的なデジタルエクスペリエンスを構築するために組み合わせることができるオーダーメイドのコンポーネントを作成する柔軟性を提供します。 テーマは、Webサイトの視覚的な外観を表すDrupalのデザインブロックです。 Drupal 9には、コアテーマとサードパーティのテーマの選択肢があり、最も人気のあるのはBootstrapテーマです。 ただし、Drupal 9のテーマのどれもあなたのためにそれをカットしない場合は、おそらくカスタムテーマの開発を検討する必要があります。 Drupal 9カスタムテーマを使用すると、正確な要件に合わせてデザインを調整できます。

Drupal 9はDrupalのフロントエンドテーマとしてBartikを提供しますが、Drupal 9カスタムテーマが必要な場合は、独自のDrupal 9テーマ開発を作成して、Drupalテーマのスキルを向上させることができます。 Drupal 9テーマの開発を実際に理解する最も簡単な方法は、ゼロから練習して作成することです。

Drupal8はEOLに到達しました。 今がDrupal9に移行するときです。ただし、Drupal 8でカスタムテーマを作成しようとしている場合は、これらの手順はDrupal8のセットアップでも機能します。

カスタムDrupal9テーマ開発の開始

DrupalWebサイト用のDrupal9テーマの作成を始めましょう。
ステップ1：まず、 「web / themes / custom」フォルダーの下にカスタムテーマを作成する必要があります。 フォルダにcustom_themeという名前を付けます。

ステップ2：次に、 info.ymlファイルを作成する必要があります。 そのための基本的なキーを指定する必要があります。 ここで指定しましょう-

コード：
名前：カスタムテーマ
タイプ：テーマ
説明： 「私のウェブサイトのカスタムテーマ。」
パッケージ：その他
core_version_requirement ：^ 8 || ^ 9

ステップ3 ：では、作成しましょう カスタムDrupal9テーマに必要なすべてのライブラリ（CSSおよびJS）を指定するlibrary.ymlファイル。 また、CSSおよびJSディレクトリとそのファイルを作成して、ここにリンクします。 ライブラリにグローバルスタイルという名前を付けます。

コード：
グローバルスタイリング：
バージョン：1.x
js ：
js / script.js ：{}
css ：
テーマ：
css / style.css ：{}

ステップ4： libraries.ymlファイルを作成したら、それをテーマにリンクする必要があります。 このために、 info.ymlファイルに追加します その後、テーマ全体に適用されます。

コード：
ライブラリ：
--custom_theme / global-styling

したがって、キーはライブラリになり、パスはテーマ名-'custom_theme '/ライブラリ名- 'グローバルスタイル 'になります。

ステップ5：次に、「基本テーマ」を継承する必要があります。この場合、Drupalコアテーマである「上品な」テーマを継承します。 したがって、キーはinfo.ymlの基本テーマになります。

コード：
基本テーマ：上品

ステップ6：次に、テーマの「リージョン」を定義します。 info.ymlでは、「regions」キーの下で定義する必要があります。

コード：
地域：
ブランディング：ブランディング
ナビゲーション：メインナビゲーション
検索：検索
注目：注目
コンテンツ：コンテンツ
right_sidebar ：右側のサイドバー
footer_first ：フッターファースト
footer_second ：フッターセカンド
footer_third ：フッターサード
footer_bottom ：フッター下部

「regions」キーの下で、カスタムDrupalテーマのリージョンを定義できます。 ここ、
ブランディング：小文字である必要がある地域のIDです。
ブランディング：大文字にすることができる地域の名前です。

ステップ7：カスタムDrupalテーマのリージョンを定義したら、 page.html.twigをオーバーライドして、上品なテーマの代わりに「リージョン」を取得する必要があります。 page.html.twigを作成するtemplates / systemディレクトリを作成します。

コード：
< header aria-label = "Site header" class = "header" id = "header" role = "banner" >
{{page.branding}}
{{page.navigation}}
{{page.search}}
</ヘッダー>
< section class = "featured" id = "featured" role = "complementary" >
{{page.featured}}
</セクション>
< section class = "main" id = "main" >
< main aria-label = "サイトのメインコンテンツ" class = "content" id = "content" role = "main" >
{{page.content}}
</メイン>
< aside class = "right--sidebar" id = "sidebar" role = "complementary" >
{{page.right_sidebar}}
</脇>
</セクション>
< 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 >
</フッター>

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

ページ-ページに「領域」をレンダリングするためのキーです

ブランディング-info.ymlファイルで定義したリージョンです。

これで、リージョンを作成してページにレンダリングしました。

ステップ8： Drupalサイトの外観に移動します。 アンインストールされたテーマのセクションに、カスタムのDrupalテーマが表示されます。

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

インストール後、 [構造]-> [ブロックレイアウト]に移動します。 カスタムテーマがブロックレイアウトの下に表示されます。

「ブロック領域のデモンストレーション（カスタムテーマ） 」へのリンクが表示されます。リンクをクリックします。 あなたはinfo.ymlで宣言され、page.html.twigで追加されていたことをすべての領域を見ることができます

ステップ9： Drupal 9のテーマ設定はほぼ完了です！ 次に、デザインに従って、各リージョンのCSSにスタイルを適用する必要があります。 この場合、 CSSを使用します。 必要に応じて、 SCSSを使用することもできます。 ブランディングリージョンを調べるだけです。リージョンクラスが表示されたら、そのクラスにCSSを追加します。

 。 ヘッダー{
 表示：フレックス;
 justify-content ： space-between ;
 パディング： 10ピクセル;
}


。 ヘッダー。 地域{
 パディング： 5ピクセル;
}


。 ヘッダー。 地域ブランディング{
 フレックス： 0 1 20 ％;
}


。 ヘッダー。 地域ナビゲーション{
 フレックス： 0 1 50 ％;
}


。 ヘッダー。 地域検索{
 フレックス： 0 1 30 ％;
}


。 地域。 ブロック領域{
 パディング： 15ピクセル;
}


。 特集{
 パディング： 40ピクセル20ピクセル;
 背景色：インディアン;
}
		



。 メイン{
 パディング： 50 px 0 ;
 表示：フレックス;
 justify-content ： space-between ;
}


。 メイン。 コンテンツ{
 フレックス： 0 1 65 ％;
}


。 メイン。 右-サイドバー{
 フレックス： 0 1 30 ％;
}


。 フッター-トップ{
 表示：フレックス;
 justify-content ： space-between ;
 パディング： 10ピクセル;
}


。 フッター-トップ。 地域{
 パディング： 5ピクセル;
}


。 region-footer-first 、。 region-footer-second 、。 region-footer-third {
 フレックス： 0 1 30 ％;
}

結果：

Drupal 9カスタムテーマの準備ができました！

フックを記述したり、twigファイルの提案を作成したりする必要がある場合は、カスタムDrupalテーマに.themeファイルを追加できます（以下を参照）。