wordpress開発にはXdebugがとても便利だったので紹介。
ブレークポイントを設定して変数の値の変化や、処理の流れを追えるので

var_dump($hoge); // スマートじゃない

などで、都度検証しなくて良く
開発が非常にやりやすくなる。

普段 wordpressのテーマ開発で使っている「wp-env」には Xdebug がインストールされていて、簡単に使うことが出来た。
(ちなみにwp-envにはdockerが必要です)

準備

手順1

wp-envをインストール

  npm i @wordpress/env

手順2

PHP Debug エクステンションを Xcodeにインストールする
https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-debug

vscodeを再起動する

手順3

プロジェクトルートに「.vscode/launch.json」を用意する
「pathMappings」の箇所は独自のものに変更


{
  // IntelliSense を使用して利用可能な属性を学べます。
  // 既存の属性の説明をホバーして表示します。
  // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Listen for Xdebug",
      "type": "php",
      "request": "launch",
      "port": 9003,
      "pathMappings": {
          "/var/www/html/wp-content/themes/example_theme": "${workspaceFolder}/wp-content/themes/example_theme" # テーマのディレクトリをコンテナー内とマッピング
      }
    }
  ]
}

手順4

xdebugオプションをつけて、wp-envを実行する


  "scripts": {
    "wp-start": "wp-env start --xdebug",
    "wp-update": "wp-env start --xdebug -- --update",　 //　これじゃないとダメっぽい
  }

// 参照
https://ja.wordpress.org/team/handbook/block-editor/reference-guides/packages/packages-env/