如何将自定义 JavaScript 添加到 WordPress 网站

通过添加 JavaScript 脚本到 WordPress 网站，可以在网站的前端实现更多的功能和效果。那么如何将 JavaScript 添加到 WordPress 网站上呢？我们可以选择使用插件来实现。

将自定义 JavaScript 添加到 WordPress

WordPress 的自定义外观功能（或者叫主题定制器），允许我们添加自定义的 CSS 到当前主题，但却没有提供添加自定义 JavaScript 的功能。要将自定义 JavaScript 脚本添加到 WordPress 网站，我们需要使用第三方插件或编辑主题的 functions.php 文件的方式来实现。

1. 我们使用不同类型的插件将自定义 JavaScript 添加到 WordPress： 

• 用于编辑页眉和页脚的插件
• 用于向 WordPress 添加自定义 JS 代码的插件

2. 或者可以在 functions.php 文件中使用 WordPress 函数和钩子 ：

• 使用 wp_head 和 wp_footer 钩子
• 使用 wp_enqueue_scripts ， admin_enqueue_scripts 和 login_enqueue_scripts 钩子
• 使用 wp_enqueue_script() 的函数

不建议使用传统调用方法

尽管可以直接将调用 JavaScript 脚本的代码添加到 header.php 或 footer.php 模板文件中，但是官方建议尽量不使用这种方法。如果将自定义 JavaScript 直接加入页头或页脚模板文件中，可能会导致脚本与主题、插件或 WordPress 核心发生冲突。

<script src="https://example.com/wp-content/themes/your-theme/js/script.js"></script>

使用插件添加自定义 JavaScript 

如果不想直接编辑网站的模板文件，也不想将 JavaScript 添加到特定主题内，那么我们可以使用插件的方式。

用于编辑header.php和footer.php的插件

我们可以安装一款编辑页眉和页脚模板文件的插件“Insert Headers and Footers”，该插件允许我们编辑页眉和页脚文件。有一些脚本需要安装在页眉上 ，例如百度统计脚本，谷歌统计脚本等，就将这些脚本放置在页眉模板文件。而有一些可以在内容之后加载的脚本，我们就将其放置在页脚模板文件中。

添加自定义 JavaScript 的插件 

我们也可以安装一款专门用来添加自定义CSS 和 JavaScript 的插件“Custom CSS & JS”。这款插件与上面提到的“Insert Headers and Footers”插件非常相似，也是使用 wp_head 和 wp_footer 钩子函数。

编辑子主题的functions.php文件

除了使用插件之外，我们还可以使用 WordPress 的内置函数和动作钩子，将自定义 JavaScript 添加到Wordpress网站。

这种方式，我们需要编辑主题下的 functions.php文件，并将脚本手动上传到网站服务器。我们建议先为当前主题创建子主题，这样就不会因为更新父主题而导致脚本文件失效。我们可以将自定义脚本上传到子主题的根文件夹，如果有多个脚本，还可以为它们创建一个脚本文件夹。

然后，将调用JavaScript脚本的代码，加入 functions.php 文件中。我们可以在本地编辑器中编辑此文件，并将修改后的文件版本手动上传到子主题文件夹下。还可以通过WordPress 管理仪表盘的外观 > 主题编辑器来编辑该文件。

使用 wp_enqueue_script()函数调用脚本

WordPress 官方建议使用 wp_enqueue_script() 函数来调用自定义脚本。这个内置函数遵循 WordPress 的加载序列，因而不会与 WordPress 核心加载的其他脚本或已安装的插件发生冲突。

使用 wp_enqueue_script()，可以将自定义 JavaScript 添加到页眉和页脚模板文件。

如果要将脚本添加载到页眉中，只需要加一个自定义句柄和脚本路径即可。正如在下面看到的，我们使用了get_stylesheet_directory_uri() 函数来获取子主题目录的 URI。而 add_action()函数将自定义函数 tutsplus_enqueue_custom_js()添加到 wp_enqueue_scripts 动作钩子上，这样就可以在前端调用该脚本了。

/* Custom script with no dependencies, enqueued in the header */
add_action('wp_enqueue_scripts', 'tutsplus_enqueue_custom_js');
function tutsplus_enqueue_custom_js() {
    wp_enqueue_script('custom', get_stylesheet_directory_uri().'/scripts/custom.js');
}

我们还可以使用 wp_enqueue_script() 函数，将自定义 JavaScript 脚本添加到页脚模板文件中。但是，在这种情况下，还需要定义一些其他的参数： 

1. 依赖项：array() 
2. 脚本的版本：false 不添加版本号
3. 加载的位置：true 为加载到页脚，false 为加载到页眉

/* Custom script with no dependencies, enqueued in the footer */
add_action('wp_enqueue_scripts', 'tutsplus_enqueue_custom_js');
function tutsplus_enqueue_custom_js() {
    wp_enqueue_script('custom', get_stylesheet_directory_uri().'/scripts/custom.js', 
    array(), false, true);
}

如果自定义脚本有依赖项，则需要将它们添加到函数 wp_enqueue_script() 的 array() 参数中。WordPress 核心提供了一些流行的脚本和库，例如 jQuery，我们可以将它添加到依赖项。

/* Custom script with jQuery as a dependency, enqueued in the footer */
add_action('wp_enqueue_scripts', 'tutsplus_enqueue_custom_js');
function tutsplus_enqueue_custom_js() {
    wp_enqueue_script('custom', get_stylesheet_directory_uri().'/scripts/custom.js', 
    array('jquery'), false, true);
}

如果还要添加其他的依赖项，则需要使用其他的 wp_enqueue_script() 函数将其加入队列，然后才能将其添加为依赖项。

如果想在 WordPress 的管理仪表盘调用脚本，则可以使用 admin_enqueue_scripts 动作钩子。