WordPress Enqueue 样式子主题 - PHP

当在使用 WordPress 写主题时，往往需要引入一些样式文件。这就需要使用到 wp_enqueue_style 函数。

为什么要使用 wp_enqueue_style 函数

在开发 WordPress 主题时，常常需要引入一些额外的 CSS 文件。比如说，引入某个 UI 库，或者自己所写的一些 CSS 文件。

传统的做法是在 header.php 文件中使用 <link> 标签手动引入 CSS 文件。但是这种方法有一些缺陷：

• 每个页面都会重复引入 CSS 文件，增加了页面加载的时间。
• 这些 CSS 文件受到 WordPress 的缓存机制的控制，可能会因为缓存导致修改不生效。

使用 wp_enqueue_style 函数可以避免这些缺陷。

如何使用 wp_enqueue_style 函数

wp_enqueue_style 函数有三个参数，分别是样式文件的“别名”（handle）、文件的 URL、和依赖文件。其中 URL 和依赖文件是必须的，而“别名”可以不填写。

示例代码：

function my_theme_enqueue_styles() {
  wp_enqueue_style( 'my-styles', get_stylesheet_directory_uri() . '/styles.css', array(), '1.0', 'all' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

上面的 my-styles 就是样式文件的“别名”，可以用来在函数 wp_enqueue_style 的第二个参数位置引用这个样式文件。第三个参数指定了这个样式文件所依赖的 CSS 文件。

我们将这个函数挂载在 wp_enqueue_scripts 动作上，确保样式文件会在前端页面加载时被引入。

核心代码解析

wp_enqueue_style 函数的参数含义如下：

• 'my-styles'：样式文件的别名。
• get_stylesheet_directory_uri() . '/styles.css'：样式文件的 URL。
• array()：依赖文件的数组。在这个例子中，没有依赖文件。
• '1.0'：样式文件的版本号。如果修改了样式文件，就需要更新版本号，以便更新缓存。
• 'all'：样式文件的媒体类型。如果对于特定媒体类型有特殊要求，可以修改此选项。

总结

在 WordPress 中，使用 wp_enqueue_style 函数可以更好地管理样式文件，避免冗余的文件加载和缓存问题。在编写主题时，建议将引入样式文件的代码写在单独的 .php 文件中，并以某个需要引入这个样式文件的页面为入口点，在 functions.php 中使用 require 或 include 引入该文件。这样可以让代码更加清晰易读。