深入理解 WordPress `wp_deregister_style()` 函数的源码：如何从样式队列中移除已注册的样式。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众，晚上好！我是今晚的主讲人，咱们今天要聊聊WordPress里一个看似不起眼，但实际上非常重要的小函数：wp_deregister_style()。别看它名字长，功能却很专一，就是从WordPress的样式队列里“注销”或者说“移除”已经注册的样式。

好，废话不多说，咱们直接进入正题，拨开源码的迷雾，看看这个函数到底是怎么工作的，以及如何在实际开发中正确、巧妙地使用它。

一、wp_deregister_style()：样式队列的“卸载大师”

首先，我们需要明确wp_deregister_style()的功能：它并非直接删除样式文件，而是通知WordPress，以后不要加载这个已经注册过的样式。这意味着，这个样式文件仍然存在于你的服务器上，只是WordPress不再把它添加到HTML的<head>标签里了。

这个函数接收一个参数：

wp_deregister_style( string $handle );

$handle：必需。要注销的样式句柄。这个句柄就是你之前用wp_register_style()注册样式时定义的那个唯一标识符。

二、源码剖析：一窥wp-includes/functions.wp-styles.php中的乾坤

要深入理解wp_deregister_style()，最好的方法就是直接看它的源码。在WordPress的wp-includes/functions.wp-styles.php文件中，你可以找到它的真身。

简化后的源码（为了便于理解，我删除了部分注释和错误处理代码）：

function wp_deregister_style( $handle ) {
    global $wp_styles;

    if ( ! is_a( $wp_styles, 'WP_Styles' ) ) {
        return;
    }

    $wp_styles->deregister( $handle );
}

怎么样，是不是很简单？它主要做了两件事：

检查全局变量 $wp_styles 是否存在且是 WP_Styles 类的实例。 $wp_styles 是WordPress用来管理所有已注册和排队样式的全局对象。如果它不存在，说明样式系统可能还没初始化，函数直接返回。
调用 $wp_styles 对象的 deregister() 方法，传入要注销的样式句柄。 这才是真正执行注销操作的地方。

三、WP_Styles::deregister()：幕后英雄

现在，我们需要进一步挖掘，看看 WP_Styles 类的 deregister() 方法是如何工作的。这个方法位于 wp-includes/class.wp-styles.php 文件中。

简化后的 deregister() 方法源码：

public function deregister( $handle ) {
    if ( ! isset( $this->registered[ $handle ] ) ) {
        return;
    }

    unset( $this->registered[ $handle ] );
    unset( $this->queue[ array_search( $handle, $this->queue, true ) ] );
}

这个方法做了以下几件事：

检查要注销的样式是否已经注册。 $this->registered 是一个关联数组，存储了所有已注册的样式信息，键是样式句柄。如果 $this->registered[ $handle ] 不存在，说明这个样式没有注册过，函数直接返回。
从 $this->registered 数组中移除该样式的信息。 unset( $this->registered[ $handle ] ) 彻底清除了这个样式的所有注册信息。
从 $this->queue 数组中移除该样式句柄。 $this->queue 是一个数组，存储了需要加载的样式句柄的顺序。 array_search() 查找 $handle 在 $this->queue 中的位置，然后 unset() 将其从队列中移除。

总结一下： wp_deregister_style() 的本质就是从 $wp_styles 对象的 $registered 数组中移除样式信息，并从 $queue 数组中移除样式句柄。

四、实战演练：wp_deregister_style() 的应用场景

wp_deregister_style() 在实际开发中有很多应用场景，最常见的包括：

移除主题或插件中不需要的样式。 很多主题或插件会加载一些你觉得没必要或者与你的网站风格不符的样式。使用 wp_deregister_style() 可以轻松移除这些样式，减少页面加载时间。

例如，你想移除 Contact Form 7 插件的默认样式：
```
function my_deregister_styles() {
    wp_deregister_style( 'contact-form-7' );
}
add_action( 'wp_enqueue_scripts', 'my_deregister_styles', 100 );
```
这里，我们创建了一个名为 my_deregister_styles() 的函数，并在 wp_enqueue_scripts 钩子上注册了这个函数。 100 是优先级，确保我们的函数在 Contact Form 7 加载其样式之后执行。
用自己的样式替换主题或插件的样式。 有时候，你可能需要修改主题或插件的样式，但又不想直接修改它们的代码。你可以先注销原来的样式，然后注册你自己的样式。
```
function my_replace_styles() {
    wp_deregister_style( 'theme-default' ); // 假设 'theme-default' 是主题默认样式的句柄
    wp_register_style( 'my-theme-style', get_stylesheet_directory_uri() . '/css/my-theme.css', array(), '1.0', 'all' );
    wp_enqueue_style( 'my-theme-style' );
}
add_action( 'wp_enqueue_scripts', 'my_replace_styles' );
```
在这个例子中，我们首先注销了主题的默认样式 theme-default，然后注册并加载了我们自己的样式 my-theme-style。

有条件地加载或不加载样式。 你可以根据不同的条件，决定是否注销某个样式。

function my_conditional_styles() {
    if ( is_page( 'contact' ) ) {
        wp_deregister_style( 'some-plugin-style' ); // 只在联系页面移除某个插件的样式
    }
}
add_action( 'wp_enqueue_scripts', 'my_conditional_styles' );

这个例子展示了如何在联系页面移除某个插件的样式。

五、注意事项：wp_deregister_style() 的使用陷阱

虽然 wp_deregister_style() 很方便，但使用时需要注意以下几点：

确保你使用了正确的样式句柄。 如果你使用的句柄不正确，wp_deregister_style() 将不起作用。你可以通过查看源代码、使用开发者工具或使用 wp_print_styles() 函数来找到正确的句柄。

function my_debug_styles() {
    global $wp_styles;
    echo '<pre>';
    print_r( $wp_styles->queue ); // 显示已排队的所有样式句柄
    echo '</pre>';
}
add_action( 'wp_footer', 'my_debug_styles' ); // 在页面底部输出，方便查看

确保在正确的钩子上调用 wp_deregister_style()。 通常，你应该在 wp_enqueue_scripts 钩子上调用 wp_deregister_style()，并设置合适的优先级，以确保在要注销的样式被加载之后执行。
注意样式的依赖关系。 如果某个样式依赖于你注销的样式，可能会导致页面显示错误。你需要仔细分析样式的依赖关系，并确保在注销某个样式后，页面仍然可以正常显示。可以使用 wp_register_style() 的第三个参数来定义样式依赖关系。
了解父主题和子主题的加载顺序。 如果你使用的是子主题，父主题的样式可能会在子主题的样式之前加载。你需要根据实际情况，选择合适的钩子和优先级来注销样式。

六、高级技巧：利用 wp_dequeue_style() 和 wp_dequeue_script()

除了 wp_deregister_style() 之外，还有两个类似的函数：wp_dequeue_style() 和 wp_dequeue_script()。它们的功能是取消排队样式或脚本，而不是注销它们。

wp_dequeue_style( string $handle )：从加载队列中移除指定的样式。
wp_dequeue_script( string $handle )：从加载队列中移除指定的脚本。

区别：

函数	功能	影响范围	适用场景
`wp_deregister_style()`	注销已注册的样式，使其无法被加载。	全局有效，即使在其他地方调用 `wp_enqueue_style()` 也不会加载。	当你确定某个样式在整个网站上都不需要时，使用这个函数。例如，移除某个插件的默认样式，并且你不想在任何页面上加载它。
`wp_dequeue_style()`	从当前页面或上下文中移除已排队的样式，但样式仍然注册。	仅影响当前页面或上下文。	当你只需要在特定页面或上下文中移除某个样式时，使用这个函数。例如，在联系页面移除某个插件的样式，但在其他页面仍然加载它。

简单来说，wp_deregister_style() 是“永久”移除，而 wp_dequeue_style() 是“临时”移除。

举例说明：

假设你有一个插件，它注册了一个名为 my-plugin-style 的样式。

如果你使用 wp_deregister_style( 'my-plugin-style' )，那么无论在哪个页面，这个样式都不会被加载。
如果你使用 wp_dequeue_style( 'my-plugin-style' )，并且是在某个特定页面（例如，联系页面）中调用的，那么只有在这个联系页面上，这个样式才不会被加载。在其他页面上，这个样式仍然会被加载。

七、总结：掌握 wp_deregister_style()，打造更轻量级的 WordPress 站点

wp_deregister_style() 是一个强大的工具，可以帮助你优化 WordPress 站点的性能，减少页面加载时间，并更好地控制站点的外观。通过深入理解它的源码和应用场景，你可以更加灵活地使用它，打造更轻量级、更个性化的 WordPress 站点。记住，使用时一定要注意正确的句柄、钩子和优先级，并仔细分析样式的依赖关系。

好了，今天的讲座就到这里。希望大家有所收获！感谢各位的观看，咱们下次再见！

发表回复 取消回复

发表回复取消回复