ローカルにWordPress+FoundationPress環境を構築する


Varying-Vagrant-Vagrants ver1.2 を使ってWordPress開発環境をMacに作って、更にZURBのFoundationPress ver5.4.7をインストールするまで。
執筆時点での各バージョンも書いておきます。

Varying-Vagrant-Vagrantsのインストール

まずはVirtualBox 4.3.20をインストール
次はvagrant 1.6.5もインストール

hostsupdaterをインストール

$ vagrant plugin install vagrant-hostsupdater

でgit cloneします。

$ git clone git://github.com/10up/varying-vagrant-vagrants.git vagrant-local

$ cd vagrant-local
$ vagrant up

WordPress日本語版をダウンロード&解凍しておいて

wordpress-default

この中にドロップしましょう。どうもそのまま日本語化が出来なかったのでこんなスマートではない方法になってしまいました。

http://local.wordpress.dev/wp-admin
から入ります。ユーザ admin
パスワードはpassword

FoundationPressのインストール

FoundationPressをダウンロードします。
バージョン管理のためにGitHub for Macを立ち上げます。

Open
ここに任意の名前(ここではexample)でリポジトリを作りそこに先ほど解凍しておいたFoundationPressの中をそのままドロップします。

$ cd /Users/Desktop/vagrant-local/www/wordpress-default/wp-content/themes/example
$ sudo npm install && bower install && grunt build
$ grunt

これで開発環境が整いました。
あとはグリグリいろんなところをいじくるだけ。

編集するところ

style_css_-__Users_satouatsushi_Desktop_vagrant-local_www_wordpress-default_wp-content_themes_nittosha_-_Atom

注意点

_setting.scssを編集すればOKなのですが、topbarナビゲーションのアクティブのところだけ、#272727になってしまいますので注意が必要です。

scss>site>_structure.scssを編集します。

// A more subtle background color for the active menu item
.top-bar-section li.active:not(.has-form) a:not(.button)  {
	background: #272727;
}
.top-bar-section li.active:not(.has-form) a:hover:not(.button) {
	background: #202020;
}

ここの#以下を任意の色に変える必要があります。

ご自由にどうぞ