_S+Bootstrap4のWPテーマUnderStrapを使ってみた

Bootstrap

公式サイト
https://understrap.com/

小テーマをzipでダウンロード
https://github.com/understrap/understrap-child

各zipを解凍してテーマフォルダに入れる
wp-content/themes/understrap-child/

以下のようなメッセージがテーマ編集ページで出るので親テーマをインストールします。
UnderStrap

以下Gulpを動かすの手順(Local by FlywheelでローカルWPを動かした場合)
小テーマフォルダで

でモジュールインストール

/gulpconfig.jsonというファイルがあるので、Local by Flywheelのドメイン情報とあわせる。

スポンサードリンク

 

UnderStrap
こんな感じだったら
"browserSyncOptions" : {
"proxy": "understrap.test",
"notify": false
},

の様に書き換える。ちなみにLocal by Flywheelの初期設定.localだと、うまく読み込みされないので適当なものに変更。


Sassの追加

カスタム用のcssを/sass/theme/understrap.scssの中でインポートします。


Font Awesome5に変更する

デフォルトではFont Awesome4が使われているので、最新のバージョンに変更しましょう。
gulpfile.js
180行目あたりを以下に変更

211行目辺りを以下に変更(Deleting the files distributed by the copy-assets taskとある箇所)


ターミナルでv5をインストールします。

./sass/assests/font-awesome.scssを以下に変更します。


続く……かも。