WordPress
vagrant
Web
Sage
VCCW

【爆速】VCCW+Sage9でWordPressテーマ構築のススメ

More than 1 year has passed since last update.


概要

WordpressスターターテーマのSage9と、

VCCW(VagrantベースのWordpressテーマ開発環境構築ツール)の使い方を紹介します。


背景

クライアントから依頼を受けてWordpressテーマを開発する際、納品後の

保守のことも考えてテーマを構築しないといけません。

公開されているフレームワークを採用すれば

みんなが知っている、あるいはアクセスできうるフレームワークの仕様に従って

テーマを実装することになるので保守が楽になるのではないでしょうか。

ということでWordpressスターターテーマであるSageを紹介するに至りました。

それからSageはSASSやタスクランナーなどのイケイケな技術が使われているので

イケイケな技術を使ってみたい人にもおすすめ。


Sageについて


○外部リンク

公式サイト - https://roots.io/sage/

GitHubリポジトリ - https://github.com/roots/sage

リリース一覧 - [https://github.com/roots/sage/releases](https://github.com/roots/sage/releases


○動作要件


VCCWについて


外部リンク

公式サイト -http://vccw.cc/


動作要件



  • Vagrant 1.8.6 or later


  • VirtualBox 5.1.6 or later

  • wp-cliがインストールされていることとする


前提知識


  • コマンドラインの操作

  • HTML5、PHP、SASS

  • Webフロントタスクランナー

  • Vagrant

  • wp-cli


VCCWのインストール

まずSage9を動作させる前にVCCWをインストールして起動してみます。

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

ここまででインストール完了。

次にVCCWの環境を構築していきます。適当なディレクトリに移動して以下のコマンドを打ちます。

$ wp scaffold vccw sample.com --host=sample.com.dev --lang=ja


// sample.comディレクトリが作成されたと思うので移動
$ cd sample.com

すると以下のようなディレクトリ構成になっていると思います。

/────

   ├── .ansiable
├── ansiable関連のファイル
   ├── .editorconfig
   ├── .gitignore
   ├── .vagrant
├── vagrant関連のファイル
   ├── ansiable.cfg
   ├── LICENCE
   ├── Movefile
   ├── Provision
├── Provision関連のファイル
   ├── README.md
   ├── site.yml
   ├── Vagrantfile
   ├── wordpress
├── Wordpress関連のファイル(これからいじることになる)

こうなっていれば完璧です。

そのまま、そのディレクトリでvagrantを起動してみましょう!

$ vagrant up

// ↑待つ
// ブラウザでsample.com.devを開く


Sage9のインストールと初期化

// さっきのディレクトリからテーマのディレクトリに移動

$ cd wordpress/wp-content/themes

// Sage9のインストール
$ composer create-project roots/sage YOUR_THEME_NAME 9.0.0-beta.4

$ cd YOUR_THEME_NAME

// vagrantに接続
$ vagrant ssh

// vagrant上でテーマディレクトリまで移動
$ cd /vagrant/wordpress/wp-content/themes/YOUR_THEME_NAME

// PHP依存関係インストール
$ composer install

// vagrantから離脱
$ exit

// フロントの依存関係インストール
$ yarn

// 実行
$ yarn run start

ここまで無事到達したら

http://sample.com.dev/wp-admin にアクセス。

認証情報はデフォルトで

id: admin

password: admin

ログインしたら

管理画面>外観>テーマに移動、テーマをYOUR_THEME_NAMEに切り替えてみましょう。

きちんと表示されたらおっけーです。

これでテーマ開発の準備が整いました。

あとはターミナルでyarn run startを起動しっぱなしにしたまま

コードを書いていくだけです。

Sage9の細かい部分については公式ドキュメントをご覧ください。

一通りテーマができたらyarn run buildでdistに書き出せばOKです。