7.2.1. Bootstrap をベースにしたテーマの作成。私たちのテーマで作業するために PhpStorm、LESS Compiler を設定する。

過去のレッスンで、別の Stable テーマをベースにテーマを作成する方法をすでに見ました。このチュートリアルでは、ページレイアウトを素早く作成するための人気フレームワークである Bootstrap をベースにテーマを作成する方法を紹介します。

すでに Drupal がインストールされていると思います。Bootstrap のインストールに移りましょう:

https://www.drupal.org/project/bootstrap

Drupal 7 とは異なり、Drupal 8 では、サイトのすべてのテーマをサイトのルートの /themes フォルダーに置きます:

Bootstrap をベースに独自のテーマを作成するには、サブテーマを作成する必要があります。サブテーマのフォルダーは、親テーマから直接取る必要があります:

/themes/bootstrap/starterkits/less

less フォルダーを、親の bootstrap テーマの隣の /themes フォルダーにコピーし、私たちのテーマの名前に変更します。私は drupalbook にします。また、THEMENAME.libraries.yml、THEMENAME.starterkit.yml、THEMENAME.theme のファイルを、THEMENAME の代わりに私たちのテーマの名前になるように名前変更します。例えば drupalbook.libraries.yml です。ただし THEMENAME.starterkit.yml は theme_name.yml に名前変更します:drupalbook.info.yml。

次に、drupalbook.info.yml ファイルに移動し、libraries セクションでも THEMENAME を名前変更します:

libraries:
  - 'drupalbook/global-styling'
  - 'drupalbook/bootstrap-scripts'

テーマの名前も名前変更するのが望ましいです:

name: 'Bootstrap Drupalbook Sub-Theme (LESS)'

テーマ設定ファイルも名前変更します:

/config/install/drupalbook.settings.yml
/config/schema/drupalbook.schema.yml

次に、フレームワークの bootstrap コードをコピーするだけです:

http://getbootstrap.com/getting-started/#download

私たちが関心があるのは、まだコンパイルされていない LESS ファイルで構成される bootstrap の Source code バージョンです:

https://getbootstrap.com/docs/4.3/getting-started/download/

私たちのサブテーマに bootstrap フォルダーを作成し、bootstrap ファイルをそこにコピーします。

コンパイル済みの CSS ファイルを持つ Bootstrap バージョンではなく、まさに Source code をコピーします。これは、私たちの Drupal テーマで bootstrap の変数を別々のファイルでオーバーライドできるようにするために必要です:

/less/overrides.less
/less/variable-overrides.less

bootstrap の SASS バージョンを使うこともできますが、その場合は SASS Compiler が必要です。私たちは LESS CSS Compiler を使います。PhpStorm に組み込まれているからです。

次に、appearance ページに移動して、私たちのテーマを有効にできます

/admin/appearance

bootstrap の SASS バージョンを使うこともできますが、その場合は SASS Compiler が必要です。私たちは LESS CSS Compiler を使います。PhpStorm に組み込まれているからです。

次に、Appearance ページに移動して、私たちのテーマを有効にできます

/admin/appearance

すぐには必要な bootstrap のスタイルはありません。それらはまだコンパイルする必要があります。そのために、PhpStorm のプラグイン Less Compiler を使います。PhpStorm の設定 File -> Settings に入りましょう。

• plugins 設定を見ます
• Plugins ページに移動します
• LESS という単語でプラグインを検索します
• LESS CSS Compiler Plugin を見つけます
• Install JetBrains plugin … を通じてインストールします

プラグインが見つからない場合は、公式ページからダウンロードします:

https://plugins.jetbrains.com/plugin/7059-less-css-compiler

そして、Install plugin from disk ... を通じてプラグインをインストールします

プラグインをインストールしたので、それを構成する必要があります。PhpStorm の設定に入り、設定で LESS という単語を探します:

プラスをクリックして LESS プロファイルを追加します。プロファイルに何か名前を付けます。例えば Bootstrap。各 PhpStorm プロジェクトごとに異なるプロファイルを作成する必要があります。

プロファイル設定で、次を指定します:

LESS source directory - C:\OpenServer\domains\drupal8\themes\drupalbook\less

これは私たちのテーマの less フォルダーへのパスで、bootstrap 自体の less フォルダーではなく、まさに私たちのテーマです。というのも、私たちの style.less ファイルから bootstrap ファイルを読み込むからです。

Include files by path - C:\OpenServer\domains\drupal8\themes\drupalbook\less\style.less

style.less ファイルだけを接続します。これは私たちのすべての less ファイルのコンパイルへのエントリーポイントです。実際、私たちは style.less ファイル 1 つだけをコンパイルし、残りはその中に含まれて自動的にコンパイルされます。

CSS output directory - C:\OpenServer\domains\drupal8\themes\drupalbook\css

style.less ファイル 1 つだけを含めるので、style.css ファイル 1 つだけがコンパイルされます。これはかなり便利で、多くのファイルの接続に悩む必要はありませんが、一方で、テーマで CSS を 1 行変える必要があるだけでも、常に bootstrap 全体をコンパイルします。

Compile automatically on save - 便利な機能で、Ctrl + S を押すかファイルを保存すると CSS を再コンパイルします。オンにしておくことをお勧めします。

これで Ctrl + S を押すと、LESS ファイルのコンパイルが始まります。style.less ファイルをクリックして Compile to CSS を選ぶことで、手動でコンパイルを呼び出すこともできます:

通常、コンパイルには 5～10 秒かかります:

すべてコンパイルされていれば、新しいスタイルが見られるはずです:

Drupal 管理パネルで javascript と CSS の集約を無効にするのを忘れないでください:
/admin/config/development/performance

デフォルトでは有効になっています。

これでページ作成を始められます。加えて、すでに組み込みのハンバーガーモバイルメニューとレスポンシブレイアウトがあります。

そのために、メニューブロックを Navigation (Collapsible) リージョンに配置します。

続くチュートリアルでは、Bootstrap 上の私たちのテーマ用に PSD レイアウトを作成します。