[摘要]

wp-html-compression是WordPress常用的壓縮前端代碼插件，本文簡析純代碼實現WordPress前端代碼壓縮功能，并指出常見bug的解決方法。

除了主機的因素之外，一個網站的加載速度還跟前端代碼壓縮程度有關，如果對前端html做壓縮優化，可以在一定程度上減小頁面大小，提高加載速度。而在WordPress主題中應用最廣的應該就是wp-html-compression這個插件或者代碼版了。

其原理是刪除前端html中空格和制表符等不必須的內容，從而簡化代碼，你甚至不需要設置什么，只要一段代碼就能給WordPress加速。

絕大多數的優質主題都會集成這個代碼，今天單獨拿出來說，一方面是想幫助沒有集成此功能的主題用；另外一方面是想將一些常見好用的WordPress代碼單獨列出來，也算是稍作研究，會吃魚也會釣魚，以便單獨寫主題模板時按需定制功能。

壓縮WordPress前端html代碼版

/*WordPress前端代碼壓縮*/

function wp_compress_html(){

function wp_compress_html_main ($buffer){

$initial=strlen($buffer);

$buffer=explode("", $buffer);

$count=count ($buffer);

for ($i = 0; $i <= $count; $i++){

if (stristr($buffer[$i], '')) {

$buffer[$i]=(str_replace("", " ", $buffer[$i]));

}

else {

$buffer[$i]=(str_replace("\t", " ", $buffer[$i]));

$buffer[$i]=(str_replace("\n\n", "\n", $buffer[$i]));

$buffer[$i]=(str_replace("\n", "", $buffer[$i]));

$buffer[$i]=(str_replace("\r", "", $buffer[$i]));

while (stristr($buffer[$i], ' ')){

$buffer[$i]=(str_replace(" ", " ", $buffer[$i]));

}

}

$buffer_out.=$buffer[$i];

}

$final=strlen($buffer_out);

$savings=($initial-$final)/$initial*100;

$savings=round($savings, 2);

$buffer_out.="\n";

return $buffer_out;

}

ob_start("wp_compress_html_main");

}

add_action('get_header', 'wp_compress_html');

使用方法很簡單，只需要將上述代碼置入WordPress主題目錄的function.php中，即最后一個?>之前即可。

但筆者個人比較習慣將代碼量較大的功能單獨出來，做一個文件，然后在function.php中引入，如將上述代碼新建一個wp-html-compression.php文件，放在主題include文件夾中，在function.php引入

include (TEMPLATEPATH . '/includes/wp-html-compression.php');

這樣做的好處就是可以更高效的維護代碼，同時也可以在主題后臺很輕松的定制要不要啟用前臺代碼壓縮功能，當然多了一次引入會在效率上有一點點影響，不過function.php里面的代碼就清爽了很多了，這個仁者見仁，看各位的習慣了。

前端代碼壓縮出現的bug

1、部分代碼避免被壓縮方法

此功能既然是壓縮前端的代碼，自然而然會將一些JS代碼給壓縮了，事實上有些JS被壓縮后會失效，所以我們需要將這部分內容繞過壓縮。只需要將你想繞過壓縮的代碼加個包裹層即可，代碼如下

這里的代碼將會被保護起來，避免了壓縮產生的異常情況

注意：目前網上流傳的繞過壓縮的代碼如下，使用者請自查。

錯誤的免壓縮代碼，部分主題使用

其實很多時候JS被壓縮出錯是因為JS中出現了//注釋，試想下后面的空格被刪除了，所有的代碼將出現在//后面，相當于代碼都被注釋了，肯定會出錯啊。最簡單的解決辦法就是刪除注釋或者使用閉合注釋/*這里是注釋*/，這樣就可以避免后面的內容被注釋掉了。

2、避免文章中高亮的代碼被壓縮

很多博文中會分享代碼，當你使用代碼高亮插件的時候再壓縮前端代碼，就會出現高亮失效的情況，如圖：

啟用代碼壓縮前

啟用代碼壓縮后

原因很簡答，代碼高亮是將代碼格式化，以優美的方式展示給讀者；而壓縮是直接將樣式等修飾內容粗暴的刪除，這樣肯定會導致高亮失效的，只需要在function.php添加另外一段代碼，就可以避免代碼高亮被壓縮了。

//避免含有代碼高亮的文章內容被壓縮

function Code_Box($content) {

$matches = array();

//下面是查找代碼高亮的關鍵詞

$c = "/(crayon-|)/i";

if(preg_match_all($c, $content, $matches) && is_single()) {

$content = ''.$content;

$content.= '';

}

return $content;

}

add_filter( "the_content", "Code_Box" );

這段代碼可以避免使用Crayon Syntax Highlighter和使用

標簽做的高亮被壓縮，其他代碼高亮插件請自行修改，不贅述。

前端代碼壓縮對于功能較多的網站有較為顯著的加速效果，但比起來主機對加載速度的影響還是小很多了，所以這是個錦上添花的功能，而達不到雪中送炭的感覺，如果你想讓你的WordPress網站更快一步，那就使用此功能吧。

文中代碼參考了WP迷、張戈等多網站的代碼，不一一列舉，通通表示感謝！

本文最后更新于2017年3月29日，已超過 1 年沒有更新，如果文章內容或圖片資源失效，請留言反饋，我們會及時處理，謝謝！

總結

以上是生活随笔為你收集整理的html导入错误 wordpress,纯代码为WordPress压缩前端html代码 附BUG修复的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。