【VVV3.2対応】ローカル環境でWordPressを始めよう！

作成日2019年12月3日(火)

更新日2025年4月3日(木)

ひとりアドベントカレンダー3日目です。Reoです。

先日、久々にうるおいらんどの改修をしようと思ったところ、VVV のバージョンが変わり、結構導入手順が変わってしまっていることに気がつきました。

かなり前に書いた記事「VVV+WordMoveでWordPressのローカル環境を構築するぞッ！【Xserver】」の情報が古くなってしまったので、改めて書き直しをしようと思います。

このVVVの記事は、このブログで一番何度も読んだ記事です。WordPress をローカル環境で動かしたいときにいつも読んでいました。

WordMove については今回触れません。本番環境とｺﾞﾆｮｺﾞﾆｮしたい人は上記の記事を参考にしてください。

書いていたら、かなりはじめてのWordPress感が出てきました。初めてのWordPress、ローカル環境からはじめませんか？

環境

Mac OS 10.14.6
Vagrant 2.2.6
VirtualBox 6.0.14
VVV 3.2.0

まだ Mojave でやってます... Catalina にするとAdobeソフトの CS6が死ぬんだってのが怖くてあげてないです...

Vagrant と VirtualBox を導入

vagrant を導入します。

ターミナルで

brew cask install vagrant
brew cask install virtualbox

brew がないよ cask がないよという場合は Homebrew を導入しましょう。

以下をターミナルに打ち込んで導入してから上記を実行しましょう。


/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

VVVを導入

VVV(Varying-Vagrant-Vagrants)を導入します。WordPressサイトを構築してくれるやつです。

vagrantディレクトリを作ってから GitHub よりリポジトリをクローンします。

mkdir vagrant && cd vagrant
git clone https://github.com/Varying-Vagrant-Vagrants/VVV.git
cd VVV

これで ls をして中身がこうなってたらおｋです。

vagrant up で起動

起動しましょう。


vagrant up

Install local plugins には Y をしましょう。vagrant-hostsupdater という、127.0.0.1 とかではなく hogehoge.test で接続できるやつがインストールされます。

それが終わったらもう一度


vagrant up

をします。結構時間がかかります。お茶でも飲んでﾏﾀ-ﾘ ( ´ー｀)y-~~しましょう。

終わったら vvv.test に接続してみましょう。

失敗したら...

今ちょっと環境を作ったことがない Mac で試しながら書いているんですが、なんかエラーが出ました。

There was an error while executing `VBoxManage`, a CLI used by Vagrant for controlling VirtualBox. The command and stderr is shown below.

Command: ["hostonlyif", "create"]

Stderr: 0%... Progress state: NS_ERROR_FAILURE VBoxManage: error: Failed to create the host-only adapter VBoxManage: error: VBoxNetAdpCtl: Error while adding new interface: failed to open /dev/vboxnetctl: No such file or directory VBoxManage: error: Details: code NS_ERROR_FAILURE (0x80004005), component HostNetworkInterfaceWrap, interface IHostNetworkInterface VBoxManage: error: Context: "RTEXITCODE handleCreate(HandlerArg *)" at line 94 of file VBoxManageHostonly.cpp

こんなやつ。

こうなった場合、VirtualBox を入れるのに失敗してますね...。

もし、brew cask install virtualbox をした後に、許可がないよとかで設定のセキュリティとプライバシーであとから許可をしていた場合は失敗しているかもしれません。（私は今回それでした。）

許可をしてから、再度


brew cask install virtualbox

を実行して、その後にもう一度


vagrant up

をしてみてください。

可愛いクマさんに会えましたか？（クマじゃなかったらどうしよう）

vvv.test を開いてみましょう。

この画面がひらけたらおｋです。

config.yml を作成しよう

さて、ここからが VVV 3.2 からの変更点になります。

config.yml を作ることは同じなんですが、ファイルの場所が以前とは変わりました。

既に VVV 3.2 より前のバージョンを使っている場合は、git pull origin master で最新の VVV を落としてくるだけで自動でマイグレーションしてくれるはずです。

VVV/config/default-config.yml をコピーして、config.yml を作成します。


cp config/default-config.yml config/config.yml

config.yml を編集していきます。普通にエディタで開いた方が楽です。


vi config/config.yml // もしくは適当なエディタで開く

  vvv-test:
    skip_provisioning: false
    description: "WordPress and VVV test!"
    repo: https://github.com/Varying-Vagrant-Vagrants/custom-site-template.git
    hosts:
      - vvv-test.test

wordpress-one 等を書き換える形で大丈夫です。もしくはコピペして貼り付けましょう。インデントがおかしいと失敗するので気をつけてください。

config.yml を編集をした後は保存して


vagrant reload --provision

をしましょう。

config.yml の中身の説明

ドキュメントを見てください！！！！

https://varyingvagrantvagrants.org/docs/en-US/config/

丸投げだとちょっとアレなので。

sites: の後に追加したいサイトの設定を書いていきます。wordpress-default を見ていきましょう。

まず wordpress-default がサイト名になります。フォルダ等の名前になります。

repo

このリポジトリを元にしたサイトが構築されます。

https://github.com/Varying-Vagrant-Vagrants/custom-site-template を覗いてみてください。

最初はこのまま設定しておきましょう！

古いバージョンから使っていて、vv を用いてサイトを構築した等の場合は、必要ないです。

vm_dir / local_dir

VirtualBox内とローカルでのパスを書きます。書かなくても自動で作成されます。

branch

repo を使うときにどの branch から取得するかを決めます。

skip_provisioning

いくつかのサイトを構築した場合、もし使用してないやつがあれば false にしておきましょう。true のもののみ provisioning されます。

また使うときになったら true にしましょう。

allow_customfile

難しいことが書いてありました。provisioning中にRubyを使用する場合等に使うらしいです。false もしくは書かなくておｋです。

nginx_upstream

PHPのversionを指定できます。 php72 等で設定できます。

hosts

ドメインとホストを定義します。サイト名.test がオススメです。

理由についてはhttps://varyingvagrantvagrants.org/docs/en-US/troubleshooting/dev-tld/を参照してください。

雑ですが適当にこんなかんじです。

で、結局のところ何を書けば構築できるかというと、さっきの

  vvv-test:
    skip_provisioning: false
    description: "WordPress and VVV test!"
    repo: https://github.com/Varying-Vagrant-Vagrants/custom-site-template.git
    hosts:
      - vvv-test.test

だけ書いておけばとりあえず大丈夫です。

vagrant reload --provision が無事完了していれば、先ほど作ったホスト名（今回はvvv-test.test)にブラウザでアクセスしてWordPressのサイトが見れればおｋです！

やったぜ。

もしこんな画面が出たら...

こういうのが出たら、失敗しています。

repoにhttps://github.com/Varying-Vagrant-Vagrants/custom-site-template.gitを設定してみる、インデントを確認する等をしてやり直してみてください。

管理画面に接続してみよう

さてさて、これでWordPressのローカル環境が構築されました。

管理画面は、先ほどの例だと、vvv-test.test/wp-admin でログイン画面に移動します。

ユーザ名は admin, パスワードは password に設定されています。

テーマを追加してみよう

あとはもう好きなように作るだけ！になります。

最後にテーマを配置するところまでやってみようと思います。

VVV では、VVV/www/サイト名(vvv-test)/public_html/wp-content/themes/ にテーマを設置します。

適当に sample フォルダを作ってその中に、index.php と style.css を配置しましょう。

index.php の中身はとりあえず空で大丈夫です。確認用に好きな文字でもいれておいてください。

style.css の中に

@charset "UTF-8";
/*
Theme Name: Sample
Description: サンプルです。
*/

適当にテーマの名前を書いて保存しましょう。

そして管理画面から、外観 > テーマ (英語なら Appearance > Theme）で先ほど作った Sample ができていれば有効化しましょう。

これで、テーマを作る準備ができました。

おわりに

この方法を使えば、サーバーを用意してなくても WordPress を試すことができます。

WordMove を組み合わせて、ローカル環境をコマンド一つで本番環境に反映させることもできます。本番環境から持ってくることもできます。 WordMove については、昔の記事の方「VVV+WordMoveでWordPressのローカル環境を構築するぞッ！【Xserver】」を参照してください。

WordMove を使わなくても、FTP等でやる場合でもローカルで作っておいて損はないと思います。

WordPress のテーマを作ってみたい、プラグインを作ってみたい、そういう方は是非是非導入してみてください！

VVV3.2 になって、以前までサイト構築に利用していた vv を使わなくて良くなりました。逆に vv を使うと失敗してハマってしまう場合があります。（なんもドキュメント読んでなくて結構ハマった）

ドキュメントがしっかりしてますので、そちらもご確認ください！

https://varyingvagrantvagrants.org/

それではでは、良い WordPress ライフを！

アドベントカレンダー3日目にしてクソ長記事を書いてしまった...毎日3000字以上とか死ぬのでは...今日なんて5000字超えてしまったんだけど...

明日はちょっと楽するかもしれません。いや、頑張ります。あと、prism.js がちょっと調子悪くて2行じゃないと反映してくれないのでそのうち直しますorz

参考リンク

追記

(追記日: 2020-03-18)

あまりにもキレイな3日坊主で感動した。

公開日2019年12月3日(火)

更新日2025年4月3日(木)