行星带

编程笔记，热爱生活

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" .'<!--'. "nn";
    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" .'-->'. "nn";
}
add_action('wp_print_scripts', 'shapeSpace_inspect_script_style');

不需要做任何修改，只需要将这段代码添加到主题的 funtions.php 里，刷新页面就会在页面源代码中准确的输出已经注册的 script 和 style 的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

若无特殊说明本站内容为 行星带 原创，未经同意请勿转载。

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

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

    回复

      1. bitcron太慢了，打算放弃了，目前在折腾Hexo，哎，本来不想折腾的，还是没办法，只能亲自动手了

        回复

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

            回复

发表评论

您的电子邮箱地址不会被公开。

Scroll to top