この記事では、Wordpressサイトのローカル開発環境をXAMPPとEclipsePDTで作るための手順をまとめています。

WordPressでも既存のテーマを利用したシンプルなウェブサイトやブログなら、ローカルで動かさずに直接サーバーにアップしてコンテンツを追加していくので十分いけますし、ちょっとしたデザインの変更や機能の追加などもダッシュボードからの編集でなんとかなりますよね。

 

これまでは私のWordpressの利用レベルもそんな軽い感じだったのですが、最近、オリジナルテーマを作りはじめたり、クライアントから依頼されたウェブサイトに、条件検索フォームを組み込む必要がでてきたりして、一気に「デバッグできるローカル環境がほしい!」モードになってきました。

 

WordPressサイトをローカルホストで動かすのに欠かせないXAMPPは既に使用中だったのですが、これに加えてPHPのデバッグ環境がどうしても欲しくなり、久々にEclipseを使うことにしました。(この時のこの変数の中身がどうなってるのか見たい!!!って思っちゃうとね・・・)

Eclipseはプログラマー勤務時代にJavaの開発で使っていたのですが、当時から開発環境の設定は本当に嫌い(ぜったい何かしらで躓いちゃうから)で、Google先生にお世話になりつつ、あれこれ5日間くらい手間取ってようやく全てが何とか動くように。。こんな苦労は二度としないためにも、この記事に一発、手順をまとめておこうと思った次第です。

sponsored link

前提条件

今回、XAMPP + Eclipse PDTを使い始めるにあたって、「こんな条件下でゴニョゴニョやっていました」という前提条件をまず挙げておきたいと思います。

  • OS: Windows 7 (64ビット)
  • Cドライブ直下にxamppを設置済み
  • 複数のWordpressサイトをローカルホストにインストール済み

上記のような状況ですので、今回の記事は、Wordpressを初めてローカルホストにインストールするのではなく、ローカルホストで動いている既存のWordpressサイトをEclipseで編集・デバッグできるようにするという流れになっています。

 

最初の試みと失敗

以前もEclipseで開発環境を作るときはAll in One パッケージを使っていたという記憶があり、Pleiades All in One PHPというのがとっても便利そうだったので、これをダウンロードすることにしました。

Pleiades All in One PHPには、xamppも含まれ、xdebugというデバッガーもxamppに設定済みだったり、eclipseでphpで開発するためのPDTとか、eclipseでphpを動かすために必要なものが一通りそろっているようです。

ただ私の場合、すでにxamppは利用していたので、Pleiadesの中のxamppではなく、Cドライブ直下にあった既存のxamppと今回ダウンロードしたeclipseを組み合わせて使おうという考えになり、この方向で設定を進めていきました。

が、これが原因で、いろんなところでエラーが発生。。。

 

Eclipseのほうではwordressサイトが見れなかったり(アクセス権がないエラー)、そのエラーを治すためにApacheの設定をいろいろいじっているうちに、今度はブラウザからwordpressサイトのトップページ以外Object not foundエラーになり、パーマリンクの設定をしなおしたけど結局エラーは消えず・・・などなど。

まだまだ、開発環境の設定の怖さを甘く見ていた初日。 「やっぱりダメだったか・・・」と痛い思いをしながら解決を試みたものの、モグラたたきのようにあちこちで発生しつづけるエラーには収集がつかなくなりました。(トホホ)

 

そんなときに、とあるサイトで「素直にPleiadesだけ使えばすんなりいく」みたいな言葉を発見。この言葉でふと我に返り、既存のxamppを使うというこだわりはやめて、Pleiadesに含まれるxamppを利用しようという結論に至ったのでした。

ここまでが大体ウダウダしながら2日間。今まで使っていたPleiadesはごっそり削除して、新たにzipファイルを解凍してやりなおし。以下、あらためて手順はPleiadesをダウンロードするところから始めます。

 

Pleiades All in One PHPのダウンロード

ダウンロードサイト: http://mergedoc.sourceforge.jp/

まず上のサイトからPleiades All in One をダウンロードします。私の場合、eclipseの現時点の最新版Eclipse 4.4 Luna、64bit Full EditionのPHP版を選んでダウンロードしました。(結構ボリュームがあるzipファイルなので、場合によってはちょっと時間がかかります。)

 

ダウンロードが無事に終わったら、zipファイルを解凍します。ここでの注意点は、二点。

  1. 解凍する場所をデスクトップなどパスが深くなるところに解凍しない。エラーが起きる可能性があるので。cドライブ直下(C:\pleades)のようにパスが長くならない場所に解凍する
  2. 解凍ソフトにLhaplusを使わない。ちゃんと解凍ができないらしいです。知らないでLhaplusで解凍し、見事eclipse.exeが起動しませんでした。。Windows7デフォルトの展開ウィザードか、7zipを使う。私は7zipでいけました。

 

解凍も結構時間がかかるので気長に待ちましょう。私のようにすでにxamppを使っているという方は、ここでバックアップを取っておいてください。

 

既存XAMPPからデータをバックアップ

  • データベースのバックアップ

まず、以前に使っていたXAMPPを起動し、ApacheとMySQLをスタートさせて、phpMyAdminにアクセス。今後も利用したいデータベースをエクスポートしておきます。エクスポートは普通にデータベースを選んでエクスポートボタンをクリックすれば、ファイルのダウンロードがはじまります。

あと、xamppやmySQLにパスワードを設定している場合はそれもメモっておくと後で楽です。

 

  • ファイルのバックアップ

xamppフォルダのhtdocsの中にあるフォルダのうち、今後も利用したいものを別の場所にコピーしておきます。

 

ここまでできたら、XAMPPのコントロールパネルを終了します。Pleiadesのダウンロードが完了していたら、ここで一度PCを再起動しておきましょう。

※既存のxamppは残しておいても起動さえしていなければ、Pleiades内のxamppとの間で特に問題は起きないので、私はあえてアンインストールしないで進めました。(何かの時にすぐ戻せるように・・・)

 

Pleiades内のXAMPPの初期設定

解凍されたpleaiadesフォルダをエクスプローラで開き、その中のxamppフォルダ内からsetup_xampp.batを見つけてダブルクリックします。

次に、xampp-control.exeを実行し、コントロールパネルを開きます。いつものようにApacheとMySQLのstartボタンをクリック。

※Apacheの起動でエラーになる場合、既存のxamppが実行中になっていないか、またSkypeなどの他のプログラムとのポートのバッティングがないか、チェックしてください。(Skypeの設定が問題の場合は、Skypeにログインし設定>詳細>接続にて「追加の受信接続にポート80と443を使用」のチェックを外します。)

 

ブラウザからhttp:// localhost/xampp/にアクセスし、以下のように表示されればOKです。

xamppようこそ

ここで、セキュリティ関係の設定をします。

上のページの左サイドバーのメニューから「セキュリティ」をクリック。表示されたページに「これらのXAMPPページは一般的にネットワーク経由でアクセス可能です」「MySQLユーザルートにパスワードがありません」「PhpMyAdminはネットワーク上から自由にアクセスできてしまいます。」といった警告がある場合、設定が必要になります。

 

同ページの「そのような問題をすべて修正するには、単純に次のツールを使ってください。」の下にあるURL

http://localhost/security/xamppsecurity.php

にアクセスします。「MYSQL 項目: “ROOT” パスワード」と「XAMPPのディレクトリ制御 」の項目を入力します。これまでxamppを使っていた方は、その時のユーザー名、パスワードを入力しましょう。

 

http://localhost/phpmyadmin/にアクセスして、ログインが成功すれば初期設定完了です。

※phpMyAdminのアクセスでエラーが起き、エラーメッセージにconfig.inc.phpの設定がどうのこうのうと書かれている場合、pleiades/xampp/phpMyAdmin/config.inc.phpを開いて、/* Authentication type and info */のパスワード設定がちゃんとされているかチェックしてみてください。パスワードが設定されていない場合は、xamppのセキュリティページで入力したパスワードを入力してファイルを保存し、再度phpMyAdminにアクセスしてみてください。

 

XAMPPにバックアップデータを取り込む

既存xamppから移行したいデータがある方は、バックアップしておいたwordpressサイトのデータをpleiades内のxamppに取り込んでいきます。以下の2点を行います。

  1. xampp/htdocsフォルダ内からバックアップ(コピー)しておいたフォルダ・ファイル類をpleaiades/xampp/htdocs内に配置
  2. エクスポートしておいたmySQLのデータをphpMyAdminからインポート

 

ここまでできたら、ローカルホストからwordpressサイトにアクセスできるかチェックします。

http://localhost/wordpressサイトのルートフォルダ名/wp-admin/

で、ダッシュボードにアクセス。

※ここでデータベースのユーザー・パスワードに関するエラーが出たら、htdocs/wordpressサイトのルートフォルダ/wp-config.phpを開き、DB_USER、DB_PASSWORDに書かれているユーザー名、パスワードをphpMyAdminのユーザに追加してください。

 

無事にダッシュボードにアクセスできることが確認できたら、次はサイトのトップページや他のページを開けるかどうか確認しておきます。

 

さて、ここまででPleiades内のxamppの初期設定と、既存サイトデータの移行が完了しました。ここから、wordpressサイトのデバッグ環境=eclipse の設定を行っていきます!

 

 

EclipseにWordpressサイトをプロジェクトとして追加する

ここからが今回の肝、まずはpleiades/eclipse/eclipse.exeを実行し、eclipseを起動。起動には少し時間がかかるけど気長に待ちます。

もしここで起動されない場合は、zipの解凍がうまくいっていない可能性あり。Pleiades eclipse Luna 4.4の場合、pleiades/eclipseのフォルダ内は以下のような構成になっています。

pleiadesのeclipseフォルダ構成

見比べてフォルダがなんか足りないなと思ったらPleiadesを別の場所に解凍しなおし、その中のeclipseフォルダだけごっそりコピーしてくればOK。

 

起動されると、最初にワークスペースの場所を聞かれますが、今回はpleiades/xampp/htdocs/にwordpressサイトのフォルダを配置しているので、デフォルトで入力されている ../xampp/htdocs/のままでOKボタンをクリックします。

 

プラットフォームが表示されたら、ファイル>新規>PHPプロジェクトを選択。

ウィザードが表示されるので、プロジェクト名に今回編集したいwordpressサイトのルートフォルダ名(xampp/htdocフォルダに配置してあるwordpressサイトのフォルダ名)を入力します。

ここ、重要なので、しつこくキャプチャも載せておきますです。(こんなこと分からないのは自分くらいかもしれないですが、最初は適当なプロジェクト名を付けて全然うまくいかなかったので。。)

eclipseでPHPプロジェクト作成

 

このようにするとワークスペース(../xampp/htdocs/)内にあるwordpressサイトのフォルダ以下をプロジェクトとして編集することができるようになります。上記のウィザードでは、Javascriptサポートにチェックをいれてあとは「次へ」でどんどん進んで完了すればOKです。

以下のようにプラットフォームにwordpressサイトが追加されました!ツリーを展開して、wp-adminなどのフォルダやphpファイル類が読み込まれていることを確認してみてください。

eclipseにwordpressサイト追加

 

Eclipseでwordpressサイトをデバッグする

さて、Eclipseでwordpressサイトをデバッグするには、もう少し設定が必要になります。

ウィンドウ>設定>PHP>PHP実行可能ファイルを選択し、追加ボタンをクリック。

eclipse php実行ファイルの設定

名前のところには分かりやすいようにPHPのバージョンなどを入れておくといいです。実行可能ファイルとphp iniファイルをpleiades/xampp/php/php.exeとphp.iniにそれぞれ設定し、PHPデバッガーにXDebugを選択してOKをクリックします。

 

次に、デバッグの構成を作成します。

実行>デバッグの構成をクリックし、画面左側のPHP Webアプリケーションを右クリックして「新規」を選択します。

eclipseデバッグ構成1

 

以下のような画面が表示されたら各項目を設定していきます。

eclipseデバッグ構成2

名前は分かりやすいようにプロジェクト名などを入力します。

ファイルのところはプロジェクト名(ルートフォルダ)/index.phpを入力。

URLには、デバッグしたいページを設定します。トップページをデバッグしたい場合は自動生成をチェックすればいいですが、それ以外の場合は、自動生成のチェックを外し、そのページのURLに合うように入力する必要があります。ここがうまく設定できていないとデバッグがうまく行われないので注意してください。

 

次に「デバッガー」タブをクリックし、以下のようにデバッガーがXDebugになっていることを確認します。

eclipseデバッグ構成3

 

適用ボタンをクリックして閉じます。

以上で、デバッグの設定が完了しました!

 

実際にデバッグするには、XAMPPでApacheとMySQLが起動されている必要があります。起動していない場合は、XAMPPコントロールパネルでApacheとMySQLをstartさせましょう。

eclipseでデバッグを実行します。実行>デバッグをクリックしてもいいですし、緑色の虫マークをクリックしてもデバッグを開始できます。パースペクティブの変更のポップアップがでたら許可します。

index.phpの最初の行でブレークされればデバッグが無事、動いていることになります。ホッと一息ですね^^ デバッグしたい部分にブレークポイントを貼ってガンガン中身をチェックしてデバッグを加速させていきましょう!!

 

終わりに

WordPress + XAMPP + Eclipse(PDT)の組み合わせで検索すると、かなり親切な解説をしてくれているサイトが幾つかあってとても参考になりました。特に、以下のサイトの説明に大変お世話になりました。ありがとうございます!