ワードプレスのテーマ開発環境として Eclipse （エクリプス）を導入する方法について解説します。
Contents
Eclipse 導入によるメリット
最初に Eclipse を導入するとどんなメリットがあるのか？について解説したいと思います。
PHPファイルの編集がしやすい
まずは自分でテーマ開発を行う時のメリットについて解説します。そのメリットとは「Eclipse を導入しておくとPHPファイルの編集が楽になる」ことです。
構文エラーがすぐ分かる
その理由の一つは「PHP構文のエラーがすぐ検出できる」ことです。
テキストエディタなどでPHPファイルを編集する場合、基本的にエラーが分かるのは、ページ表示してワードプレスを動作させた時だと思います。PHPファイルを編集・保存し、ウェブブラウザからウェブページ表示し、その時にエラーが表示されてエラーに気づくというパターンになると思います。
しかし Eclipse を導入すると、PHPファイル編集中にそのエラーに気づく事が容易になります。Eclipse では編集中にPHPの構文としてエラーがある場合には下の図のようにその行にマークが付きます。
なので、ウェブページを表示する事なく、エラーに気づいて修正する事が可能です。ウェブページを表示する事なく修正を行えるので、その分手間が省けます。
関数定義がすぐ確認できる
PHPの編集がしやすい理由の２つ目は「関数定義がすぐ確認できる」ことです。
関数をPHPファイル内に記述し、その関数にカーソルを合わせれば、関数の定義（戻り値や引数など）を表示することができます。
その関数が定義されているファイルを見て確認する必要がなくなりますので、PHPプログラムの作成を非常に簡単に行う事ができるようになります。
スポンサーリンク
ステップ実行ができる
さらに Eclipse ではデバッガーを使用する事でステップ実行が可能です。
１行ずつプログラムを止めながら実行する事ができる
Eclipse でデバッガーを使えば、プログラムを１行ずつ止めながら実行する事が可能です。例えば下の図のようにブレークポイントを好みの場所に設定し、
デバッガーで実行すると、ブレークポイントを設定したところでプログラム実行が停止します。
そこからステップイン実行をすると、停止している行で実行する関数の中に飛ぶ事が可能です。この例だと have_posts 関数に飛びます。
さらにステップオーバー実行を行うと、関数の中に飛ばずに次の行までプログラムを実行することも可能です。
このように Eclipse を使えば１行ずつプログラムを実行する事ができ、自分の作成したテーマがどのように動いているかを確認するのに大変便利です。また自分のテーマだけでなく、他の方が作ったテーマがどのように動いているかを知ることもできますし、ワードプレス自体の動き・仕組みを知るにも大変適しています。
実行中の変数の情報を確認する事ができる
さらに Eclipse でデバッガーを使用すれば、実行中の変数の情報を確認する事が可能です。プログラム停止時点の変数の情報が表示されていますので、その部分をクリックする事で変数の中身の値を確認する事ができます。
変数の値がどのように変化していくかを見る事で、意図した通りにプログラムが動いているかを簡単に確認する事が可能です。
このように、Eclipse をワードプレス開発環境として導入する事で、自分のテーマの編集を容易に行う事ができるようになり、自分のテーマ・他の人が作ったテーマ・ワードプレスのコアの部分の動きを簡単に確認する事ができるようになります！しかも無料で使用可能です！！！
Eclipse に興味を持った方は是非このページを読み進めていただければと思います。このページでは Eclipse をインストールし、Eclipse からページを表示してワードプレスを動作させる手順を解説します。
デバッガーを用いてステップ実行するまでの手順については下のページで解説します（解説が長くなったのでページを分けています…）。
Eclipse にデバッガー（Xdebug）を導入
環境
まずこのページで解説する手順は下記の環境を想定して説明しています。
- OS環境：Mac OS X（Mojave 10.14.5）
- PHP・WebServer動作環境：MAMP 5.3
- Eclipse：2019-03 (4.11)
想定しているのはこの環境ですが、解説の内容自体はどの環境でも参考にはなると思います。
事前準備
Eclipse をインストールする事前準備として、PCにMAMPのインストールとワードプレスのインストールを行ってください。
下のページでMAMPとワードプレスをインストールする方法を解説していますので、特に Mac を使用している方は参考になると思います。すでにこれらの環境が揃っている方は次に進んでください。
MAMPがあれば「ネット環境なし」でもワードプレスが使える！
スポンサーリンク
Eclipse のインストール方法
それでは Eclipse のインストール方法の解説に移ります。
インストールファイルをダウンロードする
まずインストールするためのファイルをダウンロードしましょう。インストールするのはただの Eclipse ではなく、「Eclipse Pleiades All in One」です。この「Eclipse Pleiades All in One」は Eclipse に対して日本語化やその他もろもろのプラグインが同梱されたパッケージであり、自分で日本語化を行ったりプラグインを導入する手間が省け、大変便利です。
インストールは下記のページから行う事が可能です。
http://mergedoc.osdn.jp
このページに移動すると下のような画面が表示されます。いろんなバージョンのものをダウンロード可能ですが、基本的に最新版を選択するので良いです。
クリックすると下のような画面が表示されます。ここではインストールする Eclipse で使用するプログラミング言語・OS・Edition（Full or Standard）を選択できます。
OS は自分のPC環境にあったものを選択するので良いです。ただし、ワードプレスを動作させるためには PHP プログラムを動作させる必要がありますので、必ず PHP の列のものを選択しましょう。さらにプラグインが同梱されているのは Full Edition ですので、Full Edition を選択しましょう。
クリックするとダウンロードが開始されます。ちなみに私がダウンロードしたインストールファイルのサイズは約４８０MBでした。結構サイズ大きいですね。
インストールを実行する
それではダウンロードしたインストーラ（.dmgファイル）をダブルクリックしてインストールを開始しましょう！
インストールを開始するとMac OS Xの場合、下のような画面が表示されますので左のアイコンを右の Applications フォルダにドラッグ＆ドロップします。インストール作業はこれだけです。
Windows の場合はダウンロードされた ZIP ファイルを解凍するだけでインストールが完了するようです。
スポンサーリンク
Eclipse でのワードプレス実行方法
続いて Eclipse を起動し、ワードプレスを実行してウェブページを表示するまでの手順を解説します。
Eclipse の起動
まずは Eclipse を起動させましょう。Eclipse のインストール先のフォルダに移動し、Eclipse を実行します。
ここまでの手順通りに進めてきたのであれば Eclipse はアプリケーションフォルダにインストールされているはずです。Eclipse のアイコンをダブルクリックして起動させましょう。
もしかしたら Mac OS X の場合、下のような画面が表示されて起動できないかもしれません。
この場合は次の手順で起動させてください。
まず「システム環境設定」を開き、続けて「セキュリティとプライバシー」を開きます。」
さらに「一般」タブを開くと下のような画面が表示されると思います。ここで「ダウンロードしたアプリケーションの実行許可」部分にある「このまま開く」をクリックします。
すると、次は下のよう画面が表示されますので、ここで「開く」をクリックすることにより Eclipse を起動させることができるようになります。
Eclipse を起動させると、しばらく時間が経つとワークスペース選択画面に移ります。
ワークスペースには「MAMPで設定したDocument Rootの一つ上の階層のフォルダ」のパスを選択するのが便利です。Document Root は MAMP を起動すれば、「Preference」の「Web Server」タブから確認することができます。
Mac OS X で MAMP インストール時に Document Root を変更していないのであれば、ワークスペースには「/Applications/MAMP」を設定すれば良いと思います。
ワークスペースの選択をしてOKボタンをクリックすれば、Eclipse の起動行われ、起動が完了すれば下のような画面が表示されます。
ワードプレスのフォルダをインポートする
続いて Eclipse にワードプレスのフォルダをインポートさせます（読み込ませます）。
まずメニューの「ファイル」から「新規」→「PHPプロジェクト」を選択します。
下のような画面が表示されますので、プロジェクト名に「ワークスペース上のワードプレスをインストールしているフォルダ名」を記入します。
ここに記入すべきフォルダ名に関しても、ワークスペース選択時同様に、MAMPの「Preference」の「Web Server」タブから確認することができます。
Mac OS X で MAMP フォルダの htdocs にワードプレスをインストールしている場合は「htdocs」と記入すればオーケーだと思います。記入したら「完了」ボタンをクリックしましょう。
設定がうまく行っていれば、設定したフォルダ内の情報が読み込まれ画面左側の「プロジェクト・エクスプローラ」にワードプレスのファイル・フォルダが表示されます。コレが表示されればインポートの成功です。
wp-content フォルダや wp-include フォルダがあり、左側の▶︎をクリックすればフォルダの中身も表示できます。さらに php ファイルをダブルクリックすれば、php ファイルの中身を表示することができます。ファイル内の関数名にカーソルを合わせたり、間違った構文のプログラムを記載してみて冒頭で触れたように関数の定義やエラーマークが表示されるか確認してみると良いと思います。
スポンサーリンク
実行構成を設定する
続いて Eclipse からワードプレスを動作させ、ウェブページ表示を行う手順について解説していきます。まずメニューの「実行」から「実行構成」を選択します。
下のような画面が表示されますので、「PHP Web アプリケーション」クリックして選択し、新規作成ボタンをクリックします。
すると下のような画面に遷移しますので、まずは名前を設定します。好きな名前で良いです。さらにPHPサーバーに「Default PHP Web Server」を選択し、「構成」ボタンをクリックします。
構成ボタンをクリックすると下のような画面に遷移しますので、「ベースURL」にPC上でのあなたのホームページのトップを表示する時に指定するURLを記入し、完了ボタンをクリックします。
ここは基本的に「http://localhost:ポート番号」を記入するのでオーケーです。記入すべきポート番号は、MAMPの「Preference」から「Ports」タグで確認することができます（WebサーバーソフトにNginxを選択している場合はNginx側のポート番号を記入してください）。
PHPサーバーの構成の設定が完了すれば、次は「ファイル」と「URL」の部分の記入を行います。
ファイルには、ウェブページ表示時にワードプレスが起動して最初に実行されるPHPファイルへのパスを記入します。基本これはワードプレスインストールフォルダ直下の index.php へのパスで良いです。参照ボタンを押せばファイルを選択するだけでパスが自動で入力されます。
URLに関してですが、まず「自動生成」のチェックは外して良いです。私の場合、チェックつけてると上手くいきませんでした。
このURL欄には実行した時に最初に表示したいウェブページへのURLを記入します。まずはトップページを表示するために、URLの右側の欄は空白にしておくので良いです。特定のURLを指定すれば、そのURLに対応したウェブページを表示することができます。
最後に「共通」タブを開いて下のよう画面を表示し、「実行」の横の四角をクリックしてチェックを付加してください。
以上で実行構成の設定は完了です。適用ボタンをクリックして設定を保存し、閉じるボタンで画面を閉じてください。
実行する
ここまで実行構成の設定が完了しましたので、次はいよいよ実行してワードプレスを動作させ、ウェブページを表示させたいと思います。
まず最初にやることは「サーバーの起動」です。
MAMPを起動し、「Start Servers」をクリックしてウェブサーバーを起動させます（このサーバーの起動は１度だけで良いです）。
起動が完了すれば、Eclipse の画面に戻りましょう。画面上部に実行ボタンがありますので、このボタン横の▼をクリックしてください。
すると、先ほど作成した実行構成の名前が表示されるはずです。
その作成した実行構成の名前をクリックしてください。そうすると、Eclipse のウェブブラウザが起動し、実行構成で設定したURLのウェブページが表示されるはずです。
おめでとうございます！これで Eclipse からワードプレスを起動してウェブブラウザを表示に成功です。ここまでくれば、Eclipse でPHPを編集しながらすぐに実行確認を行えます。
一応動きを解説しておくと、実行することにより、実行構成設定の「URL」で設定したURLのページを表示するために、実行構成の「ファイル」で設定したPHPファイルがまず実行され、そこから色んなPHPが動作してブラウザにページが表示されています。
なので、「ファイル」や「URL」の部分の設定がおかしいとページが表示されません。実行したのにページが表示されていない場合は、まず実行構成の「ファイル」と「URL」を確認してみると良いと思います。
またサーバーが起動していないとPHP自体が実行できませんので、サーバーがちゃんと起動しているかどうかも確認しておいた方が良いと思います。
それでも原因が分からなければ、コメントしていただければお助けできる可能性もありますので、ぜひコメントしてみてください！
その他の設定
最後にその他の知っておくと便利な設定について解説しておきたいと思います。
スポンサーリンク
ウェブブラウザの設定
Eclipse ではワードプレスを動作させてページ表示する際に使用するブラウザを、あなたの PC にインストールされているブラウザに設定することが可能です。例えば Google Chrome や Safari などが設定できます。
ブラウザの設定するために、まずは Eclipse の環境設定を開きます。
そして「一般」→「Web ブラウザー」と辿って Web ブラウザーの設定画面を表示します。
デフォルトだと「内部 Web ブラウザーを使用」が選択されていますので、「外部 Web ブラウザーを使用」を選択します。
続いて「新規」ボタンをクリックしてブラウザ設定を追加します。クリックすると下のような画面が表示されますので、まずブラウザ設定の名前を入力します。
名前はなんでも良いですが、起動させるブラウザと分かる名前が良いと思います。例えば Google chrome を起動させるのであれば、ここの名前もそのまま「Google Chrome」などにしておくと分かりやすいです。
続いて「参照ボタン」をクリックして、起動させるブラウザを選択します。ここでは Google Chrome を選択しています。
選択したら「Openボタン」をクリックしてこの画面を閉じ、さらに「OKボタン」をクリックして「外部 Web ブラウザーの追加」画面を閉じます。
そうすると、「外部 Web ブラウザー一覧」に先ほど新規追加した名前の項目が追加されますので、そこにチェックをつけ、「適用して閉じるボタン」をクリックしてこの画面を閉じます。
これでウェブブラウザの設定は完了です。
もう一度実行するを参考にしてプログラムの実行をしてみてください。今度はここで設定したブラウザが起動し、そこに実行構成で設定したURLのページが表示されるはずです。
まとめ
このページでは、Eclipse のインストール方法と起動方法をまず解説し、続いて実行構成の設定方法と、Eclipse からワードプレスを起動させてページを表示するための実行手順について解説しました。デバッガーを起動させてステップ実行するための手順については下のページで解説していますので、ワードプレスやテーマの開発に興味がある方は是非参考にしていただければと思います。
Eclipse にデバッガー（Xdebug）を導入