前のレッスンでは、PhpStorm の組み込みウォッチャーを使って LESS をコンパイルする方法を見ました。このチュートリアルでは、SASS Bootstrap をベースにテーマを作成します。LESS と PhpStorm を通じたコンパイルを扱えない場合は、Gulp と SASS を使ってみることができます。レッスンのこの段階では、LESS を使うか SASS を使うかは私たちにとって重要ではありません。しかし、SASS と Gulp を使うことをお勧めします。というのも、コンパイルがより速く、Gulp のほうが構成が簡単だからです。
Drupal 8 で開発を始める前に、キャッシュを無効にする必要があります。Drupal 7 とは異なり、Drupal 8 では、エンティティ、ビュー、フィールドだけでなく、コンパイルされた twig とレンダリングされたテンプレートもキャッシュされます。これらすべてのキャッシュを無効にするには、次のことを行う必要があります。
1. /sites/example.settings.local.php ファイルを /sites/default/settings.local.php ファイルにコピーします
このファイルには、キャッシュを無効にするために必要な設定がすでにあります
過去のレッスンで、別の Stable テーマをベースにテーマを作成する方法をすでに見ました。このチュートリアルでは、ページレイアウトを素早く作成するための人気フレームワークである Bootstrap をベースにテーマを作成する方法を紹介します。
すでに Drupal がインストールされていると思います。Bootstrap のインストールに移りましょう:
https://www.drupal.org/project/bootstrap
Drupal 7 とは異なり、Drupal 8 では、サイトのすべてのテーマをサイトのルートの /themes フォルダーに置きます:
Drupal には既成の美しく機能的なテーマがとても少ないです。しかし、Drupal はすべてのサードパーティライブラリやサービスと非常に簡単に統合できます。ですから例えば、Bootstrap をベースにテーマを作り、Drupal のすべての力を使えます。drupalbook.org サイトのこのセクションでは、任意のレイアウトから素早く便利にテーマを作成する方法を説明します。
PSD レイアウト:
https://drupalbook.org/sites/default/files/blueasy-freebie.zip
ソース:
https://github.com/Drupalbook/bootstrap
また、モバイル版とデスクトップ版に同じ HTML が使われるように、アダプティブに組む方法も見ていきます:
Drupal は CMS であるだけでなく、独自の Web アプリケーションを開発するためのプラットフォームです。独自のテーマを作成すると決めた場合は、そのためのフレームワークがいくつか見つかります。この記事では、その中で最も人気のあるものを検討します。
Bootstrap
https://www.drupal.org/project/bootstrap
Bootstrap は、独自のテーマを作れる最も人気のあるフレームワークです。CSS のセット、グリッドグリッド、javascript / jQuery プラグインを提供します。サイトのブロックをレイアウト上に素早く配置し、整えられます。
Zen
Views のテンプレートが私たちに合わないことが非常によくあるので、Views のテンプレートをオーバーライドできます。残念ながら、Views で目的のテンプレートを探す UI はありませんが、パターンを使ってテンプレートを再定義できます。
パターンについて詳しくはこの記事で:
6.6. Drupal でのテンプレートの操作。Drupal のコアにあるテンプレートとは。
特に、私たちが関心があるのはこれです:
以下は、オーバーライドするための可能なテンプレート名です。
View Name - foobar（マシン名）
Display format - unformatted（unformatted list、可能なオプションを追加）
Display Style - fields
Display Name — page
まず、カスタム javascript ファイルを私たちのテーマに組み込む方法に戻りましょう。.libraries.yml ファイルで、js を組み込む必要があります:
global-styling:
version: 1.x
css:
theme:
css/style.css: {}
css/print.css: { media: print }
js:
js/custom.js: {}
dependencies:
- core/jquery
- core/jquery.once
2 スペースになるようにインデントを守ることが重要です。これで、js/custom.js ファイルを組み込みました。しかし、これだけでは jQuery が私たちのために機能しません。実は、Drupal のコアは jQuery を必要とせず、jQuery を含みません。それは別途組み込む必要があります:
ブロックを表示できる新しいリージョンを持つには、次のことが必要です:
- theme.info.yml ファイルにリージョン情報を追加する
- page.html.twig を編集し、新しいリージョンの出力を追加する
drupalbook.info.yml ファイルにリージョンデータを追加する
すべてのリージョンは regions キーで統合されます:
# Regions
regions:
header: 'Header'
content: 'Content'
footer: 'Footer'
リージョンのマシン名は、PHP 変数と同様に、文字と数字で構成し、アンダースコアを使えます。読みやすい名前は、引用符で囲んでも、スペースがなければ囲まなくても指定できますが、常に同じように引用符で囲むほうが良いです。リージョンの読みやすい名前は管理パネルに表示され、マシン名は page.html.twig テンプレートで使われます。
Drupal に Twig が組み込まれていることと、その使い方はすでに見ました。この記事では、Drupal のテンプレートの操作方法、Stable テーマにあるテンプレート、Stable テンプレートの再定義方法、そしてさまざまな Drupal エンティティのテンプレートの再定義方法を説明します。
それでは、Stable テーマのテンプレートから始めましょう。Stable テーマの templates フォルダーに移動します:
テンプレートは機能属性に従って分けられています:
過去のチュートリアルで、すでに私たちのテーマに CSS を接続しました。そのために、drupalbook.info.yml ファイルで次を指定しました:
libraries:
- drupalbook/global-styling
次に、drupalbook.libraries.yml ファイルを作成し、そこでどの CSS ファイルを組み込むかを指定しました:
global-styling:
version: 1.x
css:
theme:
css/style.css: {}
css/print.css: { media: print }
これから、私たちのテーマで CSS を扱う方法を詳しく見ていきます。