自分のサイトのテーマをカスタマイズするためのコーディング環境を作るためのメモ書きです。
やりたいこと
WordPressのカスタマイズしたテーマを作りたい（まずは自分のサイト用に）のでその環境作り
要件：
- 環境(OS)はMac(OSX El Capitan)
- エディタはBrackets(Ver.1.6.0)を使用
- ローカル環境で修正結果を確認しながら編集したい
- CSSはSCSSで編集してコンパイル
- ライブプレビューしながら編集したいので、コンパイルはソース編集時に自動的に実施
方針
BracketsでHTMLのライブプレビューできるのは知ってるのですが、WordPressと組み合わせる方法がよくわかなかったので、以下の方針で環境構築してみることにしました。
- WordPressの動くローカル環境作る
- ベースとなるテーマをインストール
- インストールしたテーマのファイルをBracketsでSCSS編集
- SCSSを自動コンパイル
- ブラウザでライブプレビュー
1.ローカル環境構築
最もポピュラーそうなMAMPを使用することにしました。
ここにWordPressをインストールします。
インストール方法はこちら↓を参照させてもらいました。
Macでローカル環境にWordPressをインストールする
2.ベースのテーマ選定とインストール
テーマをまっさらから作るのは大変なのでベースのテーマを選びます。
デフォルトのtwentysixteenの子テーマを作ろうかとも考えたんですが、いろいろなブランクテーマがある中からベースのテーマは Bones にすることにしました。
Bones にはすでにSCSSファイルが用意されてるというのが決め手でこちらを使用することに決定。
Bones - The HTML5 Wordpress Starter Theme からダウンロードしてインストールします。
eddiemachado-bones-79c7610がダウンロードされました（2016/05/27現在）のでWordPressのthemesフォルダにコピーします。
＊確かにlibraryフォルダにSCSSファイル用意してあるので、こやつらをいじっていけばよいらしい。
＊config.rbを見るとcompass用に記述されてるようなので、compassのインストールが必要そう。
3.SASS(SCSS)とCompassのインストール
＊OSX El Capitanでは/usr/binに制限あるらしいので下記で sass と compass をインストール
sudo gem install -n /usr/local/bin sass
sudo gem install -n /usr/local/bin compass
4.ファイル監視と自動コンパイルの設定
Bones にはすでに config.rb が記述されてるのであとは Compass に任せれば良い。
scssファルダに移動して compass watch 実行する。
cd /Applications/MAMP/htdocs/wordpress/wp-content/themes/eddiemachado-bones-79c7610/library/scss
compass watch
5. Bracketsでライブプレビュー
- Bracketsで (index.phpのある)
/Applications/MAMP/htdocs/wordpressフォルダを開く。 - ライブプレビューボタンを押す。
- ライブプレビューのURLを
http://localhost:8888/wordpress/に指定 - Chromeが立ち上がってWordPressのサイト画面が表示される！
6.あとはSCSS編集
編集するのは /Applications/MAMP/htdocs/wordpress/wp-content/themes/eddiemachado-bones-79c7610/library/scss 内の*.scssファイル
編集したファイルを保存するとコンパイル実行されライブプレビューの画面内容が更新された！
6.その他
編集するソースはMAMPのアプリケーションフォルダ内には置きたくなかったので、テーマファイルを別フォルダにしてエイリアスを作り、themesに置いてみたがwordpressが認識してくれなかった。
仕方ないのでそのままにしてある。（どなたかいい方法知りませんか？）