WPJAM「静态文件」:一键合并 WordPress 插件和主题的 JS 和 CSS 文件,加快页面加载速度

每个插件和主题可能有自己的 CSS 和 JavaScript 内联代码或者文件,如果 CSS 和 JavaScript 内联代码或者文件一多,就开始出现了两个比较难受的问题:

前端静态文件的问题

1. 前端网页代码就变的很乱,如果 JS 或者 CSS 文件多,还会影响前端的加载速度:

以 Sweet 主题为例,从上图可知,有留言点赞的 JS 代码,主题自带的脚本代码,WPJAM 内容模板的 CSS 代码,然后还有未截图到主题自带的样式文件,还有其他的静态文件,非常多,看起来头疼。😓,文件一多,加载自然就慢。

2. CDN 更新会有问题WPJAM Basic 「CDN 加速」功能是使用对象存储的镜像回源功能实现的,如下图所示,镜像回源的原理是,只有在对象存储不存在的文件才会到源站去抓取:

那么插件或者主题更新,如果更新了 JS 或者 CSS 文件,并不会同步到对象存储去,CDN 上的文件也不是最新的,所以需要用户自己去对象存储去删除对应的文件,让对象存储重新抓取,并且还要刷新 CDN 上文件,总之很麻烦。

一键合并 JS 和 CSS 文件

有没有什么更好的方法来解决这些问题呢?有的,今天推出的 WPJAM「静态文件」插件就是要专门来解决这个问题的。

它将 WPJAM 插件和主题生成的 JS 和 CSS 内联代码或者文件分别合并成一个文件,并且这两个文件会自动带上时间戳,这样的两个步骤来解决这两个问题。

1. 分别合并成一个文件:这样就实现前端代码简洁,并且相关的文件也变少,网页加载速度也会明显变快,还是以 Sweet 主题为例,合并之后,整个页面除了 jQuery 之外,只剩下合并生成的 JS 和 CSS 文件:

2. 合并的文件加上时间戳:这样就保证每次合并生成的文件是全新的,CDN 加速在镜像回源的时候,都会抓取到最新的 JS 和 CSS 文件了,不怕插件或者主题更新造成问题了。

不过可能造成一个问题,就是可能在对象存储中会生成一堆的 JS/CSS 文件,所以我把这些文件都放到 wp-content/static 目录下,这样如果觉得不爽,就可以批量删除了。

简单的安装和使用说明

WPJAM「静态文件」插件安装很简单,首先从「WordPress果酱」的知识星球下载,然后上传到 wp-content/plugins 目录,最后到 WordPress 后台激活即可。

激活之后,在 WordPress 后台「WPJAM」菜单下就会新增「静态文件」子菜单,点击进入:

首先勾选「合并静态文件」按钮,然后保存,当然如果有额外的脚本和样式也可以先填入,保存之后,页面就会出现当前系统将会合并那些文件和内联的代码:

点击这里的「一键合并」按钮就可以生成唯一的 JS 和 CSS 文件了,如果文件内容,没有更新,点击该按钮是不会文件不会被提示更新的:

注册「静态文件」

从上面列表也可以看出,WPJAM「静态文件」插件是不会主动合并主题和插件的 CSS 和 JavaScript 内联代码或者文件,需要其他插件和主题主动去注册WPJAM「静态文件」,插件才会收集,然后生成。那么怎么注册呢?

还是以 Sweet 主题为例,这是之前注册前端文件的代码:

add_action('wp_enqueue_scripts', function(){
	wp_enqueue_style('style', get_stylesheet_directory_uri().'/static/css/sweet.css');
	wp_enqueue_script('sweet', get_stylesheet_directory_uri().'/static/js/sweet.js', ['jquery']);	
});

需要简单修改成:

add_action('wp_enqueue_scripts', function(){
	if(did_action('wpjam_static')){
		wpjam_register_static('sweet-style', [
			'type'		=> 'style',
			'source'	=> 'file',
			'file' 		=> get_stylesheet_directory().'/static/css/sweet.css',
			'baseurl'	=> get_stylesheet_directory_uri().'/static/css/'
		]);

		wpjam_register_static('sweet-script', [
			'type'		=> 'script',
			'source'	=> 'file',
			'file' 		=> get_stylesheet_directory().'/static/js/sweet.js',
		]);
	}else{
		wp_enqueue_style('style', get_stylesheet_directory_uri().'/static/css/sweet.css');
		wp_enqueue_script('sweet', get_stylesheet_directory_uri().'/static/js/sweet.js', ['jquery']);
	}
});

WPJAM 「静态文件」插件增加一个名为 'wpjam_static' 的 Action,并且合并功能启用之后才会存在,所以我们可以简单通过 did_action('wpjam_static') 判断,我们安装了 WPJAM 「静态文件」插件,并且已经启用合并功能。

如果已经安装了 WPJAM 「静态文件」插件,并激活合并功能之后,我们就不需要 WordPress 原来的注册脚本和样式,而是通过 wpjam_register_static($key, $args) 把静态文件注册到合并列表中,然后后台点击一下「一键合并」就能合并了。

简单说一下 wpjam_register_static($key, $args) 函数的参数:

$key:注册唯一的 key。

$args:注册的参数,包括:

  • $type:类型,脚本则为:script,样式则为:style
  • $source:来源,如果要合并的内容是,文件则为:file,如果内联代码则为:value
  • $file/$value:根据上个选项,如果 file,值为文件在服务器上的路径,如果 value,值为具体的内联代码。
  • $baseurl:文件才有这个选项,可选,如果文件中使用相对地址的资源,合并之后需要替换成绝对地址,这里如何替换成绝对地址的地址前缀。

目前 Sweet 主题已经支持 WPJAM 「静态文件」插件,WPJAM 出品的所有插件,应该都支持了,比如「内容模板」后台设置的样式也支持了。其他主题,可能需要按照上面的方式修改一下你的主题,你可以参考一下 Sweet 主题怎么注册即可,还算简单。


「WordPress果酱」知识星球福利插件基于 WPJAM Basic 开发,加入「WordPress果酱」知识星球,即可下载:

插件 简介
抓取公众号图文

一键抓取公众号文章到 WordPress 博客,并且突破微信图片防盗链

搜索优化

支持限制和关闭搜索的 WordPress 插件

编辑器优化

优化 WordPress 传统的 TinyMCE 编辑器,添加下划线等按钮,支持截屏贴图等

内容模板

通过短代码在内容中插入一段共用的内容模板,并且支持表格。

用户管理

最强 WordPress 一键用户管理插件。
支持自定义头像,屏蔽个人设置,优化姓名设置,
隐藏登录名,限制登陆失败次数,防止密码被暴力破解等功能。

分类管理

层式管理分类和分类拖动排序,支持设置分类的层级。
并且在后台分类管理界面可以按层级显示和拖动排序。

评论增强

支持评论点赞,评论置顶和按照点赞数排序。

图片集

1. 给媒体创建个分类「图片集 | collection」
2. 图片分类限制为二级
3. 取消图片编辑入口
4. 附件页面直接图片链接。

配置器

全自动 WordPress 配置器,不用一行代码就可以开发。
支持自定义文章类型,自定义字段,自定义分类,分类选项,全局选项。

Script Loader

通过恢复 WordPress 联合加载方式来优化 WordPress 后台脚本加载。

外部链接

将文章或评论中的外部链接加上安全提示的中间页,让用户确认之后再跳转。
并还支持添加 nofollow rel 属性。

话题标签

文章中插入 #话题标签#。
如果是内部链接,直接跳转,
标签或者分类,则自动转换成标签或分类链接,
否则跳转到搜索链接。

格式文章

在 WordPress 实现真正的文章格式

草稿分享

一键生成草稿临时分享链接
并可设置分享链接的有效期

文章专题

设置文章专题,并在文章末尾显示一个文章专题列表。

文章隐藏

设置文章在列表⻚不显示,并且可以根据不同平台进行设置

Meta Data

可视化管理 WordPress Meta 数据,支持所有内置的 Meta 数据:
Post Meta,Term Meta,User Meta 和 Comment Meta。

站点选项

查看和管理所有非 WordPress 系统自动生成的站点选项。
如果你觉得某个选项无用,可以直接删除它。

后台论坛

WordPress 后台论坛,支持创建帖子,分组,消息。

微信小程序

微信小程序 WordPress 基础插件,包含基础类库和管理。

微信群二维码

轮询显示微信群二维码,突破微信群100人限制。

文章置顶

支持置顶文章排序和分类文章置顶的 WordPress 插件


©我爱水煮鱼,本站推荐使用的主机:阿里云,国外主机建议使用BlueHost

本站长期承接 WordPress 优化建站业务,请联系微信:「chenduopapa」。

热门文章