WordPress不同页面调用/加载不同CSS

突然想到，是不是应该为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://enkoo.top/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://enkoo.top/wp-content/themes/simplicitybright/style-index.css" type="text/css" media="screen" />
<?php } elseif( is_single() ) { ?>
<link rel="stylesheet" href="https://enkoo.top/wp-content/themes/simplicitybright/style-single.css"  type="text/css" media="screen" />
<?php } elseif( is_category() || is_archive() ) { ?>
<link rel="stylesheet" href="https://enkoo.top/wp-content/themes/simplicitybright/style-category.css"  type="text/css" media="screen" />
<?php } elseif( is_page() ) { ?>
<link rel="stylesheet" href="https://enkoo.top/wp-content/themes/simplicitybright/style-page.css"  type="text/css" media="screen" />
<?php } elseif( is_page(1211) ) { ?>
<link rel="stylesheet" href="https://enkoo.top/wp-content/themes/simplicitybright/style-cse.css"  type="text/css" media="screen" />
<?php } else { ?>
<link rel="stylesheet" href="https://enkoo.top/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等定义了。

折腾了半天，还是放弃了这样做

原因如下：

1. 虽然是不同的CSS，但各个CSS文件还有的共同的定义还是很多。为了保持主题的一致性，更改一个CSS定义，可能就需要更改每个CSS文件的内容了，反而麻烦了。
2. 对于Wordpress这样的博客而言，不同页面调用/加载不同CSS的优化效果不明显。因为Wordpress再复杂的主题的CSS文件都不会太复杂，而且Wordpress的页面就那么几个，共用的CSS定义很多，不同页面还没有多到需要各自定义CSS的地步。不同页面调用/加载不同CSS这个适合大型网站，小博客之类的犯不着折腾。
3. 多个CSS文件不利于网页的加载。当浏览器访问主页时，需要加载style-inedx.css。当浏览器访问文章时，需要重新加载style-single.css。浏览器访问其他页面时，又是同样的结果。如果是只有一个style.css，浏览器不管访问哪个页面，都不需要重新判断下载不同的css。对于小博客来说，这样做没有什么实际意义，优化的效率并不高。
4. head.php增加if这样的判断机制，个人比较反感。因为执行网页时，还需要首先判断一次这个网页到底是主页inedx，还是单篇文章页single，分类category，存档archive，google自定义搜索页，页面page。这样的效果等于是CSS进行了精简，但是网页代码增加了一个php，两者相互抵消了优化。