Sage主题开发框架 - wordpress开发

Sage是一个WordPress入门主题,具有现代开发工作流程。

Sage是一个WordPress入门主题,具有现代开发工作流程。

之前在 reddit 发过一个问题,wordpress 上是否有类似 Laravel Blade 这样的模板系统。

第一个回复我的大哥,推荐了 Sage,第一眼看到 Sage 感觉是个庞然大物,加之我对 wordpress 也完全不了解,不明白这货有什么用。 于是最初选择了 bladerunner 。

但是,使用 bladerunner 开发的过程中,我逐步发现,影响我开发效率的绝不仅仅是模板的问题,还有前端组件的积累问题; 同时,我也体会到了使用 Sass 写模块化可复用的样式的重要性。

于是,我对于 wordpress 主题开发工具栈又有了新的要求

  • Sass
  • 模板系统
  • 基础代码框架

转了一圈,发现 Sage 9 完全符合我的这3个需求

  • 采用了 Laravel Blade 模板引擎
  • 使用 Webpack/npm 替代了 gulp/bower。webpack 我不太熟悉,需要了解,但是 bower 在多年前我就觉得是个垃圾,果然现在死翘翘了。
  • ES6. 大兄弟,这个有点激进了。还在我也乐于折腾。
  • 内置 bootstrap 4。这个比较鸡肋,而且我用 sass 的主要目的是 fuck off bootstrap

来源于:Github

Sage是一个WordPress入门主题,具有现代开发工作流程。

特征

  • Sass的样式表
  • 现代JavaScript
  • Webpack用于编译资产,优化图像以及连接和缩小文件
  • Browsersync用于同步浏览器测试
  • 刀片作为模板引擎
  • 用于将数据传递到Blade模板的控制器
  • CSS框架(可选):Bootstrap 4,Bulma,Foundation,Tachyons,Tailwind

请参阅roots-example-project.com上的工作示例。

要求

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

  • WordPress > = 4.7
  • PHP > = 7.1.3(已php-mbstring启用)
  • 作曲家
  • Node.js > = 8.0.0

主题结构

themes / your-theme-name /    # →基于Sage的主题 
├──app/                   # →主题 
PHP│├──控制器/       # →控制器文件 
│├──admin.php          # →主题定制器设置 
│├─ ─filters.php        # →主题过滤器 
│├──helpers.php        # →辅助功能 
│└──setup.php          # →主题设置 
├──composer.json          # →自动加载的应用程序`/`文件 
├──作曲家。锁定          # →作曲家锁定文件(永不编辑) 
├──dist/                  #→内置主题资产(从未编辑) 
├──node_modules /          # →Node.js的包(从未编辑) 
├──的package.json           # →Node.js的依赖性和脚本 
├──资源/             # →主题素材和模板 
│├ 
──resources /            # →前端资产 ││├──config.json    # →编译资产设置 
││├──构建/         # →Webpack和ESLint配置 
││├──字体/         # →主题字体 
││ ├──图片/        # →主题图片 
││├──脚本/       #→主题JS 
││└──风格/        # →主题风格 
│├──的functions.php      # →作曲家自动加载,主题包括 
│├──的index.php          # →切勿手动编辑 
│├──screenshot.png     # →主题WP管理员的截图 
│├──style.css          # →主题元信息 
│└──视图/             # →主题模板 
│├──布局/       # →基本模板 
│└──部分/      # →部分模板 
└──供应商/                # →Composer包(永不编辑)

主题设置

编辑app/setup.php以启用或禁用主题功能,设置导航菜单,发布缩略图大小和侧边栏。

主题发展

  • yarn从主题目录运行以安装依赖项
  • 更新resources/assets/config.json设置:
  • devUrl 应该反映您的本地开发主机名
  • publicPath应反映您的WordPress文件夹结构(/wp-content/themes/sage适用于非Bedrock安装)

看完后一脸懵逼?没关系,我也是,所以我用了这个

Sage主题开发框架 - wordpress开发-Npcink
Sage主题开发框架 - wordpress开发-Npcink

_s - WordPress 主题开发板子

下载权限

查看
  • 免费下载
    评论并刷新后下载
    登录后下载

查看演示

  • {{attr.name}}:
您当前的等级为
登录后免费下载登录 小黑屋反思中,不准下载! 评论后刷新页面下载评论 支付以后下载 请先登录 您今天的下载次数(次)用完了,请明天再来 支付积分以后下载立即支付 支付以后下载立即支付 您当前的用户组不允许下载升级会员
您已获得下载权限 您可以每天下载资源次,今日剩余
教程

“wp_footer”和“get_footer”操作有什么区别?

2019-1-13 23:30:18

教程

wordpress开发 - 后台Ajax设置框架biji

2019-1-18 19:06:50

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 1355471563#qq.com 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索