Stable テーマの page.html.twig テンプレートファイルを開くと:
/core/themes/stable/templates/layout/page.html.twig
Drupal 7 の page.tpl.php テンプレートと異なることがわかります。まず拡張子で、次に波括弧 {} が多いことで。これはすべて、Drupal が Twig テンプレートエンジンを使っているからです。
この記事から、Drupal で私たちのテーマ作りを行っていきます。チュートリアルのこのセクションでは、Drupal のテーマの基本、どこに何があるか、CSS、JavaScript の組み込みと使い方を分析します。私たちのテーマを作るには、コアのテーマビルダー Stable をベースにします。Drupal を学びたいなら、Stable は素晴らしい出発点です。Bootstrap から始めるべきではありません。絶えず疑問やエラーが出てきます。チュートリアルの次のセクションでは、Drupal のテーマ作成に関する知識を持って、Bootstrap で作業を始めます。
こちらが公式ドキュメントです
https://www.drupal.org/theme-guide/8
私たちのテーマ用のフォルダーを作成します
すべての新しいテーマを /themes フォルダーに置きます。drupal 7 の sites/all/themes のようにフォルダーを置くこともできますが、新しい Drupal のファイル構造を使い、/themes フォルダーに置くのが最善です。
Drupal 7 では、Zen 上でサブテーマを素早く簡単に作り、ウェブサイトの構築を始められました。Drupal 8 でも、独自のテーマを作成するためのテーマビルダーがいくつかあります。しかし、それらでサブテーマを作る前に、どこに何があるかを少し理解する必要があります。
Drupal の開発者は、Stark サンプルテーマを検討することを提案しています。このテーマは、テーマがどう構成されているかに慣れるためだけに Drupal に追加されました。このテーマの中に何があるか見てみましょう:
Stark.info.yml ファイル
stark.info.yml ファイルから見ていきます。以前 Drupal 7 では、テーマデータは .info ファイルに保存されていましたが、Drupal 8 ではどこでも YML を使うので、.info ファイルは今では YML 形式の info.yml です。YML 形式では、キーと値はコロンで区切られます
テーマ名:
name: Stark
プロジェクトのタイプはテーマ、モジュールがあり得ます。私たちはこれをテーマとして持っています。
Zen は Drupal で最も人気のあるビルダーテーマです。3 カラムレイアウトをベースにサイトのレスポンシブデザインを素早く作る必要があるなら、Zen がまさに必要なものです。インストールして npm install を実行するだけで、Zen がデザインの基盤を用意してくれます。順を追って見ていきましょう。
公式ウェブサイトから Zen 親テーマをダウンロードします:
https://www.drupal.org/project/zen
Drupal 8 では、テーマを直接 /themes フォルダーに置けるので、テーマのフォルダーをそこに置きます。
/themes/zen/STARTERKIT フォルダーには、手動で独自のサブテーマを作れるサブテーマがあります。そのためには、どこでも STARTERKIT をあなたのテーマ名に置き換え、Zen テーマをアップグレードするときに新しいサブテーマが失われないように、新しいサブテーマのフォルダーを /themes/zen フォルダーから移動する必要があります。しかし、drush かテーマジェネレーターを使うことを強くお勧めします。
まず、Views を使ってブロックとページを表示する方法を学ぶ必要があります。ページから始めましょう。サイトのすべての記事を表示します。
Views を通じたページ出力。
最初のビューを作成しましょう。メニュー Manage - Structure — Views に移動します。
次に、ビューの名前を入力し、何を表示するか――Content、comments、users、taxonomies（今は記事を表示します）――を選ぶ必要があります。コンテンツタイプ Article でフィルターを選択します。ソートでは、新しい記事が先に来るように指定します:
この動画では、強力なフォームビルダー Webform の扱い方を探ります。modules ページに移動しましょう。webform を作成するには、Webform と Webform UI モジュールを有効にする必要があります。webform をノードページとして表示したい場合は、Webform Node モジュールが必要になります。
前の記事では、Views Slideshow を使ってスライドショーを作りました。しかし、まだ小さな画像付きのスタイリングされていないページネーターがあります。
この記事では、OwlCarousel を追加し、追加のライブラリを使って CSS を追加する方法を見ていきます。
この記事では、OwlCarousel を接続するためにカスタムモジュールを使いますが、次回はテーマのファイルでスライドショーをスタイリングします。
https://drupalbook.org/sites/default/files/inline-images/drupalbook_owlcarousel.zip
スライドショーの作成方法は前の記事で読めます:
Drupal は新しい Twig テンプレートエンジンを使っています。したがって、すべてのテーマがそれ向けに作り直されました。/core/themes フォルダーに何があるか見てみましょう
Twig テンプレート、ビルダーテーマ classy、stable、stark、既成のテーマ bartik、seven があります。
Twig テンプレート
Drupal は Symfony ライブラリの一部を組み込んでいます:
Drupal 8 のテーマ作成は変わりました。これは主に、オブジェクト指向プログラミングへの移行と twig テンプレートエンジンの使用によるものです。以前は PHP、HTML、CSS を少し学べば独自のテーマの作成を始められましたが、今では twig も理解する必要があります。一方でこれは Drupal の開発を複雑にしますが、他方で開発プロセスを簡素化します。テンプレートエンジンを使うのは、ある専門家が機能の開発に特化し、他の人がサイトのフロントエンド開発に特化するような開発者グループにとって、より便利です。
各新しい技術と開発アプローチを徐々に習得する必要があります:SASS、Twig、Grunt、bootstrap――これらすべては、Web アプリケーション開発の標準になって久しいです。それでは、これらすべての使い方を理解していきましょう。
Drupal サイトのプロモーションを始めるときに最初にすべきことは、SEO Checklist モジュールをインストールすることです:
https://www.drupal.org/project/seo_checklist
これは、まったく何もしないモジュールの中で最も役立つものです。このモジュールはサイトに新しい機能を追加せず、エラーを修正せず、サイトが検索結果のトップに到達することを保証しません。しかし、チェックリストを提供してくれます。そこには、人気のクエリに近づくためにすべきことが書かれています。
Configuration - SEO Checklist ページにアクセスします: