優化WordPress中CSS和JavaScript

仲介交易 HTTP://www.aliyun.com/zixun/aggregation/6858.html">SEO診斷 淘寶客 雲主機 技術大廳

WordPress是一個強大的博客程式，但它的主題及外掛程式通常需要一些CSS和JAVAscript來實現其功能。 載入更複雜的主題或是更多外掛程式導致網站速度變慢。 載入相關CSS和JAVAscript耗費了大量的時間，特別是很多博友都是使用國外主機，優化CSS和JAVAscript可以在最大程度上減少載入時間。

一、CSS和JAVAscript合併優化

1、優化外掛程式 WP Minify

wp Minify是將Minify引擎整合到WordPress中。 一經啟用，該外掛程式就能夠合併和壓縮你的 JS 和 CSS 檔來提高頁面的載入速度。 生成類似 這樣的形式，減少瀏覽器對伺服器頁面url的請求次數。

2、手動何必CSS和JAVAscript

方法很簡單，那就是把如a.js、b.js、c.js...... 中的代碼複製在一個檔中，保存為all.js。 將原來調用a.js、b.js、c.js...... 的引用代碼替換成： ，完後刪除原js即可

這個方法唯一的缺點就是合併後的檔太大，影響載入速度。

二、CSS和JAVAscript載入位置優化

為了最大限度地保證相容性，不至於出現JAVAscript失效的情況，所以一般在頁頭載入JAVAscript檔。 但是根據 Yahoo 開發者論壇的建議，載入JAVAscript應該儘量在頁尾以提高頁面的顯示(回應、渲染)速度。

1、JAVAscript to Footer外掛程式

安裝這個外掛程式，可以自動把頭部的JAVAscript自動的載入在footer，保證正常使用。

2、手動調整

使用JAVAscript to Footer會使某些必須載入在頭部的js一併放在footer，會出現相容和顯示錯誤，因此。 我們需要選擇性的進行載入。 使用的函數是 wp_enqueue_script()和 wp_register_script()使用的結構都一樣。 我們下面用wp_enqueue_script()來做例子。

函數用法

wp_enqueue_script(

$handle

,$src

,$deps

,$ver

,$in_footer

);

參數解釋：

$handle：用於區別 JS 名稱，即標識字串 (string);

$src：JS 的檔 URL (string);

$deps：載入的 JS 所依存的其他 JS 標識字串陣列 (array:string, 非必需);

$ver：JS 的版本號，留空則使用當前 WP 版本號 (string, 非必需);

$in_footer：是否放置到網頁 HTML 底部載入 (boolean, 非必需)。

實例：

function my_enqueue_scripts() {

if( !is_admin ) { // 前臺載入的腳本與樣式表

去除已註冊的 jquery 腳本

wp_deregister_script( 'jquery' );

註冊 jquery 腳本

wp_register_script( 'jquery', 'HTTP://code.jquery.com/jquery.min.js', array(), 'lastest', false );

提交載入 jquery 腳本

wp_enqueue_script( 'jquery' );

註冊 superfish 腳本

wp_register_script( 'superfish', get_template_directory_uri() . '/js/superfish.js', array( 'jquery' ), '1.2', false );

提交載入 superfish 腳本

wp_enqueue_script( 'superfish' );

註冊並載入 custom 腳本

wp_enqueue_script( 'custom', get_template_directory_uri() . '/js/custom.js', array( 'jquery' ), '3.0', true );

} else { // 後臺載入的腳本與樣式表

取消載入 jquery 腳本

wp_dequeue_script( 'jquery' );

註冊並載入 jquery 腳本

wp_enqueue_script( 'jquery', 'HTTP://code.jquery.com/jquery.min.js', array(), 'lastest', false );

}

}

添加回呼函數到 init 動作上

add_action( 'init', 'my_enqueue_scripts' );

?>

特別注意的是$in_footer預設值為false。 如果留空或是false，則預設js載入在頭部，如果是true，則顯示在footer。

運行上面的例子，只有customs.js會被載入在footer。 其他的均載入在頭部。

三、總結

WordPress 範本功能越來越強大，我們應儘量使用 WordPress內建的眾多的範本函數標籤，實現主題或外掛程式的各種功能。 同時，我們更必須避免修改 WP 內核代碼的可能性。