README

Zen 是一个基于 Genesis 框架的子主题，拥有现代的开发工作流程。 在线演示

已测试至 WordPress 5.7.2 和 Genesis 3.3.3。

功能

• 从 npm 注册表消费包
• 现代 JavaScript
• 使用 SASS/SCSS 为样式表
• 使用 Autoprefixer 以使 CSS 能够与所需的供应商前缀一起工作
• 使用 Webpack 压缩和捆绑代码
• 拆分大文件并将生成的部分入队
• 使用 Browsersync](http://www.browsersync.io/) 同步浏览器测试

要求

在继续之前，请确保已安装所有要求

• WordPress >= 5.0
• Genesis 框架 >= 3.0.0
• PHP >= 7.1
• Composer
• Node.js >= 10.0.0
• Yarn

主题安装

使用 Composer 从您的 WordPress 主题目录安装 Zen（将下面的 your-theme-name 替换为您主题的名称）

# initialize the theme
$ composer create-project nicbeltramelli/zen your-theme-name

# move inside your theme folder
$ cd your-theme-name

# install front-end dependencies
$ yarn

# bootstrap project
$ yarn bootstrap

主题设置

1. 编辑 style.css 以定义您的主题元信息（名称、URI、描述、版本、作者）
2. 编辑处理开发服务器的 wpackio.server.js

• proxy 应反映您的本地开发 URL，例如 'http://your-address.local'
• distPublicPath 应反映您 dist 文件夹的绝对 URL 路径，例如 '/wp-content/themes/your-theme-name/dist/'
  您必须添加一个反斜杠在末尾，否则它将无法正常工作。

主题开发

# start development server
$ yarn start

# create production build
$ yarn build

# create distribution package
$ yarn archive

WordPress 编码标准

• composer phpcs — 运行 WordPress 编码标准检查
• composer phpcbf — 自动修复 php 报警违规

主题结构

themes/your-theme-name/  # → Root of your child theme
├── src/                 # → Front-end assets
│   ├── scripts/         # → Theme JS
│   └── styles/          # → Theme stylesheets
├── config/              # → Theme configuration data
├── dist/                # → Built theme assets (never edit)
├── lib/                 # → Theme PHP library
│   ├── blocks/          # → Add support for Gutenberg blocks
│   ├── structure/       # → Theme structure
│   ├── woocommerce/     # → WooCommerce PHP library
│   ├── admin.php        # → Adds the admin dashboard setting
│   ├── assets.php  	 # → Enqueue assets
│   ├── body-classes.php # → Adds consistent classes to the body tag
│   ├── customize.php    # → Adds the Customizer addition
│   ├── defaults.php     # → Configures the default theme settings
│   ├── errors.php       # → Displays error messages
│   ├── extras.php       # → Custom functions
│   ├── helpers.php      # → Adds the required helper functions
│   ├── output.php       # → Adds the required CSS to the front-end
│   └── setup.php        # → Defines theme constants and features
├── node_modules/        # → Node.js packages (never edit)
├── page-templates/      # → Custom page templates
├── vendor/              # → Composer packages (never edit)
├── composer.json        # → Composer dependencies and scripts
├── composer.lock        # → Composer lock file (never edit)
├── front-page.php       # → Front page template
├── function.php         # → Includes the theme PHP library
├── package.json         # → Node.js dependencies and scripts
├── search.php           # → Search template
├── style.css            # → Theme meta informations
├── wpackio.project.js   # → Project configuration
├── wpackio.server.js    # → Dev server configuration
└── yarn.lock            # → Yarn lock file (never edit)

依赖关系

• wpack.io
• Animate.css
• Headroom.js
• normalize-scss
• sass-mq