WordPress 是一个非常流行的内容管理系统，因此开发者们经常需要编写 WordPress 插件来扩展其功能。然而，很多开发者在编写插件时都遇到了一个问题：如何在插件中包含 CSS 和 jQuery 文件？本文将为你介绍一些方法来解决这个问题。
方法 1：将 CSS 和 jQuery 文件放置在主题中
最简单的方法是将 CSS 和 jQuery 文件放置在 WordPress 主题目录的子目录中。这样可以确保这些文件会被加载，并且它们不会与其他插件的文件产生冲突。
首先，在你的主题目录中创建一个名为“my-plugin”的子目录。然后，将你的 CSS 和 jQuery 文件保存在“my-plugin”目录中。例如，你可以将你的 CSS 文件命名为“style.css”，将 jQuery 文件命名为“script.js”。
接下来，编辑你的插件代码文件并添加以下代码：
function my_plugin_scripts() { wp_enqueue_style( 'my-plugin-style', plugins_url( '/my-plugin/style.css' ) ); wp_enqueue_script( 'my-plugin-script', plugins_url( '/my-plugin/script.js' ), array('jquery'), '', true ); } add_action( 'wp_enqueue_scripts', 'my_plugin_scripts' );
上述代码使用 wp_enqueue_style() 和 wp_enqueue_script() 函数将 CSS 和 jQuery 文件添加到 WordPress 的加载队列中。请注意，plugins_url() 函数用于获取指向“my-plugin”目录的绝对路径。
方法 2：将 CSS 和 jQuery 文件打包到插件中
如果你不想依赖主题来加载你的 CSS 和 jQuery 文件，那么另一种选择是在插件本身中打包这些文件。这样可以确保无论用户使用哪个主题，都能正确地加载所需的文件。
为了打包 CSS 和 jQuery 文件，你可以使用 Webpack 或 Parcel 等构建工具。这些工具可用于将多个文件捆绑在一起并生成单个 JavaScript 文件。
以下是一个示例 webpack 配置文件：
-- -------------------- ---- ------- ----- ---- - ---------------- -------------- - - ------ - ------- ------------------ ------ ----------------- -- ------- - --------- ------------ ----- ----------------------- ------- -- ------- - ------ - - ----- ---------- ---- ---------------- ------------- - - - --展开代码
上述配置文件使用 entry 属性指定要打包的源文件，并使用 output 属性指定生成文件的名称和路径。此外，它还使用 module.rules 属性来指定如何处理 CSS 文件。
当你运行 webpack 命令时，它将生成一个名为“script.js”的文件和一个名为“style.css”的文件，这两个文件将被保存在“dist”目录中。
接下来，将生成的文件复制到你的 WordPress 插件目录中，并在插件代码中加载它们：
function my_plugin_scripts() { wp_enqueue_style( 'my-plugin-style', plugins_url( '/my-plugin/dist/style.css' ) ); wp_enqueue_script( 'my-plugin-script', plugins_url( '/my-plugin/dist/script.js' ), array('jquery'), '', true ); } add_action( 'wp_enqueue_scripts', 'my_plugin_scripts' );
上述代码与方法 1 中的代码非常相似，只是文件路径不同。
结论
无论你选择哪种方法，都应该能够在你的 WordPress 插件中成功包含 CSS 和 jQuery 文件。如果你希望确保你的插件兼容多个主题，请使用方法 2 并将文件打包到插件中。
最后，以下是一个完整的示例插件，其中包含方法 1 和方法 2 的代码：
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/15695) ，转载请注明来源 [https://www.javascriptcn.com/post/15695](https://www.javascriptcn.com/post/15695)
