在 WordPress 的 Head 元素中添加 <script>-JavaScript中文网-JavaScript教程资源分享门户

在开发前端网站或 Web 应用程序时，我们通常需要在 HTML 页面的头部元素 (<head>) 中添加 JavaScript 代码来执行各种功能。对于使用 WordPress 搭建网站的用户来说，也可能需要在 WordPress 主题中添加自定义的 JavaScript 代码。

在本文中，我们将探讨如何在 WordPress 网站的 head 元素中添加 <script> 标签，并提供详细的步骤和示例代码。

步骤

第一步：创建 JavaScript 文件

首先，我们需要创建一个新的 JavaScript 文件，并编写我们想要添加到 WordPress 网站的代码。你可以使用任何文本编辑器（例如 Notepad、Sublime Text 或 Atom）来创建这个文件。

以下是一个简单的示例，该示例向用户显示一个弹出窗口：

alert("Hello, World!");

请注意，我们不会将上述代码直接添加到 HTML 文件中。相反，我们会将代码存储在 .js 文件中，并将该文件链接到 HTML 文件中。

第二步：上传 JavaScript 文件

上传 JavaScript 文件到 WordPress 主题目录中的 js 文件夹中。如果没有该文件夹，请创建一个。

你可以使用 FTP 客户端（例如 FileZilla）或 WordPress 后台的文件管理器来完成此操作。

第三步：将 JavaScript 文件链接到 WordPress 网站

现在，我们需要将 JavaScript 文件链接到我们的 WordPress 网站中。我们可以使用 wp_enqueue_script() 函数来实现这一点。

打开 WordPress 主题文件夹中的 functions.php 文件，然后在文件的末尾添加以下代码：

function add_custom_script() {
    wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/custom.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'add_custom_script' );

上述代码的作用是：

创建一个名为 add_custom_script 的新函数。
使用 wp_enqueue_script() 函数将我们的自定义脚本文件链接到 WordPress 网站。
将 add_custom_script 函数添加到 WordPress wp_enqueue_scripts 动作钩子中。

在上述代码中，我们需要修改以下参数：

'custom-script'：这是你想要给 JavaScript 文件命名的名称。可以随意更改此参数。
'/js/custom.js'：这是 JavaScript 文件的相对路径。如果你将 JavaScript 文件存储在其他位置，请相应地更改此路径。
'1.0.0'：这是你的 JavaScript 代码版本号。在更新代码时，你可以通过更改版本号来避免浏览器缓存旧代码的问题。

第四步：检查并保存更改

最后，我们需要检查我们的代码是否有效，并将所有更改保存到 WordPress 主题文件夹中。

打开 WordPress 网站，并使用浏览器的开发者工具（例如 Chrome 的开发者工具）检查 HTML 页面的 head 元素。你应该能够看到你的 JavaScript 文件已成功链接到网站。

结论

在本文中，我们探讨了如何在 WordPress 网站的 head 元素中添加 <script> 标签。通过遵循上述步骤，你可以将自定义 JavaScript 代码添加到 WordPress 网站，并为用户提供更好的用户体验。

示例代码：

function add_custom_script() {
    wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/custom.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'add_custom_script' );

alert("Hello, World!");

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/28373