はじめに

タイトルのとおりです。
WordPressのプラグイン作成なんかを作りたい時に、Dockerさえインストールされていればサクッと環境構築できるようになります。

Dockerでメールを確認できる環境を作る記事も書いてますので、こちらも参考にしてください。

【WordPress】Dockerでメールを確認できる環境を構築する - Qiita

実はこんな方法があるのに、こいつ遠回りしてんな、、と気づかれた方はそっとコメントしていただけますと幸いです。

各ファイルの準備

下記のディレクトリ構成でファイルを用意してください。

ディレクトリ

public_html（<- プロジェクトのフォルダ名です。なんでも良いです。）
├── docker
│   ├── Dockerfile
│   ├── docker-entrypoint.sh
│   └── php.ini
├── docker-compose.yml
└── （WordPressプロジェクトはこの階層に入ります。）

すでにWordPressを開設していて、自身のファイルを利用したいという方は、public_htmlの配下にwp-adminやwp-contentが来るように配置していただければ大丈夫です。
後ほど紹介するdocker-compose.ymlで、ホストのファイルをコンテナ側にマウントするように設定しているからです。

Dockerfile

FROM wordpress:apache

RUN pecl install xdebug \
  && docker-php-ext-enable xdebug

WORKDIR /var/www/html
COPY docker-entrypoint.sh ./docker-entrypoint.sh
ENTRYPOINT ["docker-entrypoint.sh"]
CMD ["apache2-foreground"]

使用しているイメージはこちら↓です。
wordpress/latest/php7.4/apache at 376f01affcaacac50d8416b5f7f4abb34d6b60d2 · docker-library/wordpress

中身を見てもらえればわかると思いますが、RUNでxdebugをインストールしている以外はやっていることは変わりません。
ちなみに、下3行はコンテナの中身がホストのディレクトリ（public_htmlの中身）で上書きされないようにするための措置です。
詳細はこちら↓の記事が参考になると思います。
Dockerのボリュームのマウントのされ方についてちょっとまとめました - Qiita

docker-entrypoint.sh

長くなってしまうので、コードは記載しません。
先程の記事からコピーしてきただけなので、同じように内容をコピペしてください。

php.ini

[xdebug]
xdebug.idekey="VSCODE"
xdebug.remote_enable=1
xdebug.remote_autostart=1
xdebug.remote_connect_back=0
xdebug.mode=debug
xdebug.start_with_request=yes
xdebug.client_host=host.docker.internal
xdebug.client_port=9000

xdebug3に合わせた記述にしています。
なお、最後のxdebug.client_port=9000に関しては、ご自身の環境に合わせて変更しても良いですが、後ほどの設定で必要になるので覚えておくようにしてください。

docker-compose.yml

version: '3'

services:
  db:
    image: mysql:5.7
    ports:
      - "3306:3306"
    environment:
      MYSQL_ROOT_PASSWORD: wordpress
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress
    volumes:
      - db_data:/var/lib/mysql
  wordpress:
    depends_on:
      - db
    build: ./docker
    ports:
      - "8000:80"
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
      WORDPRESS_DB_NAME: wordpress
    volumes:
      - .:/var/www/html
      - ./docker/php.ini:/usr/local/etc/php/php.ini

volumes:
  db_data:

VSCodeの準備

VSCodeのWorkSpaceにpublic_htmlフォルダ、そしてそれ以下のファイルが格納されている状態にしてください。

PHP Debug

VSCodeではphpデバッグ用の拡張機能PHP Debugをインストールしてください。
有効化したら、左のバーから虫のアイコンを選択し、上の方に表示された歯車マークをクリックしてください。

選択肢がいくつか表示されるのでPHPを選択します。
public_htmlフォルダ直下に.vscode/launch.jsonというファイルが作成されるかと思いますのでこれを編集します。

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
        "name": "XDebug on docker",
        "type": "php",
        "request": "launch",
        "port": 9000,
        "pathMappings": {
            "/var/www/html": "${workspaceFolder}"
        }
    }
  ]
}

portはphp.iniで設定したxdebug.client_portの値を入れてください。
pathMappingsはコンテナ上のプロジェクトパス:ローカルのプロジェクトパスという書き方になるので、私の指定したディレクトリ構成であれば修正する必要ありません。

実行

PHP Debugでスタートボタンを押す（上の画像にある緑の三角形のボタンです）
public_html階層でdocker-compose up -d --build

以上の手順だけでpublic_html配下にWordPressのフォルダ群が自動的に作成され、localhost:8000でブラウザからWordPress管理画面を見れるはずです。

デバッグ

デバッグしたいコードで行数の左横をクリックしてください。赤い丸（ブレークポイント）が表示されるはずです。
処理がここを通過する際にこれがあると処理が止まります。
（VSCodeでのデバッグについて、詳しい説明はこの記事では省きます。）

参考