PhpStorm+XAMPPでWordPressのリモートデバッグ

今までWordPressのプラグイン開発をするときは、テキストエディタでコーディングしてサーバーにFTPしてたケーちゃんです。

これじゃ効率悪すぎだわ、とPhpStormとXAMPP環境をローカルに作成して、その快適さに感動しているケーちゃんです。

ただネットで紹介されている環境と、私の環境で少し食い違いがあって、設定にハマったので、メモとして残しておこうと思います。

ネットで紹介されている開発環境というか、構成はWordPressのプラグインフォルダ内にphpstormプロジェクトを配置していました。

私がやりたいのは、こちら。

WordPressの外部にphpstormプロジェクトを配置して、デバッグにWordPressのプラグインフォルダ内にコピーする方法。
ようするに、自分で作ったプログラムは全部同じ所に置いておきたいのです。

開発用フォルダとプラグインフォルダをシンボリックするという方法もありますが、コード上でプラグインのURLを特定する際に不具合が出るので採用しませんでした。

では実際にPhpStormとXAMPPを使った、Wordpressのデバッグ環境を作成していきます。

php.ini設定

XAMPPのコントロール画面から、phpの設定ファイル(php.ini)を開き編集します。

※フォルダはインストール環境に合わせる

変更したら、XAMPPのコントロール画面でApacheを再起動（StopしてStart）します。

PhpStormプロジェクト作成

次にPhpStormで新規にプロジェクトを作成します。
プロジェクト作成時に、WordPress用の設定を行ってくれるので楽です。

(1) WordPressプラグインを選択

(2) ロケーションにプロジェクトを作成するフォルダを指定

(3) WordPressインストールパスに、XAMPP内のWordpressへのパスを指定

(4) 作成をクリック

プロジェクト設定の修正

プロジェクト作成に警告のようなものがでるので、修正します。

(1) 右下に表示される「２イベントログ」をクリック

(2) 「WordPress code style can be set for this project.」の設定をクリック。
クリックしても何の反応もないが、何かやっているはず…

(3) 「WordPress installation is not added to PHP | Include path.」の修復をクリック。
PHP設定画面が表示されるので、インクルード・パスに、XAMPP内のWordpressへのパスが表示されているか確認。

表示されていなかったら、「＋」で追加。

OKで確定する。

開発環境からWordPressへのコピー設定

(1) メニュー：ファイル(F) > 設定(T) でPhpStormの設定画面を開く。

(2) ビルド、実行、デブロイ > デブロイ を選択

(3) 「＋」を押し、「ローカルまたはマウントされたフォルダー」を選択

(4) 「New server name」に、適当な名前を入れ、OKで確定する。

(5) 接続についての情報を入力

フォルダー：「Web server URL」にアクセスしたときに表示されるフォルダを指定する。

(6) マッピングについての情報を入力

ローカル・パス：コピー元のフォルダ（初期値で入力されている）

デブロイメント・パス： 接続タブで指定したフォルダーからの相対パス

Webパス：とりあえず「/」でOK

(7) ツール(T) > デブロイ(E)  > リモートホストの参照(B) で、コピー先にアクセスできるか確認

サーバーの設定

(1) 設定画面から、PHP > サーバー を選択し、インポートボタンをおす。

(2) Import from deployment configration画面が表示されたら、先に作成した、デブロイメントを選択する。

(3) パスマッピングを入力して、開発フォルダとWordpressフォルダを関連付ける。
インクルードパスも入力しておく。
入力しないと、デバッグ中にマッピングされてないといわれ、毎回停止する。

※バグなのか、インクルードパスに設定したマッピングが消えることがあるので、あとで確認が必要

デバッグの実行

(1) デバッグリッスン開始ボタンを押して、デバッグ情報を受け取れるようする。

(2) ブレークポイントを設定する

(3) ブラウザでWordPressにアクセスする

ブレークポイントで止まれば、成功です。