今天寫了一個(gè)插件，用來專門處理wordpress的css和js文件合并問題。在我們的開發(fā)中，我們常常會(huì)考慮把多個(gè)文件合并為一個(gè)，用一個(gè)URL就可以解決原來需要多個(gè)URL才能解決的鏈入問題。當(dāng)然，如果了解過類似淘寶css輸出的服務(wù)端技術(shù)，那么無需再為此煩惱。為了和WordPress結(jié)合，我專門寫了這個(gè)插件，雖然在WordPress官方目錄中我已經(jīng)發(fā)現(xiàn)有這個(gè)插件存在了，但是我仍然把這個(gè)插件的名稱定為wp-minify。
安裝
首先，下載這個(gè)插件，我把它托管在我的GitHub上，你可以在這個(gè)頁面下載。下載好之后，進(jìn)行解壓，解壓完直接把解壓出來的整個(gè)文件夾上傳到你的WordPress網(wǎng)站插件目錄下。然后去后臺(tái)啟用它。
訪問不了的，直接戳這里：
wp-minify.zip
使用
進(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：
<?php
wp_minfiy_js(array('/wp-content/themes/yourtheme/js/base.js','/wp-content/themes/yourtheme/js/module.js','/wp-content/themes/yourtheme/js/others.js'));輸出css的方法是一樣的，只不過要使用另外一個(gè)函數(shù)wp_minify_css()。函數(shù)的參數(shù)是一個(gè)數(shù)組，數(shù)組內(nèi)部的元素是腳本文件的路徑，以WordPress安裝目錄為根目錄，寫入完整的相對(duì)路徑。
為什么要相對(duì)于WordPress的根目錄寫腳本呢？而不是相對(duì)你當(dāng)前的主題目錄呢？其實(shí)道理很簡(jiǎn)單，因?yàn)槟闼玫腸ss或者js不一定是主題目錄下的，有的時(shí)候你會(huì)引用其他目錄下面的樣式或者腳本。當(dāng)然，這是相對(duì)路徑，你甚至可以引用WordPress上一級(jí)目錄的腳本，例如 "/../test.js"，但是注意，腳本的開頭一定要用/開頭，否則可能引起相對(duì)路徑錯(cuò)誤。
另外，我還提供了另外一個(gè)類用于通過action掛載到wp_head或wp_footer中。具體用法如下：
<?php
new wp_minify_css_action(array('/wp-content/themes/yourtheme/css/test.css'));
wp_head();wp_minify_css_action這個(gè)類可以直接實(shí)現(xiàn)把輸出的內(nèi)容掛載到wp_head處。利用這個(gè)特性，你可以使用這個(gè)類，做一些其他的深度開發(fā)，比如你想在所有的路徑中增加base.css這個(gè)文件，你并不需要在每一個(gè)action中都這么寫。我提供一種方法：
// functions.php
function add_minify_css($files) {
array_unshift('base.css',$files);
foreach($files as &$file) {
$file = '/wp-content/themes/yourtheme/css/'.$file;
}
new wp_minify_css_action($files);
}
// single.php
add_minify_css(array('single.css','comment.css'));
wp_head();就像上面這樣，可以讓你的程序?qū)懙母雍?jiǎn)單一些。
