ANNAIマガジン

Drupalのテーマ開発に関する記事一覧

Drupalのテーマ開発に関する基礎知識や命名規則、twigなど、Drupalのフロントエンド開発に関わる情報を配信しています。

Drupal 9 カスタムテーマ作成ガイド

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

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

Drupal の新しいフロントエンドテーマに秘められたデザインと哲学

Drupal のコンポーネントはすべてにおいてモダンになっており、デフォルトのフロントエンドテーマも例外ではありません。Drupal に新しいフロントエンドテーマ「Olivero」が登場したことをご存知でしょうか。Olivero はバージョン 9.1 で実験的なテーマとして追加されましたが、間もなく正式採用される予定です(訳注:オリジナル記事の公開後の 2022 年 4 月に正式採用されました)。つまり、新しく作成された Drupal サイトにはこれまでデフォルトのテーマであった Bartik に代わって Olivero が採用されることになります。なぜこれが素晴らしいニュースなのか、Olivero にはどのようなデザイン上の特徴があるのか、そしてその背景にはどのような哲学があるのかを見ていきましょう。

Drupal テーマ作成ガイド

Twig テンプレートの変数のデバッグ

Drupal 9 において Twig テンプレートファイルを操作する場合、利用可能な変数はテンプレートファイルのコメントに記載されます。しかし、記載されていなかったり、テーマやモジュールで、別途変数定義されている場合、テンプレート内で利用可能な変数を検出する必要があります。Twig では、dump() 関数を使って、テンプレートファイルで利用可能な変数を検出できます。

Drupal テーマ作成ガイド

Drupal のテーマにスタイルシート(CSS)とJavaScript(JS)を追加する

今回はDrupal 9 のテーマにjsとcssを追加する方法についての記事です。Drupalでのテーマ作成には必須の知識です。

Drupal テーマ作成ガイド

Drupal のテーマにリージョンを追加する

今回は Drupal 9 のテーマにリージョンを追加する方法について説明します。リージョンを追加することで、リージョン内にブロックを配置可能になります。

Drupal テーマ作成ガイド

Drupal のテーマを .info.ymlファイルで定義する

Drupal 9 のテーマを作成するには、最初に テーマに関するメタデータを Drupal に設定するファイル(THEMENAME.info.yml)作成する必要があります。これは、モジュールとインストレーションプロファイルを定義する方法に似ています。そのため、.info.yml ファイルの 'type' キーを 'theme' と設定してこれらと区別することが重要です。このページでは、THEMENAME.info.yml のサンプルファイルと、ファイルに定義することができる情報について説明します。

Drupal テーマ作成ガイドバナー

Drupal テーマのフォルダ構造

基本的な Drupal 9 の操作方法を学んだ後、実際に開発をする際にまず最初に突き当たる壁がテーマ(Theme)の作成方法です。ここでは、Drupal のテーマ作成の基本となるテーマフォルダの構造を説明します。

第 14 回 Drupal のテーマシステムについて

第 14 回 Drupal のテーマシステムについて

前回までで、Drupal 9 のコンテンツタイプ、タクソノミー、ブロック、クエリー、多言語化、権限設定と、コアの重要機能を見てきました。連載の終盤の 2 回でテーマとモジュールの利用について取り上げたいと思います。

第 9 回 Drupal のブロックシステム

第 9 回 Drupal のブロックシステム

Drupal 9 及び 8 では 7 と比較してブロックシステムが大幅に進化しました。ブロックタイプを定義しフィールドを追加できるようになり、ブロックシステムの持つ可能性は大きく広がりました。

Drupal 8 Twigテンプレートで使用可能な関数

Drupal 8 Twigテンプレートで使用可能な関数

Twigには、テンプレート内で直接使用できる便利な関数が、たくさんあります。Drupalコアには、Drupal特有のカスタム関数がいくつか追加されています。この関数は、TwigExtensionクラスで定義されています。独自のカスタムTwig関数をカスタムモジュールで定義することもできます。