WordPress引入自定义JS

在WordPress子主题中自定义外部JS文件，通常是在子主题目录下创建一个专门的文件夹（例如 js）来存放，然后通过子主题的 functions.php 文件正确加载它们。

function your_child_theme_scripts() {
    wp_enqueue_script(
        'your-custom-script-handle', // 脚本的唯一标识
        get_stylesheet_directory_uri() . '/js/your-file.js', // 脚本路径
        array('jquery'), // 依赖项，如jQuery
        '1.0.0', // 版本号
        true // 是否在底部加载
    );
}
add_action('wp_enqueue_scripts', 'your_child_theme_scripts');

操作步骤与要点

创建文件夹与放置文件：在你的子主题目录下，创建一个名为 js 的文件夹（如果还没有的话），然后将你的自定义 .js 文件放入其中。

编辑 functions.php 文件：打开子主题的 functions.php 文件，添加代码来加载你的JS文件。 关键点：

• 使用正确的函数：在子主题中，务必使用 get_stylesheet_directory_uri() 来获取子主题目录的路径。如果使用 get_template_directory_uri()，它指向的是父主题的路径。
• 使用挂载钩子：通过 wp_enqueue_scripts 钩子来加载脚本
• 设置依赖和底部加载：wp_enqueue_script 函数中，array(‘jquery’) 表示依赖jQuery库；最后一个参数设为 true 通常意味着脚本会在页面底部加载，有助于加快页面显示。

重要提醒

• 务必使用子主题：为了避免主题更新时丢失你的自定义修改，强烈建议在子主题中进行操作
• 正确使用函数：在子主题中引入资源时，注意区分 get_stylesheet_directory_uri() （子主题）和 get_template_directory_uri() （父主题）。
• 妥善处理依赖关系：如果你的脚本依赖于其他库（如jQuery），务必在 wp_enqueue_script 中声明，WordPress会帮你处理加载顺序。
• 考虑使用插件管理复杂自定义：如果你的自定义JS代码非常复杂，或者需要在多个不同的主题上使用，也可以考虑将其打包为一个WordPress插件来管理。