WordPressをバーチャルホストでローカル環境を作成する

WordPressをいじることが多くなってくると、個人で小さくやる分は本番環境で色々いじることが多いのでしょう。とはいえ、functions.phpをいじってミスったりすると、真っ白になる、または動きがおかしくなるのでバックアップが必須です。

とはいえ、ここでバックアップをした上で触るという人なら、そもそもローカル環境等テスト環境を用意しているような気がしたります。

おすすめというか、本来あるべき姿として、自由にいじれるローカル環境を構築すべきとなります。とはいえこのバーチャルホストやローカル環境自体はやや知識が必要となってくるので、万人向けとは言い難いです(本来はやったほうがいいが、手間ということでやらない選択肢もあり、ただしそのリスクを負うべきというだけですね)。

自分もわりと懲りたので、ローカル環境を一つでなく複数作っておいてそこでテストするということをしています。そのためのバーチャルホストですが、今回はそんな複数環境作成メモです。

とくに、WordpressサイトのURL絡みでハマったのでそのメモも入れておきました。

前提条件

条件というか、以下を済ましてある前提です。

  • Xampp等環境がすでに入っている(具体的にはApacheなどのWebサーバ、PHP、データベースはMySQLですね)
  • ローカル環境でWordpressを動かすということが文字通り分かる(例えばネットに繋がってないと動かないというような認識だときついなど)
  • 1つの環境でなく複数環境が欲しい(今回1つしか環境がいらないなら、バーチャルホストは手間であり面倒なのでメリットを享受しづらいからおすすめしません)

というところです。

Xamppが古すぎると動きも違うかもしれませんが、執筆時点ではWindows向けはXAMPP Version: 7.4.11が最新です。

バーチャルホストのメリット

まずバーチャルホストですが、僕は仮想ホスト名という理解をしています。

例えば、

http://localhost/wordpress/

みたいな感じでフォルダイメージもありですが、

http://local.host.com/

のほうがスッキリしています。さらにこのホスト名に環境意味合いをもたせれば、本番環境と間違えるとかも防げますし(管理画面が酷使してくる)、ローカル環境同士の違いも明確になります。こっちのほうがメリットが大きいですね。

メリットは大きいのですがこの設定がやや面倒(文字通りややですが)なので、設定せずに使う人も多そうです。

設定のやり方

メインの話はここです。

バーチャルホストを設定することで、例えば、http://local.js.comみたいなアドレスでアクセス出来るわけですね。

1.Windowsのhostsファイルを編集する

管理者権限で実行したメモ帳なりテキストエディタなりでやりましょう。Windows10なら、スタートアイコン押して半角で「note」などと入れればメモ帳が出てくるので、そこで右クリックして管理者として実行を押しましょう。

メモ帳を開いたら、開くから「C:\Windows\System32\drivers\etc\hosts」を開いて編集しましょう。

hostsファイルは、ローカルアドレスの127.0.0.1と任意のバーチャルホスト名を入れればオッケーです。以下は例です。

127.0.0.1	local.js.com

2.apacheのhttpd-vhosts.confを編集

C:\xampp\apache\conf\extra\httpd-vhosts.confを修正します。

ポイントは、

NameVirtualHost *:80

を追加しつつ、

<VirtualHost *:80>
    ServerName local.js.com
    DocumentRoot "ワードプレスのディレクトリ"
    ErrorLog "logs/local.js.com-error.log"
    CustomLog "logs/local.js.com-error.log" common
</VirtualHost>

みたいに入れます。

エラーログはあったほうがいいですが、ServerNameはhostsで設定したものと同じですし、DocumentRootはxamppでC:\xampp\htdocs以下の任意のWordpressフォルダになります。

3.wp-config.phpにdefineで2行追加する

上の2つでも動作するのですが、このままですと表示は「http://local.js.com」で見えるが、管理画面にログインできない(管理画面は表示されるが、ログインできない)ことになります。

おそらく理由はApacheのWebサーバ上の表示は仮想ホストが効いているけれど、Wordpressログイン画面での「コアURL」が変わってないからです。具体的にはwp-optionsテーブルの値が「http://localhost/任意のWPフォルダ名」みたいになっていて、連携してないからだと考えられます。

そこで、以下の2行をwp-config.phpに追加します。

define('WP_HOME','http://local.js.com');
define('WP_SITEURL','http://local.js.com');

ただしこの上の2行をどこに入れるかがポイントになるので、以下を参考にしてみてください。

編集が必要なのは・・・の上にしてみてください。これ以降だと以降のメモ書きにも書きましたが、動作しないですね。

公式の記事にもあるのですが、上は最後のスラッシュがないのが正しいようです。なお、上のdefineではwp-optionsの値は変わらないのも留意してください。その動きのほうがありがたいですね。(例えば下記メモにあるのですが、URL値を書き換えると、バーチャルホストでなくなったときに、サイトが表示されなくなる=ディレクトリアクセスで見えなくなるので、その点ははまりそうです)

4.XamppでApacheとMySQLを再起動する

以上設定が終わったら、ApacheとMySQLを再起動してみてください。こうすると、バーチャルホストでアクセスできて、かつ管理画面へもこのままいけます。defineで設定すると、管理画面→設定→一般のWordpressアドレスやサイトアドレスが、グレーアウトしていじれなくなるようです。この動きはいいですね。

バーチャルホストでWordpress管理画面にアクセスした際の動き。
defineで設定しているためか、グレーアウトで編集不可となっている

以上で、バーチャルホストでローカル環境のWordpressを動かすメモになります。

検証メモ:バーチャルホスト設定解除時の動きを調べてみた

仮にバーチャルホスト設定を解除した時の動きはどうなるかも見てみました。

例えば久しぶりにさわって設定を忘れていたなどは大いにありそうです。実際にhostsファイルは覚えていそうですが、apacheのhttpd-vhosts.confを見るかとかを僕は忘れそうだと思いその備忘録も兼ねて調べたことを書いています。

あと普通にバーチャルホストから戻したい場合どうするのかも気になったのでここまで押さえておけばやや気力が要るのですがわりと困ることは減るはずです(笑)

httpd-vhosts.confをコメントアウトした場合

例えば、ローカルで動いているバーチャルホストに対して、上のhttpd-vhosts.conf(これは\apache\conf\extra\httpd-vhosts.confにあります)の対象記述をコメントアウトしたらどうなるかです。結果的に、バーチャルホスト名を入れても何も開かず、現在のページのままでした。

ディレクトリでhttp://localhost/ワードプレスフォルダとして、直打ちすると環境によりますがリダイレクトがかかり(これは404Notfoundの回避プラグインの動き)表示が出来ませんでした。これは環境特有と言えそうです。

最後に、http://localhost/ワードプレスフォルダ/管理画面ログインとしてみると、CSSがくずれていますが管理画面が表示されました。ただここでログインをしても、バーチャルホスト名のURLになるため管理画面にいけずにNot Foundエラーとなりました。まあないので当然というところでしょう。ちなみに、このログイン画面のときに「パスワードをお忘れですか?」と「←(ワードプレス名)に戻る」リンクがあると思いますが、このリンクアドレスが、バーチャルホスト名になっていればまずだめと言えそうです。

つまり、ここで明確なのは、httpd-vhosts.confをコメントアウトしてバーチャルホストを解除してしまうと、機能しなくなるということになります。

C:\Windows\System32\drivers\etc\hostsをコメントアウトした時

当然ですがバーチャルホストは上のapache設定とWindowsのhosts設定がセットと考えればいいわけですが、ここで検証として、上のhttpd-vhosts.confをコメントアウトしつつ、さらにhostsファイルもコメントアウトしてみます。

この場合、バーチャルホストにアクセスすると、ページ自体が表示されません。これが何も設定してない状態と言えるので、フォルダアクセスを試してみます。

ログイン画面もCSSが崩れていますが、ログインをしてみると、やはりエラーとなりログインできませんでした。こちらもバーチャルホスト名のリンクがまだ生きているように見えます。

この状態で、vhosts.confのNameVirtualHost *:80をコメントアウトしても、何も変わらないので、他のバーチャルホスト自体の記述なのかな?と思いこれらもコメントアウトしてみました。

残念ながらこれらは関係なく、ログイン画面に入れないという状態になりました。

そもそもサイトURLを書き換えるのはスマートじゃない

上の結果から触るべきバーチャルホスト設定の2ファイルをコメントアウトしても環境が戻りませんでした。

おそらくですが、WordpressのDBにサイトアドレス名という設定(管理画面でいえば設定>一般のURL)が書き換わっているからだろうと考えられます。つまり、一度バーチャルホストアドレスに書き換えてしまったらDB設定を戻す必要があります。

とはいえ、シンプルにphpMyAdminでDBにログインして直すことになります。ここでこれらの操作がわからない人は、控えめにいってバーチャルホストを設定して戻せないということになりかねないのでおすすめできないということになります。

見るべきは、ワードプレスデータベースのテーブルでは、wp_optionsです。このテーブルの、siteurlとhomeがバーチャルホストのものに書き換わっているはずです。(書き換えたので)これらを元のhttp://localhost/ワードプレス/などに変えてあげます。2箇所ですね。これらを修正してあげて再度ログインすると、無事ログインできました。

ここで疑問は、「バーチャルホスト時のURLをWordpressで書き換えてしまうといちいちこのDB直書きをやる必要があるのか?」という点です。

ネットを2時間くらいウロウロして色々な記事を見てみたのですが、多くはバーチャルホストのURLで表示して終わりなので、「管理画面」にアクセスというところが見当たらず、「それでは作業環境をいじらないの?」というツッコミを入れつつ見ていました。(論理的に管理画面をいじる場合はディレクトリアクセスだとすると、かなり手間なのでバーチャルホストにするメリットが半減されると思いましたので)

結論的には、wp-config.phpに以下の記述を適切な箇所に挿入すればオッケーです。ちなみにこの記述はwp-opstionsテーブルよりも優先されるようです。

WP_SITEURL は WordPress アドレス (URL) を定義します。ここで定義する値は、WordPress のコアファイルが存在する URL です。 http:// の部分は含める必要があります。最後のスラッシュ “/” は含めないでください。 wp-config.php でこの値を設定すると、 wp-options テーブルの値よりも優先されます。これを追加することで、サイトを読み込む時のデータベースの呼び出し回数を減らすことができます。

https://ja.wordpress.org/support/article/editing-wp-config-php/ より引用

つまり、該当のWordpressフォルダのwp-config.phpを開き、

wp-config.phpの追加イメージ
define('WP_HOME','http://local.js.com');
define('WP_SITEURL','http://local.js.com');

上の公式記事の説明にもありますが、wp-config.phpは順番が大事であり、上の記述もファイル最後に適当に追加しただけでは動きませんでした(笑)(その場合、たしかにログイン画面から遷移するのですがトップページに戻って、管理画面には行かないとう動きでした)

ポイントは、「/* 編集が必要なのはここまでです ! WordPress でブログをお楽しみください。 */」の直前に入れるということでしょうか。また、このdefine文では、確かにwp-optionsテーブルの値より優先されますが、wp-optionsテーブルの値は変更されません。つまり、DBには手を入れないので便利だと感じました。

参考にしたのは、Can’t access wp-admin with virtual hostの投稿記事です。投稿主と全く同じ状態だったので、回答が上のdefineまたはDBを書き換えるということだったので、How do I change the WordPress Site URL?が参考になりました。この記事ではphpMyAdminからwp-optionsを変えるが1つ目で、2つ目が今回のdefineをやる、3つ目が管理画面の設定>一般のURLからというところでした。それぞれ出来るのですが、ここでの最適解は2つ目だと感じたのでこれを採用しました。

長かったですが、これにてバーチャルホストのURLから管理画面も入れるので満足です。このあたり、どこかのサイトでも書かれていたようで完全に忘れていました。まだまだですね・・・。

ビジネスアイデア相談

店舗への集客アイデア、Webサービスのアイデア、起業・複業アイデアなどビジネスアイデアに関して幅広くご相談可能です。

「もっとアイデアがほしい」「個別に企画の相談に乗って欲しい」「この施策をどう考えるか」という方は、ぜひお気軽にお問い合わせフォームからご連絡ください。