WordPress网站前端压缩代码新版已兼容测试
老白博客WordPress技巧分享:前端压缩代码,能够极大程度实现源代码美观简洁,已经做了兼容测试,有新老两个版本。一个是张戈大佬的老版本,需要调整的部分比较多,大佬也很久没更新了;一种是新版本,基本不用调整,不过压缩后还是有几行的。二者压缩效果区别不大,大家选择自己喜欢的即可。
1.张戈版-WordPress压缩代码
网站插件安装越多,负载越大,访问速度自然快不起来,因此我们的口号是“能不装,就不装”
将以下代码放到网站当前使用主题根目录下的functions.php文件即可
function wp_compress_html(){
function wp_compress_html_main ($buffer){
$initial=strlen($buffer);
$buffer=explode("<!--wp-compress-html-->", $buffer);
$count=count ($buffer);
for ($i = 0; $i <= $count; $i++){
if (stristr($buffer[$i], '<!--wp-compress-html no compression-->')) {
$buffer[$i]=(str_replace("<!--wp-compress-html no compression-->", " ", $buffer[$i]));
} else {
$buffer[$i]=(str_replace("t", " ", $buffer[$i]));
$buffer[$i]=(str_replace("nn", "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<!--压缩前的大小: $initial bytes; 压缩后的大小: $final bytes; 节约:$savings% -->";
return $buffer_out;
}
ob_start("wp_compress_html_main");
}
add_action('get_header', 'wp_compress_html');
1.1 调整注意事项
另外对于某些JS文件,压缩容易出问题的
<!--wp-compress-html--><!--wp-compress-html no compression-->
此处代码不会被压缩,主要是避免压缩带来的错误,比如 JS 错误
<!--wp-compress-html no compression--><!--wp-compress-html-->
1.2 文章代码块
网站文章中有时候也需要插入代码,一篇文章需要插入几段代码了,如果文章中插入的代码也被压缩,是很影响用户阅读体验的,所有我们也要进行一下处理,同样将以下代码放入functions.php
文件里面。
function unCompress($content) {
if(preg_match_all('/(crayon-|</pre>)/i', $content, $matches)) {
$content = '<!--wp-compress-html--><!--wp-compress-html no compression-->'.$content;
$content.= '<!--wp-compress-html no compression--><!--wp-compress-html-->';
}
return $content;
}
add_filter( "the_content", "unCompress");
2.新版压缩代码-亲测好用
代码好像是来自站长帮,更改为后台不压缩,下面就是我在用的代码
同理,添加到主题的function.php文件
// wordpress压缩代码https://www.xcbtmw.com/10262.html
function WenM_clean_javascript($js_code) {
// 将多个空格替换为单个空格,但保留换行符
$js_code = preg_replace('/[ t]+/', ' ', $js_code);
// 去掉每行开头和结尾的空格
$js_code = preg_replace('/^s+|s+$/m', '', $js_code);
return $js_code;
}
function WenM_compress_css($css_code) {
// 精确匹配CSS注释,避免删除包含在字符串字面量中的注释
$css_code = preg_replace_callback('!/*[^*]**+([^/][^*]**+)*/!', function($matches) {
return strpos($matches[0], '"') === false && strpos($matches[0], "'") === false ? '' : $matches[0];
}, $css_code);
// 去掉多余空格,但保留重要空格确保兼容性
$css_code = preg_replace_callback('/(?<=s|^)([{};:,]|}(?!s*(?:[.*?]|[^s}]))(?=s|$))/', function($matches) {
return $matches[1];
}, $css_code);
$css_code = preg_replace('/s*([>~+])s*/', '$1', $css_code); // 保留选择器间的空格
// 合并多余的空白符,保留必要的空格
$css_code = preg_replace('/s+/', ' ', $css_code);
$css_code = preg_replace('/;s*}/', '}', $css_code); // 删除行尾的分号
return $css_code;
}
function WenM_html_cleaner($buffer) {
// 获取压缩前的HTML体积
$original_size = strlen($buffer);
// 提取所有 <code> 代码块并用占位符替换
if (preg_match_all('/(<codeb[^>]*>)([sS]*?)(</code>)/i', $buffer, $code_matches)) {
$code_placeholders = array_map(function($i) { return "###CODE_$i###"; }, array_keys($code_matches[0]));
$buffer = str_replace($code_matches[0], $code_placeholders, $buffer);
}
// 提取所有 JavaScript 代码块并用占位符替换
if (preg_match_all('/(<scriptb[^>]*>)([sS]*?)(</script>)/i', $buffer, $js_matches)) {
$js_placeholders = array_map(function($i) { return "###JAVASCRIPT_$i###"; }, array_keys($js_matches[0]));
$buffer = str_replace($js_matches[0], $js_placeholders, $buffer);
}
// 压缩<head>标签之前内联的CSS代码
if (preg_match('/(<headb[^>]*>)([sS]*?)(</head>)/i', $buffer, $head_matches)) {
if (preg_match_all('/(<styleb[^>]*id=["'][^"']*["'][^>]*>)([sS]*?)(</style>)/i', $head_matches[2], $css_matches)) {
foreach ($css_matches[2] as &$css_code) {
$css_code = WenM_compress_css($css_code);
}
$cleaned_head = $head_matches[2];
foreach ($css_matches[0] as $i => $original_style_tag) {
$compressed_style_tag = $css_matches[1][$i] . $css_matches[2][$i] . $css_matches[3][$i];
$cleaned_head = str_replace($original_style_tag, $compressed_style_tag, $cleaned_head);
}
$buffer = str_replace($head_matches[0], $head_matches[1] . $cleaned_head . $head_matches[3], $buffer);
}
}
// 去掉 HTML 注释
$buffer = preg_replace('/<!--(?!<!)[^[>][sS]*?-->/', '', $buffer);
// 去掉多余的空格和换行
$buffer = preg_replace('/s+/', ' ', $buffer);
$buffer = preg_replace('/>s+</', '><', $buffer);
// 保留指定标签前的一个换行符
$buffer = preg_replace('/(<(title|h1|h2|aside|main|html|head|body|code)[^>]*>)/i', "n$1", $buffer);
// 处理 JavaScript 代码块中的空格
if (!empty($js_matches[2])) {
foreach ($js_matches[2] as &$js_code) {
$js_code = WenM_clean_javascript($js_code);
}
// 将占位符替换回处理后的 JavaScript 代码块
$processed_js = array_map(function($i) use ($js_matches) {
return $js_matches[1][$i] . $js_matches[2][$i] . $js_matches[3][$i];
}, array_keys($js_matches[0]));
$buffer = str_replace($js_placeholders, $processed_js, $buffer);
}
// 将占位符替换回 <code> 代码块
if (!empty($code_matches[2])) {
$processed_code = array_map(function($i) use ($code_matches) {
return $code_matches[1][$i] . $code_matches[2][$i] . $code_matches[3][$i];
}, array_keys($code_matches[0]));
$buffer = str_replace($code_placeholders, $processed_code, $buffer);
}
// 获取压缩后的HTML体积
$compressed_size = strlen($buffer);
// 计算体积并转换为KB
$original_size_kb = round($original_size / 1024, 2);
$compressed_size_kb = round($compressed_size / 1024, 2);
// 在HTML尾部添加压缩前后的体积信息
$buffer .= "n<!-- 压缩前尺寸:{$original_size_kb} KB,压缩后尺寸:{$compressed_size_kb} KB,由老白博客HTML压缩器优化 -->";
return $buffer;
}
function WenM_start_buffering() {
if (!is_admin()) { // 检查是否为后台页面
ob_start('WenM_html_cleaner');
}
}
function WenM_end_buffering() {
// 确保在有缓冲区时调用 ob_end_flush
if (ob_get_level() > 0) {
ob_end_flush();
}
}
add_action('wp_loaded', 'WenM_start_buffering');
add_action('shutdown', 'WenM_end_buffering');
// wordpress压缩结束https://www.xcbtmw.com/10262.html
3.说明
上述代码压缩主要为了网站源代码好看,再配合一些搞怪的注释图案。
如果要达到整体压缩加速,那就得从服务器端和WordPress插件实现