首先說明一點的就是我講的順序可能并不是按照一個真正開發(fā)主題的流程來做的。是我想到什么就寫什么的,完全是按照我自己的理解以及開發(fā)經(jīng)驗來做的赐稽。所以說的并不是太好,希望大家能諒解酒贬。
-----談一談后端主題框架
其實我對這個后端框架并不是太了解能說的就是他能最大程度的提高主題的開發(fā)效率又憨,而且本身框架定制了一些后臺選項讓主題設(shè)置起來更效率。那么我就來說說我看到的比較好的框架了锭吨。
首先就是這個sage https://roots.io/sage/蠢莺,其實sage是一套wordpress解決方案的一部分,本身是一個起步主題。其中引入了很多新的開發(fā)特性零如,包括:
- SASS的支持
+ES6的最新支持(開發(fā)環(huán)境)
+Webpack的編譯操作
+Browsersync的自動同步加載
+Laravel's BladeLaravel模板引擎支持(后面詳細(xì)說)
+CSS 框架選項 - Font Awesome ICON字體庫 (可選支持)
---那么我來詳細(xì)談?wù)勥@幾個地方
SASS ES6估計做前端的人都多少知道些躏将。這個我不重點講,主要還是說下Blade模板引擎的支持考蕾。
眾所周知wp最讓人惡心的就是原生php標(biāo)簽和html的混排使用如下代碼
這個看多了真的是讓人有點崩潰祸憋,尤其是項目開發(fā)者功能新設(shè)計較多的地方。寫起來確實是讓你不太舒服肖卧。用laravel的同學(xué)一定都知道Laravel的視圖有個很牛逼的模板是Blade蚯窥,其實這樣類似的還有很多什么Twig之類的。這里要說明的就是sage主題在sage-8.5.1以后新推出的sage-9.0 beta版本才是有模板的。8.0版本還是以前的版本拦赠。隨著使用新的模板巍沙,對開發(fā)環(huán)境也是有要求的
Yarn是新一代的說是替代npm的node包管理工具,這個我現(xiàn)在用過速度上確實是比npm快了不知道多少荷鼠,但是安裝完的依賴確實是有一點點問題句携。所以說還是有點坑的。如果不熟悉這個的東西你玩去是可以用npm來替代它的允乐。
剩下composer的支持矮嫉。不知道的同學(xué)請你百度,這是新一代的php開發(fā)庫依賴工具牍疏。目前Laravel蠢笋,CI4、S家的框架以及一些比較新的工具都使用composer來做安裝麸澜。原則上支持了PSR-0到PSR-7的開發(fā)規(guī)范模式挺尿。不過就大眾來說呢4.0就已經(jīng)很完美了奏黑。等掌握了這都不是什么難事炊邦。
安裝主題
我這里就直接給出github的安裝吧。很簡單熟史,就是在主題開發(fā)的目錄中使用composer 命令就可以把整個saga主題下載下來馁害。
主題目錄結(jié)構(gòu)
什么好說的都是典型的wp式結(jié)構(gòu)。這里有幾個比較關(guān)鍵的地方我一 一說來:
composer.json
那么我們首先看下composer的包依賴說明,
截圖中我們可以看到sage利用的最常用的PSR-4規(guī)范開發(fā)蹂匹,將整個
src/lib/Sage/
目錄自動加載為 "namespace Roots\Sage\"
這就大大降低了開發(fā)難度碘菜,讓我不用因為require的文件未引入而引起不必要的bugs麻煩。再有一點就是現(xiàn)在已經(jīng)是PHP7.0的時代了OOP大行其道的世紀(jì)在使用原始的開發(fā)模式就有點更不上環(huán)境的需要了限寞。而且很多新開發(fā)思路更有想法忍啸,代碼也清晰了不少。那么我們接著往下看履植。
啊哈~ view使用了Laravel的blade计雌,并且使用了Laravel中很好用的config包來管理一些配置信息。具體請看Laravel API文檔
最底下還有
這是什么呢玫霎?這是在創(chuàng)建composer的時候CMD自動回運行的一些函數(shù)信息.我們來see see 代碼~
首先要理解這個Event事件
所以說根據(jù)上面的文檔說明凿滤。這個updateHeaders()
實現(xiàn)了一個初始化headers的方法就是在項目創(chuàng)建時候會在cmd控制臺中讓你輸入你的項目名字啊,url啊介紹等等主題的信息庶近。
最后利用file_put_contents
會寫到style.css
文件中完成整個主題的信息的初始化翁脆。那么我們繼續(xù)看...
恩,其實經(jīng)過上面的提示也就知道這就是讓親們選擇主題框架的采用的前端架構(gòu)
Font Awesome的選項 同理
這是bower 的代碼目錄用于處理你的bower 處理安裝完成完CSS js之后存放在哪里調(diào)用的鼻种。
好了基本項目的主題框架的創(chuàng)建就完成了反番。接下來我們繼續(xù)講解在PSR-4規(guī)范下開發(fā)主題的一些東西。