ワードプレスのテーマ開発環境にEclipseを導入

eclipseインストールのアイキャッチ

ワードプレスのテーマ開発環境として Eclipse (エクリプス)を導入する方法について解説します。

Eclipse 導入によるメリット

最初に Eclipse を導入するとどんなメリットがあるのか?について解説したいと思います。

PHPファイルの編集がしやすい

まずは自分でテーマ開発を行う時のメリットについて解説します。そのメリットとは「Eclipse を導入しておくとPHPファイルの編集が楽になる」ことです。

構文エラーがすぐ分かる

その理由の一つは「PHP構文のエラーがすぐ検出できる」ことです。

テキストエディタなどでPHPファイルを編集する場合、基本的にエラーが分かるのは、ページ表示してワードプレスを動作させた時だと思います。PHPファイルを編集・保存し、ウェブブラウザからウェブページ表示し、その時にエラーが表示されてエラーに気づくというパターンになると思います。

しかし Eclipse を導入すると、PHPファイル編集中にそのエラーに気づく事が容易になります。Eclipse では編集中にPHPの構文としてエラーがある場合には下の図のようにその行にマークが付きます。

eclipse編集画面でエラーが表示された時の画面

なので、ウェブページを表示する事なく、エラーに気づいて修正する事が可能です。ウェブページを表示する事なく修正を行えるので、その分手間が省けます。

関数定義がすぐ確認できる

PHPの編集がしやすい理由の2つ目は「関数定義がすぐ確認できる」ことです。

関数をPHPファイル内に記述し、その関数にカーソルを合わせれば、関数の定義(戻り値や引数など)を表示することができます。

eclipse編集画面で関数定義が表示された時の画面

その関数が定義されているファイルを見て確認する必要がなくなりますので、PHPプログラムの作成を非常に簡単に行う事ができるようになります。

ステップ実行ができる

さらに Eclipse ではデバッガーを使用する事でステップ実行が可能です。

1行ずつプログラムを止めながら実行する事ができる

Eclipse でデバッガーを使えば、プログラムを1行ずつ止めながら実行する事が可能です。例えば下の図のようにブレークポイントを好みの場所に設定し、

eclipseでブレークポイントを設定した時の画面

デバッガーで実行すると、ブレークポイントを設定したところでプログラム実行が停止します。

eclipseでブレークポイントでプログラムが停止した時の画面

そこからステップイン実行をすると、停止している行で実行する関数の中に飛ぶ事が可能です。この例だと have_posts 関数に飛びます。

ステップイン実行の例

さらにステップオーバー実行を行うと、関数の中に飛ばずに次の行までプログラムを実行することも可能です。

eclipseでプログラムを1行実行した時の画面

このように Eclipse を使えば1行ずつプログラムを実行する事ができ、自分の作成したテーマがどのように動いているかを確認するのに大変便利です。また自分のテーマだけでなく、他の方が作ったテーマがどのように動いているかを知ることもできますし、ワードプレス自体の動き・仕組みを知るにも大変適しています

実行中の変数の情報を確認する事ができる

さらに Eclipse でデバッガーを使用すれば、実行中の変数の情報を確認する事が可能です。プログラム停止時点の変数の情報が表示されていますので、その部分をクリックする事で変数の中身の値を確認する事ができます。

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のダウンロード画面1

クリックすると下のような画面が表示されます。ここではインストールする Eclipse で使用するプログラミング言語・OS・Edition(Full or Standard)を選択できます。

eclipseのダウンロード画面2

OS は自分のPC環境にあったものを選択するので良いです。ただし、ワードプレスを動作させるためには PHP プログラムを動作させる必要がありますので、必ず PHP の列のものを選択しましょう。さらにプラグインが同梱されているのは Full Edition ですので、Full Edition を選択しましょう。

クリックするとダウンロードが開始されます。ちなみに私がダウンロードしたインストールファイルのサイズは約480MBでした。結構サイズ大きいですね。

インストールを実行する

それではダウンロードしたインストーラ(.dmgファイル)をダブルクリックしてインストールを開始しましょう!

eclipseのインストーラの図

インストールを開始するとMac OS Xの場合、下のような画面が表示されますので左のアイコンを右の Applications フォルダにドラッグ&ドロップします。インストール作業はこれだけです。

eclipseインストーラの画面

Windows の場合はダウンロードされた ZIP ファイルを解凍するだけでインストールが完了するようです。

Eclipse でのワードプレス実行方法

続いて Eclipse を起動し、ワードプレスを実行してウェブページを表示するまでの手順を解説します。

Eclipse の起動

まずは Eclipse を起動させましょう。Eclipse のインストール先のフォルダに移動し、Eclipse を実行します。

Eclipseのアイコン

ここまでの手順通りに進めてきたのであれば Eclipse はアプリケーションフォルダにインストールされているはずです。Eclipse のアイコンをダブルクリックして起動させましょう。

もしかしたら Mac OS X の場合、下のような画面が表示されて起動できないかもしれません。

eclipseの起動に失敗した時の画面

この場合は次の手順で起動させてください。

まず「システム環境設定」を開き、続けて「セキュリティとプライバシー」を開きます。」

システム環境設定画面1

さらに「一般」タブを開くと下のような画面が表示されると思います。ここで「ダウンロードしたアプリケーションの実行許可」部分にある「このまま開く」をクリックします。

システム環境設定画面2

すると、次は下のよう画面が表示されますので、ここで「開く」をクリックすることにより Eclipse を起動させることができるようになります。

eclipseの起動確認画面

Eclipse を起動させると、しばらく時間が経つとワークスペース選択画面に移ります。

eclipseのワークスペース選択画面

ワークスペースには「MAMPで設定したDocument Rootの一つ上の階層のフォルダ」のパスを選択するのが便利です。Document Root は MAMP を起動すれば、「Preference」の「Web Server」タブから確認することができます。

MAMPのDocumentRoot確認画面

Mac OS X で MAMP インストール時に Document Root を変更していないのであれば、ワークスペースには「/Applications/MAMP」を設定すれば良いと思います。

ワークスペースの選択をしてOKボタンをクリックすれば、Eclipse の起動行われ、起動が完了すれば下のような画面が表示されます。

eclipseの起動完了後画面

ワードプレスのフォルダをインポートする

続いて Eclipse にワードプレスのフォルダをインポートさせます(読み込ませます)。

まずメニューの「ファイル」から「新規」→「PHPプロジェクト」を選択します。

elipseへのインポート方法1

下のような画面が表示されますので、プロジェクト名に「ワークスペース上のワードプレスをインストールしているフォルダ名」を記入します。

elipseへのインポート方法2

ここに記入すべきフォルダ名に関しても、ワークスペース選択時同様に、MAMPの「Preference」の「Web Server」タブから確認することができます。

プロジェクト名の確認

Mac OS X で MAMP フォルダの htdocs にワードプレスをインストールしている場合は「htdocs」と記入すればオーケーだと思います。記入したら「完了」ボタンをクリックしましょう。

設定がうまく行っていれば、設定したフォルダ内の情報が読み込まれ画面左側の「プロジェクト・エクスプローラ」にワードプレスのファイル・フォルダが表示されます。コレが表示されればインポートの成功です。

インポート後のプロジェクト・エクスプローラー

wp-content フォルダや wp-include フォルダがあり、左側の▶︎をクリックすればフォルダの中身も表示できます。さらに php ファイルをダブルクリックすれば、php ファイルの中身を表示することができます。ファイル内の関数名にカーソルを合わせたり、間違った構文のプログラムを記載してみて冒頭で触れたように関数の定義やエラーマークが表示されるか確認してみると良いと思います。

実行構成を設定する

続いて Eclipse からワードプレスを動作させ、ウェブページ表示を行う手順について解説していきます。まずメニューの「実行」から「実行構成」を選択します。

eclipseの実行構成設定1

下のような画面が表示されますので、「PHP Web アプリケーション」クリックして選択し、新規作成ボタンをクリックします。

eclipseの実行構成設定2

すると下のような画面に遷移しますので、まずは名前を設定します。好きな名前で良いです。さらにPHPサーバーに「Default PHP Web Server」を選択し、「構成」ボタンをクリックします。

eclipseの実行構成設定3

構成ボタンをクリックすると下のような画面に遷移しますので、「ベースURL」にPC上でのあなたのホームページのトップを表示する時に指定するURLを記入し、完了ボタンをクリックします。

eclipseの実行構成設定4

ここは基本的に「http://localhost:ポート番号」を記入するのでオーケーです。記入すべきポート番号は、MAMPの「Preference」から「Ports」タグで確認することができます(WebサーバーソフトにNginxを選択している場合はNginx側のポート番号を記入してください)。

eclipseの実行構成設定5

PHPサーバーの構成の設定が完了すれば、次は「ファイル」と「URL」の部分の記入を行います。

eclipseの実行構成設定6

ファイルには、ウェブページ表示時にワードプレスが起動して最初に実行されるPHPファイルへのパスを記入します。基本これはワードプレスインストールフォルダ直下の index.php へのパスで良いです。参照ボタンを押せばファイルを選択するだけでパスが自動で入力されます。

eclipseの実行構成設定7

URLに関してですが、まず「自動生成」のチェックは外して良いです。私の場合、チェックつけてると上手くいきませんでした。

このURL欄には実行した時に最初に表示したいウェブページへのURLを記入します。まずはトップページを表示するために、URLの右側の欄は空白にしておくので良いです。特定のURLを指定すれば、そのURLに対応したウェブページを表示することができます。

最後に「共通」タブを開いて下のよう画面を表示し、「実行」の横の四角をクリックしてチェックを付加してください。

eclipseの実行構成設定8

以上で実行構成の設定は完了です。適用ボタンをクリックして設定を保存し、閉じるボタンで画面を閉じてください。

実行する

ここまで実行構成の設定が完了しましたので、次はいよいよ実行してワードプレスを動作させ、ウェブページを表示させたいと思います。

まず最初にやることは「サーバーの起動」です。

MAMPを起動し、「Start Servers」をクリックしてウェブサーバーを起動させます(このサーバーの起動は1度だけで良いです)。

Webサーバーの起動

起動が完了すれば、Eclipse の画面に戻りましょう。画面上部に実行ボタンがありますので、このボタン横の▼をクリックしてください。

eclipseでの実行1

すると、先ほど作成した実行構成の名前が表示されるはずです。

eclipseでの実行2

その作成した実行構成の名前をクリックしてください。そうすると、Eclipse のウェブブラウザが起動し、実行構成で設定したURLのウェブページが表示されるはずです。

eclipseでの実行3

おめでとうございます!これで Eclipse からワードプレスを起動してウェブブラウザを表示に成功です。ここまでくれば、Eclipse でPHPを編集しながらすぐに実行確認を行えます。

一応動きを解説しておくと、実行することにより、実行構成設定の「URL」で設定したURLのページを表示するために、実行構成の「ファイル」で設定したPHPファイルがまず実行され、そこから色んなPHPが動作してブラウザにページが表示されています。

なので、「ファイル」や「URL」の部分の設定がおかしいとページが表示されません。実行したのにページが表示されていない場合は、まず実行構成の「ファイル」と「URL」を確認してみると良いと思います。

またサーバーが起動していないとPHP自体が実行できませんので、サーバーがちゃんと起動しているかどうかも確認しておいた方が良いと思います。

それでも原因が分からなければ、コメントしていただければお助けできる可能性もありますので、ぜひコメントしてみてください!

スポンサーリンク

その他の設定

最後にその他の知っておくと便利な設定について解説しておきたいと思います。

ウェブブラウザの設定

Eclipse ではワードプレスを動作させてページ表示する際に使用するブラウザを、あなたの PC にインストールされているブラウザに設定することが可能です。例えば Google Chrome や Safari などが設定できます。

ウェブブラウザ例

ブラウザの設定するために、まずは Eclipse の環境設定を開きます。

そして「一般」→「Web ブラウザー」と辿って Web ブラウザーの設定画面を表示します。

eclipseで使用するブラウザの設定

デフォルトだと「内部 Web ブラウザーを使用」が選択されていますので、「外部 Web ブラウザーを使用」を選択します。

続いて「新規」ボタンをクリックしてブラウザ設定を追加します。クリックすると下のような画面が表示されますので、まずブラウザ設定の名前を入力します。

eclipseで使用するブラウザの設定2

名前はなんでも良いですが、起動させるブラウザと分かる名前が良いと思います。例えば Google chrome を起動させるのであれば、ここの名前もそのまま「Google Chrome」などにしておくと分かりやすいです。

続いて「参照ボタン」をクリックして、起動させるブラウザを選択します。ここでは Google Chrome を選択しています。

eclipseで使用するブラウザの設定3

選択したら「Openボタン」をクリックしてこの画面を閉じ、さらに「OKボタン」をクリックして「外部 Web ブラウザーの追加」画面を閉じます。

そうすると、「外部 Web ブラウザー一覧」に先ほど新規追加した名前の項目が追加されますので、そこにチェックをつけ、「適用して閉じるボタン」をクリックしてこの画面を閉じます。

eclipseで使用するブラウザの設定4

これでウェブブラウザの設定は完了です。

もう一度実行するを参考にしてプログラムの実行をしてみてください。今度はここで設定したブラウザが起動し、そこに実行構成で設定したURLのページが表示されるはずです。

動作するブラウザが変わる様子

まとめ

このページでは、Eclipse のインストール方法と起動方法をまず解説し、続いて実行構成の設定方法と、Eclipse からワードプレスを起動させてページを表示するための実行手順について解説しました。デバッガーを起動させてステップ実行するための手順については下のページで解説していますので、ワードプレスやテーマの開発に興味がある方は是非参考にしていただければと思います。

eclipseのデバッガー設定のアイキャッチEclipse にデバッガー(Xdebug)を導入

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ワードプレスの処理時間は約 0.247 秒です