BLOG.MABATAKI.JP

2010.07.22

Mac+MAMPでローカル構築したWordPressサイトを、Parallels上のWindowsからブラウザチェックする方法

CMSとしてメジャーな選択肢になってきたWordPress。html+css+αによるいわゆる”スタティック”な形式のサイトに比べるとローカルでの構築環境を用意するのが若干面倒くさかったりしますが、ApacheとMySQLが気軽に導入できるMAMPのおかげで、Macローカルでの構築も十分実用的。

ただ、Macでウェブを構築する際に必ずネックになってくるのが、Windowsからのブラウザチェック。IEでチェックしないっていうのはさすがに仕事として成立しないので・・・。僕の場合はParallels上のWindowsに各種モダンブラウザとIE Testerをインストールして、共有フォルダからローカルのサイトにアクセスさせています。ただしこの方法はWordPressには使えないのが欠点。何か方法はないかなーとTwitterでつぶやいてみたらフォロワーの方が解決法を伝授してくださったので、ここにメモを。今回はMAMPのドキュメントルートに「hoge」というディレクトリがあり、「http://localhost:8888/hoge/」でMacローカルで構築したWPサイトにアクセスできる状態を前提として解説します。

手順1. Windows on ParallelsからMacのApacheにアクセスしてみる

MAMPを起動した状態で、Parallels上のWindowsブラウザ(何でも良いです)から「10.211.55.2」もしくはMacのIPアドレスにアクセス。Apacheのドキュメントルートが表示されていれば大丈夫です。

この状態で「hoge」ディレクトリをクリック(つまりhttp://IPアドレス/hoge/にアクセス)すると、サイトの表示にいくつか不具合があるかと思います。cssが外れていたり、パーマリンクでリンク切れを起こしたり。

WordPressには「wp-permalink」「get_option(‘home’);」など、サイトのURLを含んだ文字列を吐く関数がありますが、吐き出されたソースを見てみると、本来「http://IPアドレス/hoge/~」とならければいけない部分が、「http://localhost:8888/hoge/~」と出ていると思います。

つまり、この部分を何とかすれば解決できるということです。

手順2.wp-config.phpを編集する

WordPressがインストールされているディレクトリを開いて、「wp-config.php」に下記2行を書き足して保存します。

define(‘WP_SITEURL’, ‘/hoge’);

define(‘WP_HOME’, ‘/hoge’);

普通ここは

define(‘WP_SITEURL’, ‘http://localhost:8888/hoge’);

define(‘WP_HOME’, ‘http://localhost:8888/hoge’);

などとフルパスで書くべきところなのですが、ここを敢えて「http://localhost:8888」を外して”/”から始めてしまいます。WordPressの一連のファイルを別ディレクトリに設定していたりする人はもちろんそのディレクトリに指定。

手順3.ブラウザチェックしてみる

先程試しにアクセスしてみたWindowsブラウザから、もう一度同じURLでMAMP上のWPサイトにアクセスしてみると、恐らく正常にサイトが表示されているはずです。そう、実質的な作業は手順2のPHPファイル編集だけ。これは簡単。

ちなみに僕の場合はApacheのポート番号を80に設定してMacからは「http://localhost/hoge/」で、Windowsはhostファイルをいじって「http://任意のURL/hoge」でアクセスできるように追加設定をしています。それについてはこのあたりを参照↓

http://www.higaitaisaku.com/hosts.html

これでスタティックなサイトに比べ、何の遜色もない構築環境がMac+MAMP+WordPressでも実現できます。本来ここはそういう技術情報を載せるブログではないのですが、これを実現したくていろいろ検索したところ見当たらなかったのでメモ。ウェブ制作でMacってやっぱり少数派なのかなー。