AI编程生活评测

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

编程笔记 / 2021-01-09 / 8 min

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相关的样式。查看其中用到该样式的一个页面的网页源代码,我们可以在网页源代码中找到:

&lt;link rel=&#039;stylesheet&#039; id=&#039;media-styles-css&#039;   href=&#039;https://example.com/wp/wp-content/themes/example/lib/css/media.css&#039; type=&#039;text/css&#039; media=&#039;all&#039; /&gt;
&lt;link rel=&#039;stylesheet&#039; id=&#039;default_styles-css&#039; href=&#039;https://example.com/wp/wp-content/themes/example/style.css&#039; type=&#039;text/css&#039; media=&#039;all&#039; /&gt;
&lt;link rel=&#039;stylesheet&#039; id=&#039;edd-styles-css&#039;     href=&#039;https://example.com/wp/wp-content/themes/example/lib/css/edd.css&#039; type=&#039;text/css&#039; media=&#039;all&#039; /&gt;

这里,有三个样式标签,每个标签都加载一个单独的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 &lt;head&gt; 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 &quot;n&quot; .&#039;&lt;!--&#039;. &quot;nn&quot;;
    echo &#039;SCRIPT IDs:&#039;. &quot;n&quot;;
    foreach($wp_scripts-&gt;queue as $handle) echo $handle . &quot;n&quot;;
    echo &quot;n&quot; .&#039;STYLE IDs:&#039;. &quot;n&quot;;
    foreach($wp_styles-&gt;queue as $handle) echo $handle . &quot;n&quot;;
    echo &quot;n&quot; .&#039;--&gt;&#039;. &quot;nn&quot;;
}
add_action(&#039;wp_print_scripts&#039;, &#039;shapeSpace_inspect_script_style&#039;);

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

&lt;!--

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

STYLE IDs:
media-styles
default_styles
edd-styles

--&gt;

查找负责加载它们的源码

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

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

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

&lt;script type=&#039;text/javascript&#039; src=&#039;https://example.com/wp/wp-content/plugins/amazing-plugin/assets/js/amazing-plugin.min.js?ver=1.2.3&#039;&gt;&lt;/script&gt;

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

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

第二步,禁用脚本或样式

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

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

    wp_dequeue_style(&#039;edd-styles&#039;);

}
add_action(&#039;wp_enqueue_scripts&#039;, &#039;shapeSpace_disable_scripts_styles&#039;, 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(&#039;checkout&#039;) &amp;&amp; !is_page(&#039;purchase-confirmation&#039;) &amp;&amp; !is_page(&#039;purchase-history&#039;) &amp;&amp; !is_page(&#039;transaction-failed&#039;)) {

        wp_dequeue_script(&#039;edd-ajax&#039;);
        wp_dequeue_script(&#039;edd-password-meter-passfield-locales&#039;);
        wp_dequeue_script(&#039;edd-password-meter-passfield&#039;);
        wp_dequeue_script(&#039;edd-password-meter&#039;);

        wp_dequeue_style(&#039;edd-sl-styles&#039;);
        wp_dequeue_style(&#039;edd-password-meter-passfield&#039;);
        wp_dequeue_style(&#039;edd-password-meter&#039;);

    }

    // super stripe plugin
    if (!is_page(&#039;direct&#039;) &amp;&amp; !is_page(&#039;custom&#039;) &amp;&amp; !is_page(&#039;cancel&#039;) &amp;&amp; !is_page(&#039;success&#039;)) {

        wp_dequeue_script(&#039;supstr-aweber-js&#039;);
        wp_dequeue_script(&#039;supstr-shortcode-js&#039;);
        wp_dequeue_script(&#039;supstr-validate-js&#039;);

    }

    // search everything
    wp_dequeue_style(&#039;se-link-styles&#039;);

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

    // yet another related posts plugin
    wp_dequeue_style(&#039;yarppWidgetCss&#039;);

}
add_action(&#039;wp_enqueue_scripts&#039;, &#039;shapeSpace_disable_scripts_styles&#039;, 100);

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

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

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

function shapeSpace_disable_scripts_styles_admin_area() {

    wp_dequeue_style(&#039;jquery-ui-css&#039;);

}
add_action(&#039;admin_enqueue_scripts&#039;, &#039;shapeSpace_disable_scripts_styles_admin_area&#039;, 100);

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

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

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

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

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

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

function replace_scripts_styles_admin_area() {

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

}

add_action( &#039;admin_enqueue_scripts&#039;, &#039;replace_scripts_styles_admin_area&#039;, 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(&#039;dlm-frontend&#039;);

}
add_action(&#039;wp_print_styles&#039;, &#039;shapeSpace_disable_download_manager_styles&#039;, 100);

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

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

    wp_dequeue_style(&#039;yarppRelatedCss&#039;);

}
add_action(&#039;get_footer&#039;, &#039;shapeSpace_disable_yarpp_styles&#039;);

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

  1. 行星带 2021-02-01 · 11:03

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

  2. 静水流深 2021-01-25 · 16:07

    9年前也用过wordpress,后面就换掉了。用不带数据库的方便迁移

    1. 行星带 2021-01-26 · 14:24

      9年前啊,久远了,你现在是放在Bitcron上去了?

      1. 静水流深 2021-01-26 · 14:25

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

      2. 静水流深 2021-01-26 · 14:26

        真不想折腾博客,没写几篇文字,整天折腾样式插件,哎!违背了初衷了~

        1. 行星带 2021-01-30 · 18:00

          我用WP不就是因为懒。套个主题装个Markdown编辑器直接用

          1. 静水流深 2021-01-30 · 18:27

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