很多网站都玩儿一招,就是将多个css文件转载请注明出处:www.tangshuang.net【关注微信公众号:wwwtangshuangnet】合并后,对css进行压缩后输出。这有什么本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。好处呢?就是可以有效的减少http请求个【关注微信公众号:wwwtangshuangnet】【本文受版权保护】数,并且减小css传输的体积,这样从某种【关注微信公众号:wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net程度上,加快了网站页面的打开速度。这看上【原创内容,转载请注明出处】【版权所有】唐霜 www.tangshuang.net去屌屌的功能,怎么在wordpress中本文版权归作者所有,未经授权不得转载。【本文首发于唐霜的博客】实现呢?本文就来详细的谈一谈这个实现的过本文作者:唐霜,转载请注明出处。【转载请注明来源】程。
【原创内容,转载请注明出处】【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshu【原创不易,请尊重版权】转载请注明出处:www.tangshuang.netang.net未经授权,禁止复制转载。css代码的压缩
css代码的压缩就是将多余的空格、回车和转载请注明出处:www.tangshuang.net【本文首发于唐霜的博客】分号删除,使代码中起不到任何作用的字符都本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。不要输出。那么我们在wordpress中未经授权,禁止复制转载。未经授权,禁止复制转载。,完全可以借助php的一些逻辑判断和替换著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。,来达到这一目的。下面,看看我的博客是怎【原创内容,转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】么来做到这个效果的:
【版权所有,侵权必究】【版权所有】唐霜 www.tangshu【转载请注明来源】【本文首发于唐霜的博客】ang.net【原创内容,转载请注明出处】未经授权,禁止复制转载。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博客【原创不易,请尊重版权】【版权所有】唐霜 www.tangshuang.net中,经常发现有些主题采用了一个minif著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。y.php文件来打印css代码,在hea著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。d meta中,这样使用css:
【版权所有】唐霜 www.tangshu转载请注明出处:www.tangshuang.net【作者:唐霜】ang.net本文作者:唐霜,转载请注明出处。【访问 www.tangshuang.n原创内容,盗版必究。未经授权,禁止复制转载。et 获取更多精彩内容】<link rel="stylesheet" href="minify.php?f=a.css,b.css,c.css">
可以看到,href值是由minify.p【版权所有】唐霜 www.tangshuang.net【原创内容,转载请注明出处】hp和f参数构成的,f参数是指要把那些c【原创内容,转载请注明出处】著作权归作者所有,禁止商业用途转载。ss文件囊括进来,统一输出。比如我们现在【作者:唐霜】未经授权,禁止复制转载。这个页面中,原本需要link引入a.cs【未经授权禁止转载】【原创内容,转载请注明出处】s,b.css,c.css三个css文件未经授权,禁止复制转载。【未经授权禁止转载】,而现在,只需要一个minify.php【原创内容,转载请注明出处】【版权所有】唐霜 www.tangshuang.net就解决问题了。
转载请注明出处:www.tangshua【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】ng.net【原创内容,转载请注明出处】其实道理很简单,在minify.php中本文作者:唐霜,转载请注明出处。转载请注明出处:www.tangshuang.net,解析f参数,知道要使用那几个文件之后,原创内容,盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】把它们包含进来就可以了。
原创内容,盗版必究。本文作者:唐霜,转载请注明出处。【原创不易,请尊重版权】未经授权,禁止复制转载。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原创内容,盗版必究。【关注微信公众号:wwwtangshuangnet】代码输出到屏幕呢?我们采用ob_star本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。t、ob_end_flush缓存输出:
【关注微信公众号:wwwtangshua【关注微信公众号:wwwtangshuangnet】转载请注明出处:www.tangshuang.netngnet】【版权所有,侵权必究】ob_start("compress_css");
// ... 上面的代码
ob_end_flush();
exit;
就这样,就实现了用minify.php输【访问 www.tangshuang.net 获取更多精彩内容】【作者:唐霜】出css了,是不是感觉很酷?
【原创内容,转载请注明出处】【版权所有,侵权必究】将css静态化文件保存起来
但是有一个问题,如果我们每次请求css的【版权所有,侵权必究】转载请注明出处:www.tangshuang.net时候,都要通过php去处理,就会发现,每本文作者:唐霜,转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】一次php都需要消耗一定的服务器资源,在【版权所有】唐霜 www.tangshuang.net【原创内容,转载请注明出处】访问量比较大的时候,并不利于输出。其中有原创内容,盗版必究。【版权所有,侵权必究】一种比较好的解决办法是利用服务端缓存,比【原创不易,请尊重版权】【原创内容,转载请注明出处】如将css存储到redis中,下次再直接转载请注明出处:www.tangshuang.net本文作者:唐霜,转载请注明出处。读取即可。当然,我们很多主机空间并不提供【原创内容,转载请注明出处】著作权归作者所有,禁止商业用途转载。redis,因此,我们可以使用文件缓存,【本文首发于唐霜的博客】【原创不易,请尊重版权】而现在,我们干脆直接把这些css写入一个【版权所有】唐霜 www.tangshuang.net转载请注明出处:www.tangshuang.net静态化的.css文件中,下次直接访问这个【本文受版权保护】【原创内容,转载请注明出处】css文件不就可以了吗?
转载请注明出处:www.tangshua【未经授权禁止转载】【转载请注明来源】ng.net【作者:唐霜】【作者:唐霜】【原创不易,请尊重版权】而实现静态化文件保存过程极其简单,只需要【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】增加如下:
本文版权归作者所有,未经授权不得转载。【本文受版权保护】【版权所有】唐霜 www.tangshu【未经授权禁止转载】转载请注明出处:www.tangshuang.netang.net$css = compress_css(ob_get_contents()); file_put_contents(__PATH__.'/../minify/'.md5($_GET['f']).'.css',$css,LOCK_EX);
通过ob_get_contents()从未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。缓冲区中取出css代码,保存到根据f参数【关注微信公众号:wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】而定的一个.css文件中。注意,ob_g【本文受版权保护】【版权所有】唐霜 www.tangshuang.netet_contents()必须在ob_e【未经授权禁止转载】【本文受版权保护】nd_flush()之前执行。
【访问 www.tangshuang.n转载请注明出处:www.tangshuang.net【本文受版权保护】et 获取更多精彩内容】原创内容,盗版必究。【转载请注明来源】著作权归作者所有,禁止商业用途转载。wordpress中判断是否直接使用静态化的css文件
在wordpress中,我们不能像以前一【原创不易,请尊重版权】【关注微信公众号:wwwtangshuangnet】样简单的在header.php中使用&l【未经授权禁止转载】著作权归作者所有,禁止商业用途转载。t;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静态文件生成的情况下,【原创内容,转载请注明出处】【关注微信公众号:wwwtangshuangnet】就会直接在页面中显示链接到一个静态的.c【未经授权禁止转载】【原创不易,请尊重版权】ss文件,而如果没有该文件,就通过php【原创不易,请尊重版权】【作者:唐霜】来打印css的代码,但是无论如何,都是已【关注微信公众号:wwwtangshuangnet】【原创不易,请尊重版权】经压缩好的css,怎么样,有没有觉得很酷【原创不易,请尊重版权】【转载请注明来源】。
【原创不易,请尊重版权】【作者:唐霜】【关注微信公众号:wwwtangshua【未经授权禁止转载】【原创内容,转载请注明出处】ngnet】2016-03-06 7768


