MENU

wordpress

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

更新日:2019/08/19

 

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

 

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

 

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

 

■お願い
去年ECMAScript2020を頑張って日本語訳しましたが、誰も見てくれません・・・
誰かみて!!
【JavaScript】 学習のためECMAScript2020を日本語訳してみました

他との環境の違い

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

 

WordPressのプラグインフォルダ内にphpstormプロジェクトを配置

 

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

 

WordPressの外部にphpstormプロジェクトを配置

 

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

 

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

 

Wordpressのデバッグ環境作成

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

 

php.ini設定

 

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

 

Apache > Config > PHP(php.ini)

クライアント

 

 

編集内容(末尾に追加)

[XDebug]
zend_extension = "c:\xampp\php\ext\php_xdebug.dll"
xdebug.remote_enable = 1
xdebug.remote_autostart = 1
xdebug.remote_host = "127.0.0.1"
xdebug.remote_port = 9000
xdebug.idekey = "PHPSTORM"

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

 

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

 

PhpStormプロジェクト作成

 

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

 

PhpStorm 新規プロジェクト

 

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

 

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

 

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

 

(4) 作成をクリック

 

プロジェクト設定の修正

 

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

 

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

 

PhpStorm イベントログ

 

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

 

PhpStorm イベントログ

 

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

 

PhpStorm PHP設定画面 インクルード・パス

 

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

 

OKで確定する。

 

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

 

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

 

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

 

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

 

PhpStorm デブロイ設定

 

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

 

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

 

PhpStorm デブロイ設定 接続

 

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

 

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

 

PhpStorm デブロイ設定 接続 マッピング

 

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

 

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

 

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

 

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

 

PhpStorm リモートホストの参照

 

デブロイを実行するには?

 

反映したいファイルやフォルダ上で、コンテキストメニュー(右クリック)を開き

 

デブロイ > デブロイ先と同期

 

を実行

 

 

サーバーの設定

 

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

 

PhpStorm サーバー設定 インポート

 

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

 

PhpStorm デブロイメントインポート設定画面

 

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

 

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

 

 

デバッグの実行

 

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

 

PhpStorm デバッグリッスン開始

 

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

 

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

 

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

記事の内容について

 

こんにちはけーちゃんです。
説明するのって難しいですね。


「なんか言ってることおかしくない?」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。

そんなときは、ご意見もらえたら嬉しいです。

ご意見はこちら。
https://note.affi-sapo-sv.com/info.php

【お願い】

お願い

■このページのURL


■このページのタイトル


■リンクタグ