README

Cask 是一个具有现代开发工作流的 WordPress 入门主题。

特性

PostCSS 用于使用 JS 插件转换样式，包括 CSS 检查、支持变量和混入、转译未来 CSS 语法、内联图片等
ES6 JS Modules 用于模块化开发标记为 CSS 和 JS 文件
Webpack 用于 '打包'、预处理和连接/压缩文件
Browsersync 用于同步浏览器测试
The Module API 用于模块化 WordPress 主题开发
BEM 方法论用于帮助 CSS 类命名和创建可重用组件。
Stave，一个轻量级功能 CSS 库，用于补充 BEM 定义。
GitLab CI 配置用于测试和自动部署（与 Pantheon）

在 dev-barrel-base-theme.pantheonsite.io 上查看一个工作示例。

要求

在继续之前，请确保已安装所有依赖项

WordPress >= 4.7
Node.js >= 6.9.x
Lando >= v3.0.0-rc.1

该主题使用 barrel-cli，它封装了 webpack、postcss 和 browsersync 的大部分功能，以及用于我们模块化开发工作流程的工具。

如果您在设置过程中遇到问题，请在 GitHub 上打开一个问题。

主题安装

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

# @ wp-content/themes/
$ composer create-project barrel/cask your-theme-name

要安装 Cask 的最新开发版本，请将 dev-master 添加到命令末尾

$ composer create-project barrel/cask your-theme-name dev-master

在主题安装过程中，您将有机会更新 style.css 主题标题、选择 CSS 框架以及配置 Browsersync。

主题结构

themes/your-theme-name/   # → Root of your Cask based theme
├── .babelrc              # → Babel Config
├── .editorconfig         # → EditorConfig
├── .eslintrc.js          # → EsLint/Standard Config
├── .gitignore            # → Git Ignore file pattern
├── .stylelintrc          # → StyleLint Config
├── acf-json/             # → ACF JSON autoloading
├── assets/               # → Front-end assets
│   ├── img/              # → Theme images
│   │   └── favicon/      # → Favicon images
│   ├── fonts/            # → Theme fonts
│   └── *.min.(css|js)    # → Built theme assets (never edit)
├── cpt-json/             # → CPT and taxonomy definitions
├── config.yml            # → Browsersync proxy targets
├── composer.json         # → Empty composer config
├── functions.php         # → Theme includes for initialization and helpers 
├── lib/                  # → Theme PHP
│   ├── helpers/          # → Helper files
│   └── vendor/           # → Composer packages (never edit)
├── modules/              # → Front-end modules (PHP, CSS, JS)
├── node_modules/         # → Node.js packages (never edit)
├── package-lock.json     # → Node.js dependency lockfile (new packages only)
├── package.json          # → Node.js dependencies and scripts
├── postcss.config.js     # → PostCSS Config
├── README.md             # → This file 
├── screenshot.png        # → Theme screenshot for WP admin
├── style.css             # → Theme meta information
├── src/                  # → Theme PHP
│   ├── css/              # → Theme stylesheets
│   └── js/               # → Theme javascript
├── tasks/                # → Theme tasks (node/webpack)
├── templates/            # → Theme templates
└── webpack.config.css    # → Webpack config

主题设置

编辑 lib/class-theme-init.php 以启用或禁用主题功能、设置导航菜单、帖子缩略图大小等。

主题开发

从主题目录运行 npm i && npm run dependencies 以安装依赖项
更新 config.yml 设置
- production.target 应反映您的实时环境主机名（如果适用）
- development.target 应反映您的本地开发主机名

主题命令

npm start — 当文件发生变化时编译资产，启动 Browsersync 会话
npm run build — 编译和优化您的资产目录中的文件
npm run test — 测试代码样式和语法

文档

Cask 文档 — 本存储库中提供的 markdown 文件

贡献

欢迎所有人的贡献。我们提供了贡献指南，以帮助您开始。

barrel-dev / cask

维护者

详细信息