README

带有现代工具的插件模板，用于启动您的 WordPress 项目
这包括常见和现代工具，以促进插件开发和测试，采用有组织的面向对象结构，并启动 WordPress 插件的构建工作流程。

该模板基于插件 API、编码标准和文档标准。
包括 Composer、Requirements 微包以测试插件的环境需求，Codeception 进行单元/验收测试，PHPCodeSniffer 与 WordPress 编码标准验证代码，TravisCI 配置用于自动测试和持续集成，面向对象的代码结构以更好地概述，以及自动类加载器，它根据请求类型自动实例化类。
这可以与 Webpack 5 工作流程结合使用，通过包含 Webpack v5 打包器、BabelJS v7、BrowserSync v2、PostCSS v8、PurgeCSS v3、Autoprefixer、Eslint、Stylelint、SCSS 处理器、WPPot 等的 npx 快速入门脚本来进行前端开发。

快速入门

应在您的插件文件夹（wp-content/plugins）内运行。

npx wp-strap plugin

您还可以使用具有预定义答案的 npx 脚本来快速开始

npx wp-strap plugin "projectName:Your plugin name" "description:Test the plugin" "pluginVersion:1.0.0" license:MIT "author:The Dev Company" authorEmail:hello@the-dev-company.com url:the-dev-company.com webpack:Y codesniffer:Y codeception:Y travisCi:Y css:Sass+PostCSS

在您的终端输入后，需要几分钟的时间来安装；它将克隆 Git 存储库，搜索和替换所有插件数据，执行 composer install，如果与 Webpack 工作流程结合，则还将执行 npm install

了解有关配置和构建脚本的更多信息

功能与优势

后端

Composer（命名空间 + PSR4 自动加载 + 依赖管理器）

命名空间 支持将所有代码分组在自定义名称下。这样，您的类、函数等就不会与其他同时在该网站上运行的代码冲突

PSR-4 自动加载器 用于与命名空间关联自动加载文件和目录

包括 依赖管理器，以便轻松地从 packagist 加载第三方库，并将其锁定在特定版本上

面向对象和类自动加载

包括 OOP-style 结构，用于构建高质量的 PHP 开发

类正通过扩展Composer的PSR-4自动加载器并基于请求类型和文件夹结构自动实例化（请参阅Bootstrap.php#L79），您可以在此处添加请求的类型（请参阅Config/Classes.php#L28）。因此，您可以通过正确命名文件并将其放置在合适的位置来添加自己的新类文件，并直接在此处工作，无需手动包含或实例化。Composer的自动加载器和Bootstrap类将自动包含您的文件并实例化该类。

结构遵循插件API、编码标准和文档标准。

PHPCodeSniffer + WordPress编码标准 + Automattic的phpcs-neutron-ruleset

PHP CodeSniffer内置了预定义的配置，用于适当的代码检查。PHP CodeSniffer是一个必不可少的开发工具，它确保您的代码保持干净和一致。

PHPCS通过WordPress编码标准和PHPCompatibilityWP扩展，后者是一组PHP CodeSniffer规则（sniffs），用于验证为WordPress开发的代码。它确保代码质量和遵守编码约定，特别是官方的WordPress编码标准。

PHPCS还扩展了Automattic的phpcs-neutron-ruleset，这是一套适用于WordPress开发的现代（PHP>7）代码检查指南。

Codeception（单元/验收测试）

Codeception内置了，它将所有测试级别（接受、功能、集成、单元）与WordPress定义的函数、常量、类和方法结合起来，可以在任何测试中使用。

使用灵活的内置模块集，测试编写、使用和维护都很容易。

插件要求

要求micropackage内置，允许您测试运行插件的环境要求。它可以测试：PHP版本、PHP扩展、WordPress版本、活动插件、当前主题、DocHooks支持。

使用一个简单的数组轻松配置。

如果插件未通过测试，则WordPress将自动禁用该插件，并在后端显示通知。

TravisCI

准备好使用的TravisCI配置，用于自动测试和持续集成，目前仅在部署时自动测试期间使用PHPCodeSniffer验证插件代码，但也可以扩展到测试Codeception的单元/验收用例。

美化错误和类调试数组

包括一个名为Errors::wpDie的函数，用于显示带有插件信息和文件来源的美化后的WP_DEBUG错误。

包括一个名为Errors::pluginDie的函数，用于终止插件并显示带有插件信息和文件来源的美化后的管理通知。

包括一个当设置为true时用于调试引导类加载器的函数，并查看加载了哪些类，它们是否在请求的页面上加载，加载顺序以及检查每个类中运行代码的执行时间。查看函数，并查看引导类加载器的调试结果。

前端（Webpack）

为前端工具正在克隆Webpack工作流程。了解更多关于这个工作流程的信息：[https://github.com/wp-strap/wordpress-webpack-workflow](https://github.com/wp-strap/wordpress-webpack-workflow)

样式（CSS）

生产模式下的最小化由Webpack处理

PostCSS，用于Webpack的PostCSS-loader在CSS转换期间提供方便的工具

自动前缀化使用PostCSS的autoprefixer解析CSS并添加来自Can I Use的供应商前缀到CSS规则。它被Google推荐，并被Twitter和阿里巴巴使用。

PurgeCSS，它扫描您的PHP（模板）文件，在生成模式下从CSS中删除未使用的选择器，从而生成更小的CSS文件。

源映射的生成，用于调试目的，由Webpack处理各种源映射样式

Stylelint，它帮助您避免错误并在样式上强制执行约定。它包括一个Sass的linting工具。

仅使用PostCSS时的样式

包括postcss-import，通过@import语句消耗本地文件、node模块或web_modules

包括postcss-import-ext-glob，它扩展postcss-import路径解析器，允许使用glob作为路径

包括postcss-nested来展开嵌套规则，就像Sass做的那样。

包括postcss-nested-ancestors，它引入了^&选择器，允许您使用简单且可定制的界面引用任何父级祖先选择器

包括postcss-advanced-variables，它允许您在CSS中使用类似Sass的变量、条件语句和迭代器。

使用Sass+PostCSS时的样式

Sass到CSS的转换使用Webpack的sass-loader

包括Sass魔法导入器，用于处理Sass @import语句的许多复杂操作

JavaScript

BabelJS Webpack加载器，使用BabelJS配置文件使用下一代JavaScript

生产模式下的最小化

代码拆分，能够将JavaScript代码结构化为模块和包

源映射的生成，用于调试目的，由Webpack处理各种源映射样式

ESLint，使用linting配置（包括WordPress开发的配置和自定义规则）查找并修复JavaScript代码中的问题

Prettier 用于自动格式化 JavaScript / TypeScript 代码

图像

ImageMinimizerWebpackPlugin + CopyWebpackPlugin 通过以下方式优化（压缩）所有图像：

文件类型：.png、.jpg、.jpeg、.gif、.svg

翻译

WP-Pot 自动扫描所有文件并生成用于 i18n 和 l10n 的 .pot 文件

BrowserSync、Watcher 和 WebpackBar

Watch Mode 监视文件变化以重新编译

文件类型：.css、.html、.php、.js

BrowserSync 同步浏览器、URL、交互和代码更改，并在更改时自动刷新所有设备的所有浏览器

WebPackBar，在开发过程中提供真实的进度条，还包含一个 分析器

配置

所有配置文件 .prettierrc.js、.eslintrc.js、.stylelintrc.js、babel.config.js、postcss.config.js 都组织在单个文件夹中

Webpack 配置分为两个环境配置文件，用于开发和生产构建/环境

要求

文件结构

您可以通过正确命名文件并将文件放在最合适的位置来添加自己的新类文件，请参阅其他文件以获取示例。Composer 的 Autoloader 和 Bootstrap 类将自动包含您的文件并实例化类。这种组织方式旨在使您更加关注代码的结构。

│ ## First level files
├──the-plugin-name.php           # Main entry file for the plugin
├──composer.json                 # Composer dependencies & scripts
├──phpcs.xml.dist                # PHPCodeSniffer configuration
├──codeception.dist.yml          # Codeception testing configuration
├──.env.testing                  # Codeception testing environment configuration
├──.travis.yml                   # TravisCI configuration for automatic testing & continuous integration
├──package.json                  # (incl. when using webpack) Node.js dependencies & scripts (NPM functions)
├──webpack.config.js             # (incl. when using webpack) Holds all the base Webpack configurations
│
│ ## Folders
├──src                           # Holds all the plugin php classes
│   ├── Bootstrap.php            # Bootstraps the plugin and auto-instantiate classes
│   ├── App                      # Holds the plugin application-specific functionality
│   │   ├── Frontend             # All public-facing hooks/functionality
│   │   ├── Backend              # All admin-specific hooks/functionality
│   │   ├── General              # Hooks/functionality shared between the back-end and frontend
│   │   ├── Cli                  # Code for cli commands
│   │   ├── Cron                 # Code for cron events
│   │   ├── Rest                 # Code for rest api functionalities
│   ├── Config                   # Plugin configuration code
│   │   ├── Classes.php          # Defines the folders and order of classes to init
│   │   ├── I18n.php             # Internationalization and localization definitions
│   │   ├── Plugin.php           # Plugin data which are used through the plugin
│   │   ├── Requirements.php     # Defines the requirements that are needed to run this plugin.
│   │   ├── Setup.php            # Plugin setup hooks (activation, deactivation, uninstall)
│   ├── Common                   # Utilities & helpers shared in the whole plugin 
│   │   ├── Abstracts            # Here you can add abstract classes to extend your php classes
│   │   │   ├── Base.php         # A base class which all classes extends to load in default methods, currently the plugin data is only being injected
│   │   ├── Traits               # Here you can add handy traits to extend your php classes
│   │   │   ├── Requester.php    # The requester trait to determine what we request; used to determine which classes we instantiate in the Bootstrap class
│   │   │   ├── Singleton.php    # The singleton skeleton trait to instantiate the class only once
│   │   ├── Utils                # Here you can add helper/utiliy functions, eg: array functions
│   │   │   ├── Errors.php       # Utility class for the prettified errors and to write debug logs as string or array
│   │   ├── Functions.php        # Main function class for external/global functions, eg: "plugin_name()->your_function"
│   ├── Integrations             # Includes the integration with libraries, api's or other plugins
│   ├── Compatibility            # 3rd party compatibility code
├──tests                         # Codeception test files
├──templates                     # Folder to include all the template files
│   ├── test-template.php        # Example template file
├──languages                     # WordPress default language map in Plugins & Themes
│   ├── the-plugin-name.pot      # Boilerplate POT File that gets overwritten by WP-Pot 
├──webpack                       # (incl. when using webpack) Holds all the sub-config files for webpack
│   ├── .prettierrc.js           # Configuration for Prettier
│   ├── .eslintrc.js             # Configuration for Eslint
│   ├── .stylelintrc.js          # Configuration for Stylelint
│   ├── babel.config.js          # Configuration for BabelJS
│   ├── postcss.config.js        # Configuration for PostCSS
│   ├── config.base.js           # Base config for Webpack's development & production mode
│   ├── config.development.js    # Configuration for Webpack in development mode
│   └── config.production.js     # Configuration for Webpack in production mode
└──assets
    ├── src                      # (incl. when using webpack) Holds all the source files
    │   ├── images               # Uncompressed images
    │   ├── scss/pcss            # Holds the Sass/PostCSS files
    │   │ ├─ frontend.scss/pcss  # For front-end styling
    │   │ └─ backend.scss/pcss   # For back-end / wp-admin styling
    │   └── js                   # Holds the JS files
    │     ├─ frontend.js         # For front-end scripting
    │     └─ backend.js          # For back-end / wp-admin scripting
    │
    └── public
        ├── images               # Optimized (compressed) images
        ├── css                  # Compiled CSS files with be generated here
        └── js                   # Compiled JS files with be generated here

要配置的内容

当使用 codeception 时，在 .env.testing 中配置环境设置，其他配置可以在 codeception.dist.yml 中找到
当使用 Webpack 时，在 webpack.config.js 中编辑 BrowserSync 设置，这将适用于您的本地/服务器环境
- 您还可以在 webpack.config.js 中禁用 BrowserSync、Eslint 和 Stylelint
- 您可能需要配置 /webpack/ 和 webpack.config.js 中的文件以满足您的需求
您可以在 WordPress 中激活插件并立即开始工作。

验收测试和单元测试

使用 Codeception 进行测试无需任何额外配置
使用 composer generate:wpunit 或 composer generate:acceptance 创建测试文件
编写您的测试方法并运行 composer run:wpunit 或 composer run:acceptance
更详细的文档可以在这里找到 https://codeception.com/for/wordpress

PHPCodeSniffer

使用 composer phpcs 运行 PHPCodeSniffer 以验证您的插件代码
在 phpcs.xm.dist 中配置 PHPCodeSniffer
文档可以在以下位置找到

插件要求

使用简单的数组在 src/Config/Requirements.php 中设置您的插件要求
它可以测试：PHP版本，PHP扩展，WordPress版本，活动插件，当前主题，DocHooks支持
如果插件未通过测试，它将在WordPress中自动禁用并在后端显示通知
文档可以在以下位置找到：[链接](https://github.com/micropackage/requirements)

TravisCI

在.travis.yml中配置TravisCI
目前它只在部署时进行自动化测试，验证插件代码的PHPCodeSniffer
一篇很好的文章可以在这里找到：[链接](https://stevegrunwell.com/blog/travis-ci-wordpress-plugins/)

前端/Webpack工具

当使用webpack时，您可以使用以下内容进行前端构建过程。[更多信息](https://github.com/wp-strap/wordpress-webpack-workflow)

本地开发

要本地工作（Eslint，Stylelint & Prettier激活），请运行

yarn dev

或使用监视器和browserSync运行

yarn dev:watch

这将打开一个浏览器，监视所有文件（php，scss，js等），并在您按下保存时重新加载浏览器。

为生产构建

要创建一个优化的生产构建（使用PurgeCSS清理并完全最小化CSS和JS文件），请运行

yarn prod

或使用监视器和browserSync运行

yarn prod:watch

Composer.json依赖项

依赖项	描述	版本
	插件需求
micropackage/requirements	允许您测试运行插件的环境需求。	1.0
	PHPCodeSniffer
dealerdirect/phpcodesniffer-composer-installer	允许轻松安装PHP_CodeSniffer编码标准（规则集）	0.7.1
wp-coding-standards/wpcs	PHP_CodeSniffer规则（嗅探器）集合，用于验证为WordPress开发的代码	*
automattic/phpcs-neutron-ruleset	WordPress开发的一套现代（PHP >7）linting指南	3.3
phpcompatibility/phpcompatibility-wp	分析WordPress项目的代码库的PHP跨版本兼容性	2.1
	Codeception
lucatume/function-mocker	一个Patchwork驱动的函数模拟器，用于测试模拟函数	1.0
lucatume/wp-browser	提供使用Codeception进行WordPress插件、主题和整个站点的易于接受的、功能性的、集成性和单元测试	3.0
Codeception/lib-innerbrowser	所有Codeception框架模块和PhpBrowser的父库	1.0
codeception/module-asserts	包含各种断言的Codeception模块	1.0
codeception/module-phpbrowser	用于使用非JavaScript浏览器执行网络接受测试	1.0
codeception/module-webdriver	使用W3C WebDriver协议在真实浏览器中运行测试	1.0
codeception/module-db	Codeception的数据库模块	1.0
codeception/module-filesystem	用于测试本地文件系统的Codeception模块	1.0
codeception/module-cli	用于测试基本shell命令和shell输出的Codeception模块	1.0
codeception/module-rest	Codeception的REST模块	1.2
codeception/util-universalframework	Mock框架模块，用于Codeception内部测试	1.0
codeception/codeception-progress-reporter	带有进度条的codeception报告器	4.0.2

Package.json依赖项

https://github.com/wp-strap/wordpress-webpack-workflow#packagejson-dependencies

模板的变更日志

记录此项目进展...

2021年1月15日

重构：(webpack/frontend) 从NPM迁移到Yarn以提高速度，install时间从183.281秒缩短到65.76秒-90.02秒。

2021年1月14日

新功能：添加包含所有翻译字符串的POT文件
重构：将类数组移至自己的配置文件
新功能：添加npx CLI构建脚本 + 文档

2021年1月9日

重构：重命名插件（元）数据为可替换的名称

2021年1月8日

新功能：添加包含配置文件的PHP_CodeSniffer和WordPress-Coding-Standards
新功能（.travis.yml）：添加TravisCI配置文件
新功能：添加bootstrap类调试方法
新功能：README.md文件

wpstrap / wordpress-plugin-boilerplate

维护者

详细信息