在 WordPress 的开发中，我们通常需要使用 JavaScript 来操作 DOM 或者发送 Ajax 请求等。然而，在 JS 脚本文件中经常需要引入其他资源或者与服务器交互，这就需要我们准确配置文件路径。本文将介绍如何在 WordPress 中使用正确的路径 URL。
WordPress 的路径 URL
在 WordPress 中，路径 URL 主要有两种类型：网站根目录 URL 和主题目录 URL。
- 网站根目录 URL 是指安装 WordPress 的根目录 URL。例如：
http://example.com。 - 主题目录 URL 是指正在使用的主题的目录 URL。例如：
http://example.com/wp-content/themes/mytheme/。
在 JS 文件中使用路径 URL
在 JS 文件中，我们可以通过以下方式来获取路径 URL：
// 获取网站根目录 URL const siteUrl = window.location.origin; // 获取主题目录 URL const themeUrl = window.themeUrl;
其中，window.themeUrl 需要在后台 PHP 文件中定义并传递给前端。
-- -------------------- ---- -------
---
- ------------ --- ----
--
-------- -------------------- -
------------------
---------------
---------------------------- - ----------------
--------
--------
----
--
--------- - -
---------- -- ----------------------------
--
------------------- --------------- ----------- --------- --
-
----------- --------------------- -------------------- --使用 wp_localize_script() 函数，我们将 $themeUrl 数组传递到前端，并定义为 themeUrl 变量。在 JS 文件中就可以通过 window.themeUrl 来获取主题目录 URL。
示例代码
下面是一个使用 jQuery 发送 Ajax 请求的例子：
-- -------------------- ---- -------
---------------------------------- -
-- ------
--------
---- -------- - -------------------------
----- ------
----- -
-------- ---
--
--------- -------
-------- -------------- -
------------------
--
------ ------------- ------------ ------------ -
---------------------------
-
---
---在上述代码中，我们通过 themeUrl 变量来构造完整的请求路径 URL。然后通过 jQuery 的 $.ajax() 方法发送 Ajax 请求，并在返回成功或失败时分别输出结果或错误信息。
总结
在 WordPress 开发中，正确配置路径 URL 是非常重要的。本文介绍了如何在 JS 脚本文件中获取网站根目录 URL 和主题目录 URL，并给出了一个使用 jQuery 发送 Ajax 请求的示例代码。希望能帮助读者理解和掌握相关知识。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26371