wordpress中实现css压缩输出,且静态保存

广告位招租
扫码页面底部二维码联系

很多网站都玩儿一招,就是将多个css文件合并后,对css进行压缩后输出。这有什么好处呢?就是可以有效的减少http请求个数,并且减小css传输的体积,这样从某种程度上,加快了网站页面的打开速度。这看上去屌屌的功能,怎么在wordpress中实现呢?本文就来详细的谈一谈这个实现的过程。

css代码的压缩

css代码的压缩就是将多余的空格、回车和分号删除,使代码中起不到任何作用的字符都不要输出。那么我们在wordpress中,完全可以借助php的一些逻辑判断和替换,来达到这一目的。下面,看看我的博客是怎么来做到这个效果的:

function compress_css($css) {
  $css = preg_replace('#\/\*[^*]*\*+([^/][^*]*\*+)*\/#isU','',$css);
  $css = str_replace(array('<!--','-->'),'',$css);
  $css = str_replace(array("\r","\r","","\t"),'',$css);
  $css = preg_replace("/\s(?=\s)/",'',$css);
  $css = preg_replace("#\s*(:|;|\{|\})\s*#","$1",$css);
  $css = str_replace(';}','}',$css);
  return $css;
}

利用上面这个函数,就可以实现css代码的压缩。把css代码当做参数传入进去,出来的就是压缩过后的代码了。

通过php打印css代码

既然把css压缩好了,但是我们必须要使用它啊。我们在我们的wordpress博客中,经常发现有些主题采用了一个minify.php文件来打印css代码,在head meta中,这样使用css:

<link rel="stylesheet" href="minify.php?f=a.css,b.css,c.css">

可以看到,href值是由minify.php和f参数构成的,f参数是指要把那些css文件囊括进来,统一输出。比如我们现在这个页面中,原本需要link引入a.css,b.css,c.css三个css文件,而现在,只需要一个minify.php就解决问题了。

其实道理很简单,在minify.php中,解析f参数,知道要使用那几个文件之后,把它们包含进来就可以了。

define('__PATH__',dirname(__FILE__)); // 这个路径为主题目录下的css目录
if(isset($_GET['f'])) {
  $files = $_GET['f'];
  $files = explode(',',$files);
  if(!empty($files)) foreach($files as $file) {
    $file = __PATH__.'/'.$file;
    if(file_exists($file)) include($file);
  }
}

这些问题解决了之后,怎么把压缩好的css代码输出到屏幕呢?我们采用ob_start、ob_end_flush缓存输出:

ob_start("compress_css");
// ... 上面的代码
ob_end_flush();
exit;

就这样,就实现了用minify.php输出css了,是不是感觉很酷?

将css静态化文件保存起来

但是有一个问题,如果我们每次请求css的时候,都要通过php去处理,就会发现,每一次php都需要消耗一定的服务器资源,在访问量比较大的时候,并不利于输出。其中有一种比较好的解决办法是利用服务端缓存,比如将css存储到redis中,下次再直接读取即可。当然,我们很多主机空间并不提供redis,因此,我们可以使用文件缓存,而现在,我们干脆直接把这些css写入一个静态化的.css文件中,下次直接访问这个css文件不就可以了吗?

而实现静态化文件保存过程极其简单,只需要增加如下:

$css = compress_css(ob_get_contents());
file_put_contents(__PATH__.'/../minify/'.md5($_GET['f']).'.css',$css,LOCK_EX);

通过ob_get_contents()从缓冲区中取出css代码,保存到根据f参数而定的一个.css文件中。注意,ob_get_contents()必须在ob_end_flush()之前执行。

wordpress中判断是否直接使用静态化的css文件

在wordpress中,我们不能像以前一样简单的在header.php中使用<link>标签,而是要经过一系列的处理,这样才能根据实际情况,判断是否使用我们上面静态化的.css文件。

function get_page_stylesheets($files = []) {
  array_unshift($files,'font-awesome.min.css','base.css'); // 将某些css放在最前面
  $files[] = 'media.css'; // 将某些css放在最后面
  $files = array_unique($files); // 唯一性
  $files = join(',',$files);
  $file = TEMPLATEPATH.'/minify/'.md5($files).'.css';
  if(file_exists($file))
    return get_template_directory_uri().'/minify/'.md5($files).'.css';
    return get_template_directory_uri().'/css/minify.php?f='.$files;
}
function the_page_stylesheets($files = []) {
  echo '<link rel="stylesheet" href="'.get_page_stylesheets($files).'">';
}

在header.php中,我们这样来打印css:

<?php the_page_stylesheets(['slide.css','home.css']); ?>

这样,当一个css静态文件生成的情况下,就会直接在页面中显示链接到一个静态的.css文件,而如果没有该文件,就通过php来打印css的代码,但是无论如何,都是已经压缩好的css,怎么样,有没有觉得很酷。

2016-03-06 5807

为价值买单,打赏一杯咖啡

本文价值58.07RMB