WordPressのテーマをデバッグする時、どうしてますか？

WordPressのテーマ開発をしているときに、ちょっとここの変数の中が見たいなんてときにどうしてますか？echo $hogeとかvar_dump($hoge)なんてしちゃいませんか？
私はしちゃってました。。。

変数の中を見るだけだったらecho $hogeでよかったんですが、WordPress本体のソースをおいかけようとした時に、これはデバッガーがないと無理だと挫折し、真面目にデバッガーが使えるように設定してみました。

開発環境について

記事にした時点の開発環境です。

Mac OS 10.13.6
Visual Studio Code 1.32.1
- 拡張機能：PHP Debug 1.13.0
Docker Desktop Version 2.0.0.2
WordPress 5.0.3
- Docker Image: wordpress:5.0.3-php7.3 + mysql:5.7.25
  - latest は使わずにバージョンを固定しています。

Windows環境では動作確認していません。

環境を構築する

docker-compose.yml ファイル

docker-compose.ymlを用意します。
WordPressのコンテナ起動は、docker-compose.ymlから行ったほうが楽です。既にDocker環境で開発している場合は、MySQLの設定はよしなに変更してください。

docker-compose.yml

version: '3.1'

services:
  db:
    image: mysql:5.7.25
    command: "--explicit_defaults_for_timestamp --innodb-use-native-aio=0"
    volumes:
      - ./mysql:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: HogeFuga_2019
      MYSQL_DATABASE: wordpress
      MYSQL_USER: systemuser
      MYSQL_PASSWORD: wordpass
      MYSQL_RANDOM_ROOT_PASSWORD: '1'
  wordpress:
    #image: wordpress:5.0.3-php7.3
    build: 
      context: .
      dockerfile: Dockerfile
    volumes: 
      - ./html:/var/www/html
    depends_on:
      - db
    ports:
      - 80:80
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_NAME: wordpress
      WORDPRESS_DB_USER: systemuser
      WORDPRESS_DB_PASSWORD: wordpass

wordpressのimageを指定しないで、dockerfile: Dockerfileとして、Dockerファイルを使えるように指定します。
/var/www/html/配下をvolumeでマウントしています。gitで管理する時に.gitignoreがちょっと面倒なりますが、一度書いてしまえばいいだけなので、こうしてます。

Dockerfile

FROM wordpress:5.0.3-php7.3

RUN \
    if [ ! -f /usr/local/lib/php/extensions/no-debug-non-zts-20180731/xdebug.so ]; then \
        pecl install xdebug; \
    fi; \
    { \
        echo 'zend_extension=/usr/local/lib/php/extensions/no-debug-non-zts-20180731/xdebug.so'; \
        echo '[xdebug]'; \
        echo 'xdebug.remote_enable=1'; \
        echo 'xdebug.remote_autostart=1'; \
        echo 'xdebug.remote_host=host.docker.internal'; \
        echo 'xdebug.remote_port=9000'; \
    } > /usr/local/etc/php/conf.d/php-xdebug.ini ;

Dockerコンテナから見たホストの指定は、xdebug.remote_host=host.docker.internalとしています。これは、公式ドキュメントに記載がありました。
echoした結果を、php-xdebug.iniとしていますが、php/conf.d/配下にあれば良いと思うので、好みで変更してください。

ここまで来たら、docker-compose.ymlから起動しましょう。あ、Docker Desktopが既にインストール、起動されていることにしてます。

docker-compose -f "docker-compose.yml" up -d --build

起動したと思ったら、docker psで確認して、STATUSがUPになっていれば成功です。

docker ps
CONTAINER ID        IMAGE                COMMAND                  CREATED             STATUS              PORTS                 NAMES
71ed3c76996c        wp-debug_wordpress   "docker-entrypoint.s…"   29 seconds ago      Up 27 seconds       0.0.0.0:80->80/tcp    wp-debug_wordpress_1
696e11badd0c        mysql:5.7.25         "docker-entrypoint.s…"   30 seconds ago      Up 28 seconds       3306/tcp, 33060/tcp   wp-debug_db_1

この時点でこのようなファイル構成になっているはずです。

% tree -L 1
.
├── Dockerfile
├── docker-compose.yml
├── html
└── mysql

PHP Debug

インストールされてない場合はインストールしましょう。これです。

インストールしたなら、アクティビバーのデバッグ（虫みたいなやつ）をクリックし、次に歯車をクリックします。

環境の選択が表示されるのでPHPを選択します。

launch.jsonが表示されるので、pathMappingsを追加します。それ以外はデフォルト設定です。ローカルPC上のパスは各自の環境に応じて変更してください。

launch.json

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",
            "port": 9000,
            "pathMappings": {
                "/var/www/html":"${workspaceFolder}/html"
            }
        },
        {
            "name": "Launch currently open script",
            "type": "php",
            "request": "launch",
            "program": "${file}",
            "cwd": "${fileDirname}",
            "port": 9000
        }
    ]
}

これで設定完了です！
2018/3/18 修正： ${workspaceFolder}が使えるとのことなので、フルパスから${workspaceFolder}に修正しました。

デバッグしてみる

では動作確認のために、デバッグしてみましょう。歯車マークの横の選択が、Listen for XDebugになっていることを確認し、デバッグメニューのデバッグの開始を選択します。

無事に開始されると、VSCodeのウィンドウ下部の色が変わります。
次に、使っているテーマディレクトリのfunction.phpを開いて、適当な場所にブレークポイントを設定します。ブレークさせたいコードのライン数の左をクリックしてください。

次にブラウザでWordPressのサイトを表示させましょう。

ブレークポイントの位置で実行が停止し、変数やコールスタックが表示されていると思います。
はい、これで動作確認も完了です。
もう、echo $hogeやvar_dump($hoge)は必要ありません