使用Docker和VS Code进行WordPress插件开发

1 年 ago
宇, 华
3 minutes

这篇文章里可以做的事情

使用VS Code进行XDebug，并可以通过PHPUnit测试的WordPress插件开发所需的Dockerfile、docker-compose.yml、VS Code配置文件和php.ini已经创建完成。

环境

    • Mac OS 15.5

 

    • Docker Desktop 2.3.0.3

 

    • VS Code 1.47.1

 

    PHP Debug 1.13.0 ( Felix Becker 氏の作 )

假设目录结构如下所示。顺便提一下，插件目录应该使用中划线或者驼峰命名，而不是使用下划线命名。这样才能避免在使用PHPUnit时出现问题。
另外，假设yourPlugin.php文件中已经包含了正确的头部信息。如果对正确的头部信息不太清楚，可以复制粘贴这里提供的内容作为准备。

current_directory
|_.vscode
 |_launch.json
|_docker-compose.yml
|_Dockerfile
|_php.ini
|_your-plugin-directory/
 |_yourPlugin.php
 |_tests/
  |_testYourPlugin.php

在PHPUnit中，常见的问题。

为什么PHPUnit不接受具有下划线’_’的目录？

对目录名中的下划线字符的解释。

Dockerfile和docker-compose.yml文件

Docker的基础镜像是由Docker官方提供的。我们会在这个基础镜像上安装XDebug和PHPUnit，并修改Docker Compose快速入门中提供的docker-compose.yml文件。

Dockerfile:
Dockerfile文件

FROM wordpress:latest

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

RUN curl -L https://phar.phpunit.de/phpunit-7.5.9.phar >> phpunit-7.5.9.phar && \
    chmod +x phpunit-7.5.9.phar && \
    mv phpunit-7.5.9.phar /usr/local/bin/phpunit

请把以下内容用中文进行原生的改述，只需一种选择：

docker-compose.yml文件

version: '3'

services:
  db:
    image: mysql:5.7
    volumes:
      - db_data:/var/lib/mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: somewordpress
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress

  wordpress:
    depends_on:
      - db
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ./your-plugin-directory:/var/www/html/wp-content/plugins/your-plugin-directory
      - ./php.ini:/usr/local/etc/php/php.ini
    ports:
      - "8000:80"
    restart: always
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
volumes:
    db_data:

在这里先随意触碰一下php.ini，然后进行docker-compose build。
请注意从产生的日志中，在php.ini文件中写入zend_extension的设置，请小心。
虽然可能会听到PHPUnit不应该全局化的声音，但在这个Docker环境中，我们并不太在意，因为这里只是为了开发一个插件。

php.ini 和 launch.json

php.ini と .vscode/launch.json を書くことで、 VS Code で PHP Debug を使ったデバッグが出来る様になります。

php.ini文件

; Docker Image をビルドすると、
; You should add "zend_extension=/usr/local/lib/php/extensions/no-debug-non-zts-20180731/xdebug.so" to php.ini
; と言われるので素直に書きます。
; ここは人によって異なる可能性があるので注意が必要です。
zend_extension=/usr/local/lib/php/extensions/no-debug-non-zts-20180731/xdebug.so
[xdebug]
xdebug.remote_enable=1
xdebug.remote_autostart=1
; ホスト側のIP
; host.docker.internalはdockerのhostマシンのIPを解決してくれます。
; hostマシン以外のIPの場合は適宜IPを調べて設定してください。
xdebug.remote_host=host.docker.internal
; 空いているport番号（xdebugのデフォルトは9000）。
xdebug.remote_port=9000
; xdebugの出力するログの場所。今回は適当に/tmp配下に。
xdebug.remote_log=/tmp/xdebug.log

./vscode/launch.json 这个文件需要用中文翻译的话是”vscode”文件夹下的”launch.json”文件。

${workspaceRoot} を設定するのがキモです。

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "php",
      "name": "Docker debug",
      "request": "launch",
      "port": 9000,
      "pathMappings": {
        "/var/www/html/wp-content/plugins/your-plugin":"${workspaceRoot}/your-plugin"
      }
    }
  ]
}

ここで docker-comopse up -d して、ブラウザから localhost:8000 にアクセスすることで WordPress のセットアップが始まります。いつものセットアップが終わった後、管理ページにログインをしてプラグインを見に行くと、既にプラグインがインストールされているはずです。

確認

XDebug (原生解释)

我将确认XDebug是否可用。为此，让我们在插件目录中创建类似以下的插件模板。

你的插件目录/你的插件.php

<?php
/*
Plugin Name: Your Plugin
Description: プラグインの雛形です。
Version:     0.0.1
Author:      rotelstift
Text Domain: your-plugin
License:     GPL2

*/

class Your_Plugin {
	private const MENU_SLUG = 'your_plugin';

	public function __construct() {
		add_action( 'admin_menu', array( $this, 'add_pages' ) );
	}

	public function add_pages() {
		add_menu_page( 'Your Plugin Option', 'Your Plugin', 'activate_plugins', self::MENU_SLUG, array( $this, 'your_plugin_option_page' ) );
	}

	public function your_plugin_option_page() {
		echo 'This is your plugin.';
	}
}

$your_plugin = new Your_Plugin;

このプラグインを有効化すると、管理ページサイドメニューの一番下に Your Plugin というリンクが追加されるはずです。
そして、 VS Code のデバッガから echoのある行にブレークポイントを設定してデバッガをスタートさせてから、 Your Plugin のリンクをクリックしましょう。ちゃんとデバッガが動いていれば、 VS Code に処理が移るはずです。

PHPUnit是一个流行的PHP单元测试框架。

测试PHPUnit是否工作很简单。只需输入以下命令即可。

docker-compose run --rm wordpress phpunit --version

只要显示版本信息，就没有问题。
不过，在指定测试文件时有一点困难。为了避免这个困难，请按以下方式输入命令。

docker-compose run --rm wordpress /bin/bash -c "cd wp-content/plugins/your-plugin && phpunit tests/*"

# 以下の二つはなぜかエラーになる
docker-compose run --rm wordpress phpunit your-plugin/tests/*
docker-compose run --rm wordpress phpunit wp-content/plugins/your-plugin/tests/*

如果需要使用示例测试文件，可以使用此链接中的文件。

请提供相关资料

    • Dockerで構築したPHP環境をxdebugでデバッグ（vscode）

 

    • WordPressのプラグインを開発しよう（初級編）

 

    • 管理メニューの追加 – WordPress Codex 日本語版

 

    • 2. PHPUnit 用のテストの書き方 – PHPUnit latest Manual

 

    Header Requirements | Plugin Developer Handbook | WordPress Developer Resources
✖
广告
将在 10 秒后关闭
bannerAds