在开发 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 开发者都会有这方面的考虑。