CSS和JS合并的WordPress插件
我們平時(shí)會(huì)考慮把多個(gè)CSS或JS合并為一個(gè)文件輸出,為了解決這個(gè)問題,我寫了這個(gè)WordPress插件,用來實(shí)現(xiàn)WordPress中的這一目的。
實(shí)現(xiàn)原理
如果你讀過我之前的《PHP合并壓縮css輸出 模塊化css撰寫》可以先了解我對(duì)緩存文件的一些處理方式,以及合并文件、壓縮代碼的一些想法。而本插件的實(shí)現(xiàn)原理則基本上和上面的這篇文章里介紹的差不多。
安裝
首先,下載這個(gè)插件,我把它托管在我的GitHub上,你可以在這個(gè)頁面下載。下載好之后,進(jìn)行解壓,解壓完直接把解壓出來的整個(gè)文件夾上傳到你的WordPress網(wǎng)站插件目錄下。然后去后臺(tái)啟用它。
使用
進(jìn)入后臺(tái),在"設(shè)置"菜單下有一個(gè)子菜單"Minify",進(jìn)入后可以對(duì)它的各個(gè)選項(xiàng)進(jìn)行設(shè)置,而且都有注釋,可以了解功能。
使用wp-minify必須修改主題,因?yàn)槟爿敵鯿ss和js的方式不一樣了。 在你的主題中,刪除原來的CSS和JS輸出,使用如下的方法輸出JS:
輸出css的方法是一樣的,只不過要使用另外一個(gè)函數(shù)wp_minify_css()。函數(shù)的參數(shù)是一個(gè)數(shù)組,數(shù)組內(nèi)部的元素是腳本文件的路徑,以WordPress安裝目錄為根目錄,寫入完整的相對(duì)路徑。
為什么要相對(duì)于WordPress的根目錄寫腳本呢?而不是相對(duì)你當(dāng)前的主題目錄呢?其實(shí)道理很簡單,因?yàn)槟闼玫腸ss或者js不 是主題目錄下的,有的時(shí)候你會(huì)引用其他目錄下面的樣式或者腳本。當(dāng)然,這是相對(duì)路徑,你甚至可以引用WordPress上 目錄的腳本,例如 "/../test.js",但是注意,腳本的開頭 要用/開頭,否則可能引起相對(duì)路徑錯(cuò)誤。
當(dāng)然了,具體的使用方法在你了解了原理之后就可以非常容易的去自己修改或發(fā)揮。