wordpressテーマ作成をする環境をvccwで構築する手順

vccwを使って、wordpressのテーマを作成する環境を構築する方法を書いていきます(自分用のメモの意味も込めて)。既存のwordpressのテーマを編集する、新規にテーマを作成する、両方ともをターゲットに書いていきます。

環境は、win7でNetBeansを使います。また、Vagrant、VirtualBox、PuTTY、gitをインストールしているとします。

vccwをgit cloneする

エクスプローラで、新しいプロジェクト用のフォルダを作成します。右クリックから「Git Bash」を選択し、次を実行します。

git clone https://github.com/vccw-team/vccw

NetBeansで新規プロジェクト作成

NetBeansで新規プロジェクトを作成します。「既存のソースを使用」を選択します。ソースフォルダには、先ほど作成したフォルダを指定します。

gitリポジトリの初期化

NetBeansで、先ほど作ったプロジェクトを右クリックして、「バージョン管理⇒Gitリポジトリの初期化」を選びます。先ほど作成したフォルダをルートパスに指定します。この時点で、vccwフォルダと.gitフォルダができているはずです。

vccwの設定を行う

vccwは2.0から設定ファイルの作成方法が変わりました。まず、vccw/provision下にある、「default.yml」をコピーします。それをvccw下に貼り付けて、「site.yml」に名前を変更します。

次に、「site.yml」で、次の項目を変えます。

ip:192.168.以下ユニークな数字
sync_folder: '../' (vccwと同階層にwordpressを入れたい)
version: latest ('4.1'などにすることもある)
lang: ja
document_root: '/var/www/html'
wp_home: ''
wp_siteurl: 'wp' (使用中のフォルダ階層にあわせる)
db_prefix: wp_ (使用中のprefixにあわせる)
plugins: (wordpress-importer等を入れておく)

共有フォルダ(sync_folder)は、仮想環境と同期させるPC側のフォルダの設定です。site.ymlから見たパスを書きます。上の設定では、vccwフォルダと同階層にwordpressのファイルが展開されます。

versionは「latest」とするとそのときに得られる最新版のwordpressがインストールされます。lang:jaは日本語のことですが、たまに最新版が英語しかない場合は「日本語がないよ」というエラーが出ることがあります。このとき、wordpressは何もインストールされないので、versionを指定しましょう。

wp_homeはブラウザに表示されるもので、wp_siteurlはdocument_rootから見たwordpressフォルダの場所です。wp_homeをwpにすると、「http://wordpress.local/wp」にアクセスすることになります。既存のwordpressを改修する場合は、構成を合わせておいた方がいいです。

db_prefixはデータベースのprefixです。既存のwordpressを改修する場合は、あわせておきます。

また、ここまでやったらNetBeansのプロジェクトのプロパティを開き、実行構成のプロジェクトURLを上のipと一致させておきましょう。これで、プロジェクトを実行したらwordpressが立ち上がるようになります(もちろん、仮想環境が動いているときに限るけど)。

vagrant up

git bashでvccwフォルダに移動し、vagrant upします。

NetBeansからvagrant upしたい場合は、プロジェクトプロパティでvagrant rootをvccwフォルダに指定しておきます。これをするには、事前にNetBeansにvagrantプラグインが必要です。

数分かかるので、しばらく待ちます。(既存のwordpressを改修する場合で、もしまだデータベースからデータを落としていない場合は、下の「既存データの取得」を見て落としておきましょう)

.gitignoreファイルの編集

wordpressと同階層、または直下に.gitignoreファイルができあがります(vccw直下のものではない)。これを次のように変えます。

/.htaccess
/index.php
/wordpress/*.*
/wordpress/wp-admin
/wordpress/wp-includes
/wordpress/wp-content/*
!/wordpress/wp-content/themes
/wordpress/wp-content/themes/twenty*
/wordpress/wp-content/themes/index.php

wordpressそのものを開発するなどの場合は、デフォルトの.gitignoreファイルを使えばいいんでしょうけど、テーマ開発の場合はそんなにgit管理をする必要はないと思います。上の設定によって、twentyなんちゃら以外のテーマとgitignoreファイルがgit管理対象になります。

これで、git commitして、テーマを編集・作成していけばいいんじゃないかなと思います。

プロジェクトを実行すると、デフォルトのデータが入ったwordpressが表示されます。新規作成の場合は、ここで終了です。ダミーデータが欲しければ、theme-test-data-jaが便利です。site.ymlの中でも設定できますが。

もし、既存のwordpressのテーマを編集する場合で、元のデータをインポートしたい場合は次以降のステップも行います。

PuTTY立ち上げ

PuTTYを立ち上げて、接続先にsite.yml内で指定したipを入力してセッションを保存し、開きます(ssh接続)。

既存データの取得

現在使っているwordpressのデータを落としてきます。「データベースのバックアップ」を参考にして、落としてきましょう。

データベースのインポート

上で落としてきたデータを、共有フォルダ内に置きます(PC内のwordpressフォルダ下とか)。

PuTTYで、次を実行します。

wp db import sqlファイルの場所

これでデータベースはインポートされます。しかし、データベース内に書かれているURLが本番環境と仮想環境では異なるため、次を実行します。

データベース内のURL変換

データベース内に書かれているURLを、本番環境のものから仮想環境のものに変えるため、次を実行します。

wp search-replace 'http://example.com' 'http://ip'

'http://example.com'は現在のwordpressサイトのURL、'http://ip'はsite.ymlで設定したipです。変換が成功すれば、何件かreplacementが起こっているはずです。もし0件だった場合は、データベースのprefixが間違っているかもしれません。

URLの変換がすんでも、本番環境で使っているテーマが仮想環境にないと、画面はまっしろになってしまいます。ですので、使用中のテーマをコピペしてきましょう。

まとめ

一度vccwで構築して、destroyのあとにupした場合、テーマなどは上書きされません。destroyした時にデータベースは破棄されるため、データのインポートは必要になりますが、そんなに大変な作業でもないと思います。vccwはテーマの作成にも大変便利ですね。

前の記事:
VagrantでCentOSにphpやMySQLやphpMyAdminを入れるよ、Chefなしで
次の記事:
BootstrapのTooltipの中身を途中で変更する