WordPress開発環境構築手順（中級編）－Eclipse Pleiades All in Oneの利用

前回は、WordPress初心者向けとしてWindowsにXAMPPを使用したWordPress環境を構築する手順で、XAMPPとWordPressのインストール手順を紹介しました。

WordPress開発環境構築手順（初級編）－XAMPPのインストール
WordPress開発環境構築手順（初級編）－WordPressのインストール

WordPressの動作確認や、テーマを少し修正する程度のカスタマイズであれば、上記のWordPress環境で特に問題なく行えると思います。

ソースの編集も、サクラエディタなどのテキストエディタで行えるでしょう。

しかし、テーマ・プラグインの開発や大幅なカスタマイズを行おうと思うと、なかなか厳しいです。

そういう場合は、「統合開発環境」（IDE）と呼ばれるアプリケーション開発ツールを使用しましょう。

これを使用することで、デバッグや実行時の変数の中身を調べるといったことが可能になります。

今回は、PHPやJavaなどの統合開発環境である「Eclipse」を使用したWordPress開発環境を構築する手順を紹介します。

WordPress中級者や、WordPressでテーマ・プラグインの開発やカスタマイズを行い、デバッグなどが必要といった方向けの内容になります。

なお、今回のバージョンは以下です。

• Windows 7 Professional SP1（64bit）
• Eclipse 4.4 Luna（Pleiades All in One 4.4.2.v20150310）
• WordPress 4.2.2

Eclipse Pleiades All in Oneのダウンロード・設置

今回は、「Eclipse Pleiades All in One」というものを使用します。

Eclipseは本来、日本語化されておらず英語となっており、また別途他のアプリケーションやプラグインをインストールして設定を行う必要があるソフトウェアです。

それを簡単に使えるように、パッケージ化したものが「Pleiades All in One」です。

日本語化もされた状態で、PHPの場合、XAMPPも含まれるので、すぐに開発を始めることができて、とてもありがたいです。

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

ということで、まずは「Eclipse Pleiades All in One」をダウンロードします。

Eclipse Pleiades All in One公式サイトへアクセスし、最新版のEclipseを選択する。

言語によってバージョンが分かれているので、「PHP」、「64bit　Full Edition」（今回のOSは64bitのため）を選択して、ダウンロードする。

なお、「Full Edition」でないとXAMPPが同梱されていないので注意。

Eclipse Pleiades All in Oneの設置

ダウンロードしたら、解凍し、設置します。

解凍時の注意点が、2点あります。

1点目は、ZIPファイルの解凍には、フリーソフトの「Explzh」を使用しましょう。

「Lhaplus」というソフトでは、解凍に失敗したファイルもあり、正しく動作しない可能性があります。

2点目は、解凍先はCドライブ直下などのフォルダパスが短いところにしましょう。

デスクトップ（「C:\Users\[ユーザー名]\Desktop」）や「C:\Program Files」にすると、フォルダパスが長くなり、エラーが発生する場合があります。

解凍先を「C:\」と指定すると、「C:\pleiades\」の中に全フォルダとファイルが入ります。

XAMPPの設定

Eclipse Pleiades All in Oneに含まれるXAMPPの設定を行います。

設置したフォルダ「C:\pleiades\xampp\」内の「setup_xampp.bat」ファイルを実行します。

コマンドプロンプトが立ち上がり、このようにメッセージが出ればOK。

Enterキーを押して終了させます。

同様に、設置したフォルダ「C:\pleiades\xampp\」内の「xampp-control.exe」ファイルを実行し、XAMPPコントロールパネルを起動します。

初回起動時に、言語選択する必要があるので、「アメリカ（English）」を選択しておきましょう。

正しく起動しましたね。

その後の手順は、WordPress開発環境構築手順（初級編）－XAMPPのインストールに記載している通りなので、割愛します。

WordPressのインストール

XAMPPの公開フォルダ内にテスト用のフォルダ「wp_test」を作成し、WordPressをインストールしましょう。

手順は、WordPress開発環境構築手順（初級編）－WordPressのインストールに記載している通りなので、割愛します。

Eclipseの設定

続いて、Eclipseの設定を行っていきます。

ワークスペースの設定

設置したフォルダ「C:\pleiades\eclipse\」内の「eclipse.exe」ファイルを実行し、Eclipseを起動します。

起動時に、ワークスペースの選択画面が出るので、デフォルトのまま「../xampp/htdocs」（XAMPP公開フォルダ）としておき、「この選択をデフォルトとして使用し、今後この質問を表示しない」をチェックオンにしておきます。

ブラウザの設定

Eclipseを起動したら、デフォルトのブラウザが内部ブラウザとなっているので、普段使用している外部ブラウザに変更しておきます。

メニュー「ウィンドウ」⇒「設定」を選択し、「設定」画面を開きます。

左側の「一般」⇒「Web ブラウザー」を選択し、「外部 Web ブラウザーを使用」にチェックします。

プロジェクトの作成

続いて、プロジェクトを作成し、WordPressをEclipse上にインポートします。

メニュー「ファイル」⇒「新規」⇒「プロジェクト」を選択し、「新規プロジェクト」画面を開きます。

「一般」⇒「プロジェクト」を選択し、次へ。

プロジェクト名を公開フォルダに作成したテスト用のフォルダ「wp_test」として、完了する。

そうすると、EclipseのPHPエクスプローラー上に、インストールしたWordPressのファイル類がインポートされ、表示されました。

これで、Eclipse上でソースファイルの修正が可能になりました。

PHPサポートの追加

続いて、作成したプロジェクトへPHPサポートを追加します。

そうすることで、PHPのソース上の変数・関数の宣言先を開いたり、呼出元を開いたりと開発がしやすくなります。

EclipseのPHPエクスプローラー上の作成したプロジェクトを選択し、右クリック⇒「構成」⇒「PHPサポートの追加」をクリックすれば完了です。

なお、操作のショートカットキーは以下です。

• 「F3」…宣言を開く
• 「Ctrl＋Alt＋H」…呼び出し階層を開く

デバッグの設定

続いて、デバッグの設定を行います。

PHPのデバッグは、「Xdebug」と呼ばれるデバッグツールで行います。

Eclipse Pleiades All in Oneの場合は、すでにPHPやEclipseでXdebugが設定された状態となっているので簡単です。

メニュー「実行」⇒「デバッグの構成」を選択し、「デバッグの構成」画面を開きます。

左側の「PHP Web アプリケーション」を選択した状態で、左上「新規の起動構成」ボタンをクリックします。

「名前」を「wp_test」（任意の名前）とし、以下のように設定します。

まずは、サーバータブから。

• 「サーバータブ　PHPサーバー」…「Default PHP Web Server」
• 「サーバータブ　ファイル」…「/wp_test/index.php」
• 「サーバータブ　URL」…「自動生成」チェックオン

次に、デバッガータブ。

• 「デバッガータブ　サーバー・デバッガー」…「Xdebug」
• 「デバッガータブ　ブレークポイント」…「最初の行でブレーク」チェックオフ

最後に、共通タブ。

• 「共通タブ　お気に入りのメニューに表示」…「デバッグ」チェックオン

設定が終われば、「適用」ボタンで保存します。

Eclipseのデバッグ実行

では、実際にXdebugでデバッグしてみましょう。

今回インストールしたWordPressは、デフォルトのテーマ「Twenty Fifteen」が適用されています。

なので、そのソース（「\wp_test\wp-content\themes\twentyfifteen」）を開き、「index.php」にデバッグポイントを設定してみましょう。

そして、デバッグしてみます。

ツールバーの虫マークの▼ボタンを開き、「wp_test」を選択します。

そうすると、デフォルトの外部ブラウザを、以下のようなデバッグセッションパラメータ付きのURLで開きます。

Eclipseの画面に戻ってみると、見事にデバッグポイントの箇所でブレークされています。

これで、1行ごとにデバッグしたり、変数の値を調べることができます。

これで、WordPress開発がはかどりますね！

Eclipse Pleiades All in OneによるWordPress開発環境構築は、以上です。

参考サイト

Eclipse、XAMPPを使用したPHP開発環境構築手順
hiromasa.docs :o) – Eclipse PDT + XAMPP で WordPress の開発環境をつくる (1)