WordPress如何给插件的主文件里引用当前插件目录的CSS文件？

我们在开发的过程中，创建了一个新的CSS文件，例如：style.css文件，我们如何可以在插件的主文件中进行引用呢？

认识wp_enqueue_script钩子

首先介绍一下WordPress程序的wp_enqueue_scripts钩子，wp_enqueue_scripts钩子是WordPress标准钩子，用于在前端页面中加载 CSS 和 JavaScript 脚本。它在 wp_head 钩子之后被触发，但在 wp_footer 钩子之前被触发。这意味着它是在网页头部加载样式和脚本文件的最佳时机。

使用wp_enqueue_script钩子

1. 定义一个PHP函数名为：zibll_selectophobia_enqueue_styles
2. 定义PHP函数的样子是这样的：function zibll_selectophobia_enqueue_styles() {
3. 然后使用 wp_enqueue_style 函数加载一个名为 zibll-selectophobia-styles 的样式表文件，并将其位置设置为当前插件目录下的 style.css 文件。
4. 成了wp_enqueue_style( ‘zibll-selectophobia-styles’, plugin_dir_url( FILE ) . ‘style.css’ );这样
5. 上面代码以WP的wp_enqueue_style钩子函数开头，传入定义的PHP函数名 zibll-selectophobia-styles和plugin_dir_url( FILE ) . 'style.css'
6. plugin_dir_url( __FILE__ ) 是一个 WordPress 函数，用于获取当前插件目录的 URL。它接收一个参数 __FILE__，表示当前文件的路径和文件名。
7. 我们使用 plugin_dir_url( __FILE__ ) 来获取当前插件目录的 URL，并将其与 style.css 文件名组合在一起。这样就可以得到完整的样式表文件的 URL。
8. plugin_dir_url( __FILE__ ) . 'style.css' 表示当前插件目录下的 style.css 文件的 URL。当我们使用 wp_enqueue_style 函数加载样式表时，就可以使用这个 URL 来指定要加载的文件。
9. 然后使用}括号结束
10. 最后带上钩子函数add_action( 'wp_enqueue_scripts', 'zibll_selectophobia_enqueue_styles' );
11. add_action代表WordPress 中的动作钩子也是Action Hook函数之一
12. 括号里传入第一个参数wp_enqueue_scripts是前面介绍到的WP的钩子，可以在 wp_head 钩子之后被触发

最后整体代码结果

function zibll_selectophobia_enqueue_styles() {
    wp_enqueue_style( 'zibll-selectophobia-styles', plugin_dir_url( __FILE__ ) . 'style.css' );
}
add_action( 'wp_enqueue_scripts', 'zibll_selectophobia_enqueue_styles' );