Sage | Wordpress Starter Theme インストール

Sage 公式

ducumentを読んでインストールしたので備忘録。

• 2017/8/22 時点

環境

• macOS

Theme Installation

手順

1. Wordpressのテーマディレクトリにフォルダを用意しコピー、Sageをインストール
2. composerがインストールされているか確認
3. WordpressのテーマディレクトリからCompeserを使ってインストール

/Users/~~~~~~~~~~~/wordpress/wp-content/themes

↑自分はVCCW でWordpressのローカル環境を構築しました！

vccw インストール　おすすめ

$ composer create-project roots/sage your-theme-name 8.5.3

• your-theme-name は自分のテーマ名
• composer create-projectは、対象のパッケージをgit cloneしてからcomposer install するのとほぼ同じことをしているようです。

Theme Development and Building

プロジェクトの依存関係のインストール

次の要件を満たしている必要があるようです。

• Node.js >= 4.5.0

npmのupdateも勧められていたので。

npm install -g npm@latest

• gulpとBowerをグローバルにインストール

npm install -g gulp bower

• テーマディレクトリに移動して

npm install

bower install

Theme Deployment

• Generating production ready assets
• フォルダをチェックするとgulpfile.jsが入っていることを確認

gulp --production

コンパイルされたのでwordpress上でcssが適応されているのを確認できるかと思います。

この先開発をしていく時に便利なのが
gulp watch
これでファイルの変更があった時に自動でコンパイルしてくれます。