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 sniff违规

主题结构

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