miltyerbaps / base_theme
WordPress 开发工作流程的现代主题
1.0.0
2021-02-24 12:12 UTC
Requires
- php: >=7.1
- composer/installers: ~1.9
- illuminate/support: 5.6.*
- roots/sage-lib: ~9.0.9
- soberwp/controller: ~2.1.0
Requires (Dev)
- roots/sage-installer: ~1.6
- squizlabs/php_codesniffer: ^2.8.0
This package is not auto-updated.
Last update: 2024-09-20 03:28:15 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。
主题结构
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)
主题设置
编辑 app/setup.php
以启用或禁用主题功能、设置导航菜单、文章缩略图大小和侧边栏。
主题开发
- 从主题目录运行
yarn
以安装依赖项 - 更新
resources/assets/config.json
设置devUrl
应反映您的本地开发主机名publicPath
应反映您的 WordPress 文件夹结构(非 Bedrock 安装为/wp-content/themes/sage
)
构建命令
yarn start
— 当文件更改时编译资源,启动 Browsersync 会话yarn build
— 编译和优化资产目录中的文件yarn build:production
— 编译生产资源
文档
贡献
我们欢迎所有人的贡献。我们有一些 贡献指南 帮助您开始。
Sage 赞助商
通过 成为赞助商 支持我们的开源开发工作
社区
跟踪开发和社区新闻。
- 在 Roots Discourse 参与讨论
- 关注 @rootswp 在Twitter上的动态
- 阅读并订阅 Roots 博客
- 订阅 Roots 电子邮件通讯
- 收听 Roots 广播播客