利用wp_print_styles清理WordPress插件JavaScript和CSS 文件

导语:叶子在开发主题是用到了asgaros-forum论坛插件,这个插件里面用到了字体图标CSS和叶子开发的主题里面的字体图标重复了,而且插件带的版本比较低,导致有些字体图标出不来。叶子找了一下,找到了这篇文章,转载过来,作为备忘录。原文链接

另外,叶子仔细看了一下WordPress的开发文档,研究了一下wp_deregister_style和wp_deregister_script,还有wp_dequeue_style和wp_dequeue_script,发现用这四个函数都是可以实现清理插件的css和js的,前提条件是你在插件里面找到加载的css和js的名称。

在开发 WordPress主题的时候,为了实现更好的效果和加快开发速度,我们经常会使用一些插件,而很多插件会注册自己的 JavaScript 文件和 CSS 文件到前端,很多时候,为了和主题更好的结合,我们可能需要把插件的 CSS 或 JS 文件集成到我们开发的主题中。这时候插件自带的 JavaScript 文件和 CSS 文件就是多余的了,从性能角度考虑,我们需要把插件加载到前端的这些文件去掉,WordPress 为我们提供了wp_deregister_script 和wp_deregister_style 函数来实现这个需求,具体的使用方法,我们来看一下示例代码。

WordPress 是怎么加载文件到前端的

我们先看一下 WordPress 是怎么加载文件到前端的,下面的代码中,ruike-style 和 ruike-script 分别是 JavaScript 和 CSS 文件的 handle,我们在下面的清理过程中,也需要用到。

// 注册样式文件
add_action( 'wp_enqueue_scripts', 'register_plugin_styles' );
function register_plugin_styles() {
	wp_register_style( 'ruike-style', plugins_url( 'my-plugin/css/plugin.css' ) );
	wp_enqueue_style( 'ruike-style' );
}

清理插件JavaScript 和 CSS 文件

在下面的代码中,函数的参数就是需要清理文件的 handle 名称,为了找到这个名称,我们需要看一下插件的源代码,方法很简单,直接搜索插件文件夹的中 wp_enqueue_style 和 wp_enqueue_script 即可。

// 清理不需要的 CSS 文件
add_action('wp_print_styles', 'ruike_print_css');
function ruike_print_css() {
  wp_deregister_style('ruike-style');
}

// 清理不需要的 JS 脚本
add_action('wp_print_scripts', 'ruike_print_scripts');
function ruike_print_scripts(){
  wp_deregister_script('ruike-script');
}

清理中的 JavaScript 和 CSS 文件可以减少 WordPress 主题的前端 HTTP 请求数量,同时可以降低插件中的 JavaScript 或 CSS 与主题中响应的代码冲突的可能性,相信对自己要求比较高的 WordPress 开发者都会有这方面的考虑。

调用wp_dequeue_style函数清理CSS

上面是利用了wp_deregister_style函数,意思是取消CSS的注册,但是我们还可以利用wp_dequeue_style和wp_dequeue_script来清除插件的css和JS,这两个函数的意思是从加载队列中删除掉。

// 清理不需要的 CSS 文件
add_action('wp_print_styles', 'leaf_print_css');
function leaf_print_css() {
 wp_dequeue_style('af-fontawesome-compat-v4');
}

// 清理不需要的 JS 脚本
add_action('wp_print_scripts', 'leaf_print_scripts');
function leaf_print_scripts(){
  wp_dequeue_script('af-fontawesome-compat-v4');
}

发表评论

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