bonnier / wype-theme
WordPress 开发工作流现代化的起始主题
dev-master
2019-03-07 10:51 UTC
Requires
- php: >=7.1
- composer/installers: ~1.0
- guzzlehttp/guzzle: ^6.3
- roots/sage-lib: ~9.0.7
- soberwp/controller: ~2.1.0
- symfony/http-foundation: ^4.2
Requires (Dev)
- johnpbloch/wordpress: ^5.1
- phpunit/phpunit: ^7.5
- roots/sage-installer: ~1.6
- squizlabs/php_codesniffer: ^2.8.0
This package is not auto-updated.
Last update: 2024-09-17 16:15:31 UTC
README
Sage 是一个具有现代化开发工作流的 WordPress 起始主题。
特性
- 用于样式表的 Sass
- 现代 JavaScript
- Webpack 用于编译资源、优化图片、合并和压缩文件
- Browsersync 用于同步浏览器测试
- Blade 作为模板引擎
- Controller 用于将数据传递到 Blade 模板
- CSS 框架(可选):Bootstrap 4、Bulma、Foundation、Tachyons、Tailwind
在 roots-example-project.com 查看工作示例。
要求
在继续之前,请确保已安装所有依赖项
主题安装
使用 Composer 从您的 WordPress 主题目录安装 Sage(将下面的 your-theme-name
替换为您主题的名称)
# @ app/themes/ or wp-content/themes/
$ composer create-project roots/sage your-theme-name
要安装 Sage 的最新开发版本,请将 dev-master
添加到命令末尾
$ composer create-project roots/sage your-theme-name dev-master
在主题安装过程中,您将有权更新 style.css
主题头部,选择 CSS 框架,并配置 Browsersync。
devUrl
应反映您的本地开发主机名
themes/your-theme-name/ # → Root of your Sage based theme ├── app/ # → Theme PHP │ ├── Controllers/ # → Controller files │ ├── admin.php # → Theme customizer setup │ ├── filters.php # → Theme filters │ ├── helpers.php # → Helper functions │ └── setup.php # → Theme setup ├── composer.json # → Autoloading for `app/` files ├── composer.lock # → Composer lock file (never edit) ├── dist/ # → Built theme assets (never edit) ├── node_modules/ # → Node.js packages (never edit) ├── package.json # → Node.js dependencies and scripts ├── resources/ # → Theme assets and templates │ ├── assets/ # → Front-end assets │ │ ├── config.json # → Settings for compiled assets │ │ ├── build/ # → Webpack and ESLint config │ │ ├── fonts/ # → Theme fonts │ │ ├── images/ # → Theme images │ │ ├── scripts/ # → Theme JS │ │ └── styles/ # → Theme stylesheets │ ├── functions.php # → Composer autoloader, theme includes │ ├── index.php # → Never manually edit │ ├── screenshot.png # → Theme screenshot for WP admin │ ├── style.css # → Theme meta information │ └── views/ # → Theme templates │ ├── layouts/ # → Base templates │ └── partials/ # → Partial templates └── vendor/ # → Composer packages (never edit)
publicPath
应反映您的 WordPress 文件夹结构(对于非 Bedrock 安装为 /wp-content/themes/sage
)
主题结构
主题设置
- 编辑
app/setup.php
以启用或禁用主题功能,设置导航菜单,文章缩略图大小和侧边栏。 - 主题开发
- 从主题目录运行
yarn
以安装依赖项 - 更新
resources/assets/config.json
设置
- 从主题目录运行
构建命令
yarn start
— 当文件更改时编译资源,开始 Browsersync 会话yarn build
— 编译和优化资产目录中的文件yarn build:production
— 编译生产环境资源
文档
贡献
欢迎所有人的贡献。我们有一份 贡献指南 来帮助您入门。
Sage 赞助商
通过 成为赞助商 来支持我们的开源开发工作。
社区
跟踪开发和社区新闻。
- 在 Roots Discourse 上参与
- 关注 @rootswp 在 Twitter 上的动态
- 阅读并订阅 Roots 博客
- 订阅 Roots 新闻通讯
- 收听 Roots 电台播客