wordpress如何禁用替换插件添加的CSS和JS的加载

WordPress中最方便的就是任意使用插件和主题。但是由于插件和主题开发者的不同,有时候它们不会有条件地加载JS和CSS文件。

wordpress如何禁用替换插件添加的CSS和JS的加载

例如,您安装了一个仪表盘插件,它可能会将它要用到的JS和CSS加载整个wp-admin后台中。相反,开发人员应该使用有条件的逻辑将脚本加载到它们被使用到的页面(例如,通过!is_admin()排除后台)或wp-admin后台中除仪表盘之外的任何位置(例如,通过get_current_screen())。这是应该被提倡的开发规范。

不幸的是,很多开发者没有按照这个规范在做。

幸运的是,WordPress可以轻松禁用任何不需要的脚本或样式。禁用所有不需要的CSS和JS文件。本文将让你搞清楚这个问题。

第一步,找到注册ID

我们需要找到你要处理的那个CSS或JS文件在WordPress加载的特定注册ID,有下面几种办法:

  • 检查<script><style>标签
  • 使用代码获取ID
  • 查找负责加载它们的源码
  • 根据资源文件猜测或者询问开发者

检查<script><style>标签

获取ID的最简单方法是检查网页源代码中的<script><style>标签。例如,假设我们要禁用某个叫EDD相关的样式。查看其中用到该样式的一个页面的网页源代码,我们可以在网页源代码中找到:

<link rel='stylesheet' id='media-styles-css'   href='https://example.com/wp/wp-content/themes/example/lib/css/media.css' type='text/css' media='all' />
<link rel='stylesheet' id='default_styles-css' href='https://example.com/wp/wp-content/themes/example/style.css' type='text/css' media='all' />
<link rel='stylesheet' id='edd-styles-css'     href='https://example.com/wp/wp-content/themes/example/lib/css/edd.css' type='text/css' media='all' />

这里,有三个样式标签,每个标签都加载一个单独的CSS文件。这里要注意的关键是id属性。我们具有以下ID值:

  • media-styles-css
  • default_styles-css
  • edd-styles-css

但这些值不是实际的样式ID。WordPress在实际ID值后附加了-css。我们需要的ID是这样的:

  • media-styles
  • default_styles
  • edd-styles

我们得到了EDD相关样式正确的ID是 edd-styles。让我们记住该值,因为我们将在后面用到它。

使用script/style-inspector函数

上面检查代码的办法的确是获取ID最简单的办法,但是,有些注册的css和js的ID是没有在网页源代码中的,为了获取他们,我们可以编写下面这样的一段代码:

/*
    Get Script and Style IDs
    Adds inline comment to your frontend pages
    View source code near the <head> section
    Lists only properly registered scripts
    @ https://digwp.com/2019/03/disable-script-style-added-plugins/
*/
function shapeSpace_inspect_script_style() {
    global $wp_scripts, $wp_styles;
    echo "\n" .'<!--'. "\n\n";
    echo 'SCRIPT IDs:'. "\n";
    foreach($wp_scripts->queue as $handle) echo $handle . "\n";
    echo "\n" .'STYLE IDs:'. "\n";
    foreach($wp_styles->queue as $handle) echo $handle . "\n";
    echo "\n" .'-->'. "\n\n";
}
add_action('wp_print_scripts', 'shapeSpace_inspect_script_style');

不需要做任何修改,只需要将这段代码添加到主题的funtions.php里,刷新页面就会在页面源代码中准确的输出已经注册的scriptstyle的ID:

<!--

SCRIPT IDs:
jquery
jquery-migrate
edd-checkout-global
edd-ajax

STYLE IDs:
media-styles
default_styles
edd-styles

-->

查找负责加载它们的源码

如果上面两种办法都没有找到你需要找到的ID,我们可以通过检索源码中该文件名出现的位置,找到ID;另外一个检索策略是去检索源码中使用引入脚本函数wp_enqueue_script()wp_register_script()也能找到它们。

根据资源文件猜测或者询问开发者

如果以上办法均失败,根据你需要找的文件名,可以大致猜测一下实际注册ID。例如:

<script type='text/javascript' src='https://example.com/wp/wp-content/plugins/amazing-plugin/assets/js/amazing-plugin.min.js?ver=1.2.3'></script>

这样一个脚本的注册ID,大胆的猜测它的注册ID是mazing-plugin或者类似的东西。

如果以上方法均失败,可以尝试邮件联系开发者,开发者肯定是知道注册ID的。

第二步,禁用脚本或样式

得到正确的注册ID后,实际上就很容易禁用脚本或样式。以上面的EDD示例为例,不需要的样式表的ID为edd-styles。因此,要禁用它,我们将以下内容添加到主题functions.php文件中:

// disable stylesheet (example)
function shapeSpace_disable_scripts_styles() {

    wp_dequeue_style('edd-styles');

}
add_action('wp_enqueue_scripts', 'shapeSpace_disable_scripts_styles', 100);

这样,EDD样式将不会加载到任何前端页面上。我们知道它只是前端,因为我们使用的钩子是 wp_enqueue_scripts 。如果要在后台中禁用样式表,则需要使用使用 admin_enqueue_scripts 钩子。

这里我们使用了用于禁用样式表的WordPress函数 wp_dequeue_style() 。如果要禁用添加JavaScript文件,则可以使用 wp_dequeue_script()

最佳实践

我们了解了所有工作原理,这里有一些使用示例,这些示例禁用了插件添加的CSS和JavaScript。

从前端禁用插件添加的样式或脚本

有一些插件的脚本或样式在有一些页面不需要加载,我们不用去修改插件源码,而是很优雅的禁用它们:

function shapeSpace_disable_scripts_styles() {

    // easy digital downloads
    if (!is_page('checkout') && !is_page('purchase-confirmation') && !is_page('purchase-history') && !is_page('transaction-failed')) {

        wp_dequeue_script('edd-ajax');
        wp_dequeue_script('edd-password-meter-passfield-locales');
        wp_dequeue_script('edd-password-meter-passfield');
        wp_dequeue_script('edd-password-meter');

        wp_dequeue_style('edd-sl-styles');
        wp_dequeue_style('edd-password-meter-passfield');
        wp_dequeue_style('edd-password-meter');

    }

    // super stripe plugin
    if (!is_page('direct') && !is_page('custom') && !is_page('cancel') && !is_page('success')) {

        wp_dequeue_script('supstr-aweber-js');
        wp_dequeue_script('supstr-shortcode-js');
        wp_dequeue_script('supstr-validate-js');

    }

    // search everything
    wp_dequeue_style('se-link-styles');

    // clean wp_head
    remove_action( 'wp_head', 'se_global_head');
    remove_action( 'wp_head', 'wp_generator' );
    remove_action( 'wp_head', 'rsd_link' );
    remove_action( 'wp_head', 'wlwmanifest_link' );
    remove_action( 'wp_head', 'wp_shortlink_wp_head');
    remove_action( 'wp_head', 'rest_output_link_wp_head', 10 );
    remove_action( 'wp_head', 'feed_links', 2 );
    remove_action( 'wp_head', 'feed_links_extra', 3 );

    // yet another related posts plugin
    wp_dequeue_style('yarppWidgetCss');

}
add_action('wp_enqueue_scripts', 'shapeSpace_disable_scripts_styles', 100);

我从加载队列中禁用了不少的脚本和样式,同时还使用remove_action()删除了一些头部不必要的引入。

从管理后台禁用脚本和样式

这是一个在管理后台中禁用某些插件样式的函数示例:

function shapeSpace_disable_scripts_styles_admin_area() {

    wp_dequeue_style('jquery-ui-css');

}
add_action('admin_enqueue_scripts', 'shapeSpace_disable_scripts_styles_admin_area', 100);

这里我们需要使用admin_enqueue_scripts钩子。

替换一些插件中加载有问题的脚本和样式

比如某个插件使用了一个css样式,但是后来,这个样式地址无法访问了(或者由于地理位置访问受限),这会造成网页的加载问题,插件作者并不能及时解决问题,我们需要自己动手来替换掉这个样式的访问地址。

我们通过grep检索到有加载问题的插件中的源码:

wp_enqueue_style( 'fawesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', array(), ‘1.3.2’ );

但是这个地址已经无法访问了,我们替换掉:

function replace_scripts_styles_admin_area() {

    wp_dequeue_style('fawesome');
    wp_enqueue_style( 'fawesome', '//cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css', array(), '1.3.2' );

}

add_action( 'admin_enqueue_scripts', 'replace_scripts_styles_admin_area', 1 );

这样,插件需要用到的font-awesome的加载地址就由https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css替换成了https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

一些特殊情况

有时候你会发现按照上面的示例去禁用并没有起作用,那是因为,有的开发者并没有使用我们认为规范的办法来注册载入样式或脚本,那我们可以尝试使用下面这样的代码:

// via the wp_print_styles hook
function shapeSpace_disable_download_manager_styles() {

    wp_deregister_style('dlm-frontend');

}
add_action('wp_print_styles', 'shapeSpace_disable_download_manager_styles', 100);

这里我们使用的是wp_deregister_style()函数和wp_print_styles钩子,起作用了,那就行了,还有更特殊的情况:

// had to use the get_footer hook!!!
function shapeSpace_disable_yarpp_styles() {

    wp_dequeue_style('yarppRelatedCss');

}
add_action('get_footer', 'shapeSpace_disable_yarpp_styles');

注意这里使用的钩子get_footer!确实很奇怪,但是只有这样才能禁用不需要的YARRP样式。

wordpress如何禁用替换插件添加的CSS和JS的加载

原文链接:https://beltxman.com/3350.html,若无特殊说明本站内容为行星带原创,未经同意禁止转载!

更多精彩,敬请关注本博微信公众号:hsu1943

wordpress如何禁用替换插件添加的CSS和JS的加载”上有 7 条评论;

  1. 我是图片用插件上传到cdn 数据库和主题文件备份一下从服务器定期打包上传到cdn,所以恢复起来也快

          1. 我之前也懒,wordpress主要是迁移比较困难,18年移到了bitcron上我就放弃了之前的几十篇文章,折腾数据库啥的挺麻烦,最近我又嫌弃bitcron太慢,迁移到了hexo上面,这次就很快了,纯粹的markdown+图片保存在cdn上,基本没啥迁移成本。

发表评论

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

Scroll to top