WordPress+Vagrant+VCCW+Gulp+UnderStrapのインストールと簡単環境構築

毎回ローカルでの環境構築の際に調べるのが面倒になってきたので自分のブログにまとめました。

wp-cliをインストール

wp-cliとはターミナルからコマンドを使ってWordPressをインストールできる便利なやつです。いちいち.zipをダウンロードして解凍してインストールみたいな作業が面倒くさいのでインストールします。

ターミナル

$ curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
$ php wp-cli.phar --info
$ chmod +x wp-cli.phar
$ sudo mv wp-cli.phar /usr/local/bin/wp

以下のようにwp –infoを打ち込んでPHPのバージョンが表示されれば成功です。

ターミナル

$ wp --info
PHP binary: /usr/bin/php
PHP version: 5.6.27
php.ini used:
WP-CLI root dir: phar://wp-cli.phar
WP-CLI packages dir:
WP-CLI global config:
WP-CLI project config:
WP-CLI version: 1.1.0

VCCWをインストール

以下のコマンドを打ち込んでvccwをインストールしましょう。

ターミナル

$ wp package install vccw/scaffold-vccw:@stable

メモリーのエラーが出た場合

自分の場合は以下のようにメモリが足りないぞ!っていうエラーがでてハマりました。エラーが出なかった方は読み飛ばして下さい。

コマンド

$ wp package install vccw/scaffold-vccw:@stable
Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 33 bytes) in phar:///usr/local/bin/wp/vendor/composer/composer/src/Composer/Json/JsonFile.php on line 266

解決方法は、php.iniのファイルを探し、memory_limitを128MBから512MBに変更して下さい

ターミナル

php --ini
Configuration File (php.ini) Path: /usr/local/etc/php/7.0
Loaded Configuration File: /usr/local/etc/php/7.0/php.ini
Scan for additional .ini files in: /usr/local/etc/php/7.0/conf.d
Additional .ini files parsed: (none)

php –iniでphp.iniの場所を確認。

php.ini

memory_limit = 128M

/usr/local/etc/php/7.0/php.iniのファイルの中にあるmemory_limitとという項目を探し、512MBに変更。

再度、以下のコマンドを打ち込んで、vccwをインストールして下さい。

ターミナル

$ wp package install vccw/scaffold-vccw:@stable

任意のディレクトリーに移動してVCCWの開発環境を作る

ターミナル

$ wp scaffold vccw abc.com #abc.comは適宜変更

任意の作業ディレクトリに移動し、上記のコマンドを実行。abc.comはフォルダ名になるので適宜変更して下さい。

ターミナル

$ cd abc.com #abc.comへ移動
$ tree -L 1 #treeコマンドでファイルを確認
.
├── LICENSE
├── README.md
├── Vagrantfile
├── ansible.cfg
├── provision
└── site.yml

すると、「abc.com」のフォルダの中に上記のようなファイルが作成されます。

site.yml

hostname: abc.com
lang: ja

出力されたsite.ymlを開き、適宜変更して下さい。自分は上記のようにhostnameとlangをいじってます。またローカル内にvccwで複数のWPサイトの開発環境を構築する場合はhostnameがかぶるとエラーがでますので注意して下さい。

ターミナル

$ vagrant up

準備ができたら、vagrant upコマンドを打ち込みましょう。初回は少々時間がかかりますが、無事WordPressのインストールができたらsite.ymlで入力した「hostname」のドメインにブラウザでアクセスするとWordPressのサイトが表示されます。

WELCOME TO THE VCCW
Hello VCCW.

ターミナル

$ tree -L 1
.
├── LICENSE
├── Movefile
├── README.md
├── Vagrantfile
├── ansible.cfg
├── provision
├── site.yml
└── wordpress

又作業ディレクトリに上記のようにwordpressというフォルダが作成されています。テーマファイルはこの中に入っています。(例:wordpress/wp-content/themes)

UnderStrapのテーマインストール

UnderStrap

自分はGulpの初期設定がしてある、UnderStrapというWordPressテーマを使っています。まずは上記のリンク先からUnderStrapをDLしましょう。インストールしたらWPのテーマフォルダにunderstrapをコピーし、WPの管理画面からテーマを適用して下さい。

Gulpのインストール

ターミナル

$ node -v
v7.7.1
$ npm -v
4.4.2

まずはnode.jsとnpmが入っているか確認してください。入っていなければ別途インストールが必要です。今回はその方法は省略します。

ターミナル

$ npm i -g gulp
$ gulp -v

Gulpをグローバルにインストールして下さい。gulp -vでバージョンが表示されればOK。

ターミナル

$ cd wordpress/wp-content/themes/テーマ名 #テーマ名は適宜変更
$ npm i

テーマディレクトリに移動し、npm installを実行し、package.jsonに記載されてるパッケージをインストールして下さい。

ターミナル

$ gulp watch
[14:50:54] Using gulpfile ~/abc.com/wordpress/wp-content/themes/テーマ名/gulpfile.js
[14:50:54] Starting 'watch'...
[14:50:54] Finished 'watch' after 24 ms

gulp watchでGulpが実行されれば無事完了です。お疲れ様でした。ゴリゴリ開発して下さい。

© 2011 - 2017 ShoYamane