剖析 WordPress `get_stylesheet_directory_uri()` 函数的源码：如何获取样式表目录的 URL。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

嘿，各位码农朋友们，今儿咱来聊聊 WordPress 里的一个“老熟人”——get_stylesheet_directory_uri()。别看它名字长，其实干的事儿挺简单，就是告诉你，你的主题样式表目录在哪儿，用 URL 的形式。但要真正理解它，光知道它能干啥还不够，得扒开它的源码，看看它葫芦里卖的啥药。准备好了吗？Let’s dive in!

一、打个招呼，热热身：样式表目录是啥玩意儿？

在正式开讲之前，咱们先来明确一下，啥是“样式表目录”。简单来说，就是存放你主题 CSS 文件的地方。它就像你家的衣柜，各种衣服（CSS 文件）都整整齐齐地挂在里面，负责给你的网站穿上漂亮的衣服。

在 WordPress 里，样式表目录通常有两个：

主题目录（Theme Directory）： 这是你主题的根目录，里面包含了主题的所有文件，包括 style.css、模板文件、图片等等。
子主题目录（Child Theme Directory）： 如果你使用了子主题，那么子主题目录就是子主题的根目录。子主题可以覆盖父主题的样式和功能，而不用直接修改父主题的文件。

get_stylesheet_directory_uri() 这个函数，就是用来获取当前生效主题的样式表目录的 URL。注意，是生效的，也就是说，如果你的网站使用了子主题，它会返回子主题的目录 URL。

二、源码解剖：get_stylesheet_directory_uri() 的真面目

现在，咱们来扒一扒 get_stylesheet_directory_uri() 的源码。这个函数定义在 wp-includes/theme.php 文件里。以下是源码：

function get_stylesheet_directory_uri() {
    /**
     * Filters the stylesheet directory URI.
     *
     * @since 1.5.0
     *
     * @param string $stylesheet_dir_uri Stylesheet directory URI.
     * @param string $stylesheet        Stylesheet name.
     */
    return apply_filters( 'stylesheet_directory_uri', get_stylesheet_directory_uri_raw(), get_stylesheet() );
}

看起来是不是很简单？就一行代码，还调用了 apply_filters() 函数。别急，咱们慢慢分析。

apply_filters()：WordPress 的钩子机制

apply_filters() 是 WordPress 的一个核心函数，它允许开发者通过“钩子”（Hook）来修改或扩展 WordPress 的功能。简单来说，它就像一个“拦截器”，在函数执行过程中，允许你插入自己的代码，改变函数的返回值。

在 get_stylesheet_directory_uri() 中，apply_filters() 的作用是：
- 'stylesheet_directory_uri'：这是钩子的名称，其他开发者可以使用 add_filter() 函数来注册自己的回调函数，对样式表目录 URL 进行修改。
- get_stylesheet_directory_uri_raw()：这是要被过滤的值，也就是未经修改的样式表目录 URL。
- get_stylesheet()：这是传递给回调函数的参数，表示当前生效的样式表名称。
也就是说，get_stylesheet_directory_uri() 函数的最终返回值，是由 get_stylesheet_directory_uri_raw() 函数返回的原始 URL，经过所有注册到 'stylesheet_directory_uri' 钩子的回调函数处理后得到的。
get_stylesheet_directory_uri_raw()：获取原始 URL

get_stylesheet_directory_uri_raw() 函数负责获取未经修改的样式表目录 URL。它的源码如下：
```
function get_stylesheet_directory_uri_raw() {
    $stylesheet = get_stylesheet();
    $theme_root_uri = get_theme_root_uri( $stylesheet );
    $stylesheet_dir = get_stylesheet();
    if ( is_ssl() && ! is_admin() && ! is_customize_preview() ) {
        $theme_root_uri = str_replace( 'http://', 'https://', $theme_root_uri );
    }

    return trailingslashit( $theme_root_uri . '/' . $stylesheet_dir );
}
```
让我们一步一步地拆解它：
- $stylesheet = get_stylesheet();：获取当前生效的样式表名称（也就是主题或子主题的目录名）。
- $theme_root_uri = get_theme_root_uri( $stylesheet );：获取主题根目录的 URL。这个函数会根据 $stylesheet 的值，判断是获取主题目录还是子主题目录的 URL。
- $stylesheet_dir = get_stylesheet();：重复获取样式表名称，这里似乎有点冗余，但没关系，我们继续往下看。
- if ( is_ssl() && ! is_admin() && ! is_customize_preview() ) { ... }：如果当前页面使用了 SSL 加密（HTTPS），并且不在后台管理界面或自定义预览界面，则将主题根目录 URL 中的 http:// 替换为 https://，确保 URL 的协议与当前页面一致。
- return trailingslashit( $theme_root_uri . '/' . $stylesheet_dir );：将主题根目录 URL 和样式表目录名拼接起来，并在末尾添加一个斜杠，然后返回结果。trailingslashit() 函数的作用就是确保 URL 以斜杠结尾。
get_stylesheet()：获取样式表名称

get_stylesheet() 函数负责获取当前生效的样式表名称。它的源码如下：
```
function get_stylesheet() {
    /**
     * Filters the name of the stylesheet.
     *
     * @since 1.5.0
     *
     * @param string $stylesheet Name of the stylesheet.
     */
    return apply_filters( 'stylesheet', get_option( 'stylesheet' ) );
}
```
同样，它也使用了 apply_filters() 函数，允许开发者通过 'stylesheet' 钩子来修改样式表名称。而 get_option( 'stylesheet' ) 函数则从 WordPress 数据库的 wp_options 表中读取 stylesheet 选项的值。这个选项存储了当前生效的样式表的名称。
get_theme_root_uri()：获取主题根目录 URL

get_theme_root_uri() 函数负责获取主题根目录的 URL。它的源码如下：
```
function get_theme_root_uri( $stylesheet_or_template = null, $theme_root = false ) {
    $theme_root_uri = get_option( 'siteurl' ) . '/wp-content/themes';

    if ( false !== $theme_root ) {
        $theme_root_uri = $theme_root;
    }

    if ( isset( $stylesheet_or_template ) && is_string( $stylesheet_or_template ) ) {
        $theme_root_uri .= '/' . $stylesheet_or_template;
    }

    /**
     * Filters the URI for the themes directory.
     *
     * @since 3.0.0
     *
     * @param string      $theme_root_uri         The URI for the themes directory.
     * @param string|null $stylesheet_or_template The stylesheet or template name.
     * @param bool        $theme_root             Whether to use the themes directory.
     */
    return apply_filters( 'theme_root_uri', $theme_root_uri, $stylesheet_or_template, $theme_root );
}
```
让我们分解一下：
- $theme_root_uri = get_option( 'siteurl' ) . '/wp-content/themes';：首先，它获取 WordPress 站点的 URL（通过 get_option( 'siteurl' ) 函数），然后拼接上 /wp-content/themes，得到主题根目录的默认 URL。
- if ( false !== $theme_root ) { ... }：如果传递了 $theme_root 参数，则使用 $theme_root 参数的值作为主题根目录 URL。这个参数允许开发者指定自定义的主题根目录。
- if ( isset( $stylesheet_or_template ) && is_string( $stylesheet_or_template ) ) { ... }：如果传递了 $stylesheet_or_template 参数（也就是主题或子主题的目录名），则将其拼接到主题根目录 URL 后面，得到特定主题或子主题的根目录 URL。
- return apply_filters( 'theme_root_uri', $theme_root_uri, $stylesheet_or_template, $theme_root );：最后，使用 apply_filters() 函数，允许开发者通过 'theme_root_uri' 钩子来修改主题根目录 URL。

三、总结：get_stylesheet_directory_uri() 的工作流程

现在，咱们把上面分析的各个部分串起来，总结一下 get_stylesheet_directory_uri() 的工作流程：

获取样式表名称： 调用 get_stylesheet() 函数，从数据库中读取当前生效的样式表名称（主题或子主题的目录名）。
获取主题根目录 URL： 调用 get_theme_root_uri() 函数，根据样式表名称，获取主题根目录的 URL。
拼接 URL： 将主题根目录 URL 和样式表名称拼接起来，得到样式表目录的 URL。
处理 HTTPS： 如果当前页面使用了 HTTPS，则将 URL 中的 http:// 替换为 https://。
添加斜杠： 在 URL 末尾添加一个斜杠。
应用过滤器： 使用 apply_filters() 函数，允许开发者通过 'stylesheet_directory_uri' 钩子来修改 URL。
返回结果： 返回最终的样式表目录 URL。

可以用表格更清晰的展示：

步骤	函数调用	功能描述
1	`get_stylesheet()`	获取当前激活的样式表名称（主题或子主题目录名）
2	`get_theme_root_uri()`	获取主题根目录的 URL
3	字符串拼接	将主题根目录 URL 和样式表名称拼接
4	HTTPS 处理	如果是 HTTPS 页面，替换 URL 中的 `http://` 为 `https://`
5	`trailingslashit()`	在 URL 末尾添加斜杠 `/`
6	`apply_filters()`	允许通过 `'stylesheet_directory_uri'` 过滤器修改 URL
7	返回	返回最终的样式表目录 URL

四、应用场景：get_stylesheet_directory_uri() 的用武之地

了解了 get_stylesheet_directory_uri() 的工作原理，咱们来看看它在实际开发中都有哪些应用场景：

引入 CSS 文件： 这是最常见的应用场景。你可以使用 get_stylesheet_directory_uri() 函数获取样式表目录的 URL，然后拼接上 CSS 文件的路径，生成完整的 CSS 文件 URL，最后使用 <link> 标签将其引入到 HTML 页面中。
```
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css">
```
引入 JavaScript 文件： 类似于引入 CSS 文件，你可以使用 get_stylesheet_directory_uri() 函数获取样式表目录的 URL，然后拼接上 JavaScript 文件的路径，生成完整的 JavaScript 文件 URL，最后使用 <script> 标签将其引入到 HTML 页面中。
```
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/script.js"></script>
```
加载主题图片： 如果你的主题需要在 CSS 或 JavaScript 文件中使用图片，可以使用 get_stylesheet_directory_uri() 函数获取样式表目录的 URL，然后拼接上图片文件的路径，生成完整的图片 URL。
```
body {
    background-image: url('<?php echo get_stylesheet_directory_uri(); ?>/images/background.png');
}
```

创建自定义主题选项： 如果你正在开发一个自定义主题，并且希望允许用户自定义主题的某些样式或功能，可以使用 get_stylesheet_directory_uri() 函数获取样式表目录的 URL，然后将自定义选项保存到主题目录下。

// 保存自定义选项
$options = array(
    'logo_url' => get_stylesheet_directory_uri() . '/images/logo.png',
    'background_color' => '#f0f0f0'
);
update_option( 'my_theme_options', $options );

// 获取自定义选项
$options = get_option( 'my_theme_options' );
echo '<img src="' . $options['logo_url'] . '">';

五、实战演练：一个简单的例子

为了更好地理解 get_stylesheet_directory_uri() 的用法，咱们来做一个简单的例子。假设你正在开发一个子主题，并且希望在子主题的 functions.php 文件中引入一个自定义的 CSS 文件。你可以这样做：

function my_theme_enqueue_styles() {
    $parent_style = 'parent-style'; // 这是父主题的样式表句柄

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );

    wp_enqueue_style( 'custom-style', get_stylesheet_directory_uri() . '/css/custom.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

在这个例子中，my_theme_enqueue_styles() 函数负责注册和加载 CSS 文件。wp_enqueue_style() 函数是 WordPress 提供的用于注册和加载 CSS 文件的函数。

wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );：这行代码注册并加载父主题的 style.css 文件。get_template_directory_uri() 函数用于获取父主题的目录 URL。
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), wp_get_theme()->get('Version') );：这行代码注册并加载子主题的 style.css 文件。get_stylesheet_directory_uri() 函数用于获取子主题的目录 URL。array( $parent_style ) 表示子主题的 style.css 文件依赖于父主题的 style.css 文件，也就是说，父主题的 style.css 文件必须先加载。
wp_enqueue_style( 'custom-style', get_stylesheet_directory_uri() . '/css/custom.css' );：这行代码注册并加载子主题的 css/custom.css 文件。同样，get_stylesheet_directory_uri() 函数用于获取子主题的目录 URL。

六、注意事项：一些小贴士

在使用 get_stylesheet_directory_uri() 函数时，需要注意以下几点：

区分 get_stylesheet_directory_uri() 和 get_template_directory_uri()： get_stylesheet_directory_uri() 函数获取的是当前生效的样式表目录 URL，而 get_template_directory_uri() 函数获取的是父主题的目录 URL。如果你的网站使用了子主题，那么这两个函数的返回值可能不同。
使用 trailingslashit() 函数： 为了确保 URL 以斜杠结尾，建议在使用 get_stylesheet_directory_uri() 函数拼接 URL 时，使用 trailingslashit() 函数。
避免硬编码 URL： 尽量不要在代码中硬编码 URL，而是使用 get_stylesheet_directory_uri() 函数动态获取 URL，这样可以提高代码的可维护性和可移植性。
利用钩子： 如果你需要修改样式表目录 URL，可以使用 apply_filters() 函数提供的 'stylesheet_directory_uri' 钩子。

七、课后思考：更深层次的理解

get_stylesheet_directory_uri() 函数是如何判断当前生效的是主题还是子主题的？
apply_filters() 函数在 WordPress 中扮演了什么角色？
除了 'stylesheet_directory_uri' 钩子，还有哪些钩子可以用来修改主题相关的 URL？

希望通过今天的讲解，你对 WordPress 的 get_stylesheet_directory_uri() 函数有了更深入的理解。记住，编程不仅仅是写代码，更重要的是理解代码背后的原理。只有理解了原理，才能更好地运用代码，解决实际问题。下次再见！

发表回复 取消回复

发表回复取消回复