突然想到,是不是应该为Wordpress设定不同的页面调用/加载不同的CSS文件?这样做的好处是明显的——将加速优化Wordpress各个不同页面的加载效率。因为单一的CSS文件包括了整个网站的CSS定义,而不同的页面需要使用的有效CSS只占其中一部分。
这个实现起来也简单
首先将原始的CSS文件按照你的需要复制精简成你需要的部分。以www.enkoo.net为例,需要主页index,单篇文章页single,分类category和存档archive,google自定义搜索页,页面page各自调用不同的CSS。这样就将原始的CSS文件按需复制成style-index.css,style-single.css,style-category.css,style-page.css,style-cse.css,一并放在style.css同目录下。
然后在head.php文件找到
<link rel=”stylesheet” href=”https://www.enkoo.net/wp-content/themes/simplicitybright/style.css” type=”text/css” media=”screen” />
如果你没有优化,那么原始的写法应该是
<link rel=”stylesheet” href=”<?php echo get_bloginfo(‘stylesheet_url’) ?>” type=”text/css” media=”screen” />
将其改为
<?php if (is_home()) { ?>
<link rel=”stylesheet” href=”https://www.enkoo.net/wp-content/themes/simplicitybright/style-index.css” type=”text/css” media=”screen” />
<?php } elseif( is_single() ) { ?>
<link rel=”stylesheet” href=”https://www.enkoo.net/wp-content/themes/simplicitybright/style-single.css” type=”text/css” media=”screen” />
<?php } elseif( is_category() || is_archive() ) { ?>
<link rel=”stylesheet” href=”https://www.enkoo.net/wp-content/themes/simplicitybright/style-category.css” type=”text/css” media=”screen” />
<?php } elseif( is_page() ) { ?>
<link rel=”stylesheet” href=”https://www.enkoo.net/wp-content/themes/simplicitybright/style-page.css” type=”text/css” media=”screen” />
<?php } elseif( is_page(1211) ) { ?>
<link rel=”stylesheet” href=”https://www.enkoo.net/wp-content/themes/simplicitybright/style-cse.css” type=”text/css” media=”screen” />
<?php } else { ?>
<link rel=”stylesheet” href=”https://www.enkoo.net/wp-content/themes/simplicitybright/style.css” type=”text/css” media=”screen” />
<?php } ?>
这样就实现了不同页面调用/加载不同的CSS了。
这样做还有一个明显的好处,就是主题的多样化
比如想要主页index文章的标题和单篇single文章页的标题显示不同的色彩。
如果是只有一个CSS,直接修改H1是不能实现的,因为H1统管全部H1标签,一变大家都一样变。当然单独定义content h1也是可行的。只是一个两个这样修改还行,如果是多个多样化,CSS文件会越来越庞大。
如果设定了不同页面调用不同CSS,因为现在主页index的CSS由style-index.css控制,而单篇文章single的CSS由style-single.css控制,所以就可以分别设置各自的H1标签的颜色,而不会互相影响,也不用再增加content h1等定义了。
折腾了半天,还是放弃了这样做
原因如下:
- 虽然是不同的CSS,但各个CSS文件还有的共同的定义还是很多。为了保持主题的一致性,更改一个CSS定义,可能就需要更改每个CSS文件的内容了,反而麻烦了。
- 对于Wordpress这样的博客而言,不同页面调用/加载不同CSS的优化效果不明显。因为Wordpress再复杂的主题的CSS文件都不会太复杂,而且Wordpress的页面就那么几个,共用的CSS定义很多,不同页面还没有多到需要各自定义CSS的地步。不同页面调用/加载不同CSS这个适合大型网站,小博客之类的犯不着折腾。
- 多个CSS文件不利于网页的加载。当浏览器访问主页时,需要加载style-inedx.css。当浏览器访问文章时,需要重新加载style-single.css。浏览器访问其他页面时,又是同样的结果。如果是只有一个style.css,浏览器不管访问哪个页面,都不需要重新判断下载不同的css。对于小博客来说,这样做没有什么实际意义,优化的效率并不高。
- head.php增加if这样的判断机制,个人比较反感。因为执行网页时,还需要首先判断一次这个网页到底是主页inedx,还是单篇文章页single,分类category,存档archive,google自定义搜索页,页面page。这样的效果等于是CSS进行了精简,但是网页代码增加了一个php,两者相互抵消了优化。