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安裝)
看完后一臉懵逼?沒關系,我也是,所以我用了這個