WordPress网站将多个CSS文件合并成一个

为什么要将多个CSS文件合并为一个?

你的WordPress很可能有四五个CSS文件,这样浏览器在加载你的网页时,光是加载CSS文件就得发出四五个请求。我们知道,浏览器在加载一个网页时发出的请求越多,那么加载的速度就越慢。另外,有些CSS文件可能不是存储在你的服务器上,而是存储在另外一个服务器上,而这时又会增加DNS查询的次数。在DNS查询完成之前,浏览器是不能加载任何元素的。而且,也许你的服务器上的CSS文件加载得快,但你不能保证其他服务器上的CSS文件也加载得快。

所以把多个CSS文件合并成一个,合并后的CSS文件缓存在CDN服务器上,既可以减少浏览器发出的请求次数,又可以减少DNS查询次数,从而加快网页的加载速度。

找出网站有多少个外部CSS文件

首先,打开网站主页,然后右击鼠标,选择“查看源码”。再按CTRL+F快捷键调出搜索框,在搜索框中输入stylesheet后回车。选择“高亮全部”,你就能看见网页中有多少个外部CSS文件了。

外部CSS

在你登录WordPress后,你还会看到下图中间三个外部CSS文件,open-sans-css,dashicons-css和admin-bar-css是登录WordPress后才会加载的外部CSS样式。我们不需要合并这三个CSS文件,因为普通浏览者不会登录你的WordPress后台,所以他们的浏览器不会请求这三个CSS文件。

CSS样式

合并多个CSS文件的方法

创建main.css文件

首先在网站根目录下面创建一个文件,命名为main.css。然后编辑main.css文件。我们需要将外部CSS文件的内容全部粘贴到main.css文件中。在网页的源码页面,点击CSS文件的地址,也就是上图中 href 后面的地址。打开了CSS文件,按CTRL+A选择全部内容,然后CTRL+C复制全部内容,将内容粘贴到main.css文件中。再点击下一个CSS文件的href地址,依次它们的内容粘贴到main.css文件中。最后保存。

引用main.css文件

main.css创建好以后,我们需要在wordpress主题文件夹的header.php文件中引用main.css。header.php文件的路径一般为/var/www/html/wp-content/themes/themename/header.php。

在<title>标签下一行,其他<link>标签的上一行,粘贴下面的<link>标签,将域名替换成你自己的域名。保存文件。

 <link rel="stylesheet" href="http://www.linuxdashen.com/main.css" type="text/css" media="screen" />

header-css

取消加载原来的CSS文件

我们在header.php文件中引用了main.css文件后,原来的CSS文件就不需要让浏览器加载了。wordpress的主题和插件一般使用wp_enqueue_style函数来给wordpress网站添加CSS文件。我们需要知道哪些文件使用了wp_enqueue_style函数来添加CSS。找到之后,只要在那个文件删除含有wp_enqueue_style的语句就行了。

如果你的服务器是Linux VPS,那么这非常好找。请看下面的命令

grep -rnw '/var/www/html/' -e "font-awesome"

这条命令可以用来查看特定目录下含有特定关键词的文件。上面的命令是在/var/www/htm/目录下查找含有font-awesome这个关键词的文件以及在文件中的行数。

wp_equeue_style函数有一个handle,要知道CSS文件使用的是哪个handle,只要在网页源码中查看那个CSS文件的id名称。比如在下图中有一个id叫做font-awesome-css,去掉后面的-css,就是对应的handle。

grep -rnw '/var/www/html/' -e "font-awesome"

这条命令的输出结果:

/var/www/html/wp-content/themes/profitmag/inc/profitmag-functions.php:170: wp_enqueue_style( 'font-awesome', get_template_directory_uri().'/css/font-awesome.min.css' );

从输出结果可以看出,在/var/www/html/wp-content/themes/profitmag/inc/profitmag-functions.php这个文件的第170行,有一个wp_enqueue_style函数,它使用了font-awesome这个handle,后面的参数就是CSS文件的路径。把这条语句删除。

wp_equeue_style

用上面的方法,依次删除每一个CSS文件对应的wp_enqueue_style语句。在每一次删除的时候,要看看网页是否可以正常显示。

完成后,刷新网页,在网页源码里搜索stylesheet,你会发现只有一个搜索结果。说明浏览器只加载了main.css文件,其他的CSS文件没有加载,合并成功。

修复图片显示问题

采用上面的方法后,可以有一些图片不能显示了。这是因为有的CSS文件引用图片采用的是相对路径。而统一后的main.css文件与原来的CSS文件路径不一样。所以我们需要将图片的路径更改为绝对路径。

打开main.css文件,在文件中搜索image,png,jpg 等关键词。如果下图,这个背景图片引用的是相对路径,我们将这些图片的路径更改为绝对路径,如 http://www.linuxdashen.com/wp-content/upload/images/controls.png

CSS相对路径

关于主题和插件的更新问题

采用上述方法,在主题和插件更新的时候,wp_enqueue_style函数又会出现,所以在更新的时候,需要将这些函数再删除一次。如果你不更新主题或插件,那么你就不需要再做什么了。

为这篇文章评分
[Total: 0 Average: 0]

发表评论

电子邮件地址不会被公开。 必填项已用*标注