DrupalのBootstrapテーマからカスタムテーマを作成する

自分用の忘備録です〜!!

このページはDrupalというPHPベースのCSMを利用して構築しています。
元々格安のレンタルサーバ借りて管理していたのですが、
sshでの接続が出来なかったり、DBへのアクセスが管理用のページから経由しか出来ず何かと不便ななか利用していました。

それが先月、サイトが急にアクセスできない状態になり、しかもサーバレンタル料の値上げの連絡...
前述下通り、何かと不便なことが多かったのもあり、思い切ってGCP(Google Cloud Platform)に移行して構築をしています。
ということで、色々いじれるようになったので、デザインを少しずついじったり、SSL導入したり色々遊んでいます。

実験的にいじったりもしているので、忘備録を込めて書いていけたらと思います。
忘備録なので、細かいところとかすっ飛ばして書きます。のであまり参考にならないと思うw

ということで、今回は、「DrupalのBootstrapテーマからカスタムテーマを作成する」です。

既にBootstrapのテーマを導入している程で書きます。

1. "themes/bootsrap/starterkits"配下から、自分が利用したいベースを選択し、それを、themes配下にコピーします。
自分は、SASSが利用したかったので、sassディレクトリをthemes/配下にコピーして名称を変更。
これで、以下のようなディレクトリ構造ができたと思います。

themes/
  ├ bootstrap/
  └ MY_THEME/

基本的には、これであとは編集していくだけなのですが、ここでsassを選択したのが、この後の苦戦に繋がりました...

sassは、コンパイルを行いcssに変換する必要があるのですが...その前に、

2. bootstrap-sassをダウンロードし、bootstrapと名称を変換し、MY_THEME/配下に設置
3. sassをコンパイルし、css/style.cssを生成する。
とこれが、コンパイルエラーが出まくる。。。
色々調べたところ次の方法で解決しました。

   1. npmを利用し、bootstrap-sassをインストール
   2. style.scssを以下のように書き換える。
   @import '../bootstrap/assets/stylesheets/bootstrap';
   ↓
   @import '~bootstrap-sass/assets/stylesheets/bootstrap';

たったこれだけ!!!
これだけで無事にコンパイルが通るようになりました!!
これ解決するのに数時間かかってしまいました...
多分Webpackを使って、コンパイルかけてるのもあるんだろうなぁ!!

ついでにカスタムテーマのテンプレートの修正の仕方。
1. カスタマイズしたいテンプレートを、themes/bootstrap/templates/から、themes/MY_THEME/templatesにコピー
必要なテンプレートを持っていくだけで大丈夫だと思うけど、page.tmp.phpだったら、page.*を全部持って行ったら間違いない。
2. "xxx.func.php"や"xxx.vars.php"の場合は、内部のファンクション名もカスタムテンプレートのディレクトリ名に合わせて修正する必要がある。
function bootstrap_preprocess_html()
↓
function MY_THEME_preprocess_html()

のような感じ!!

まぁDrupalは日本語のドキュメントほとんどないし、使っている人少なそうだから本当に自分向けの忘備録でしかないなw

こういうことも今後書いていこうと思っているので、もし興味があれば〜!!!

Drupal
Drupal for Bootstrap3
Drupal Bootstrap Documentation