WordPress通过functions.php加载脚本失败如何排查解决？

你目前的写法存在两个核心问题，导致脚本无法加载：

1. 直接在functions.php中写入<script>HTML标签，functions.php是纯PHP逻辑文件，不能直接输出前端HTML标签，会导致代码执行异常、输出位置错误。
2. 仅通过add_action注册了钩子，但完全没有定义对应的回调函数add_scripts，WordPress找不到要执行的加载逻辑，自然不会加载任何脚本。

替换你现有相关代码为以下内容即可：

<?php
// 定义脚本加载回调函数
function add_scripts() {
    // 可选：如果要使用自己的jQuery版本，先注销WordPress自带jQuery
    wp_deregister_script('jquery');
    wp_enqueue_script('jquery', get_template_directory_uri() . '/assets/js/vendor/jquery-1.12.4.min.js', array(), '1.12.4', false);

    // 按顺序加载其余脚本
    wp_enqueue_script('modernizr', get_template_directory_uri() . '/assets/js/vendor/modernizr-3.6.0.min.js', array(), '3.6.0', false);
    wp_enqueue_script('popper', get_template_directory_uri() . '/assets/js/popper.min.js', array('jquery'), '1.0', true);
    wp_enqueue_script('bootstrap', get_template_directory_uri() . '/assets/js/bootstrap.min.js', array('jquery', 'popper'), '5.0', true);
    wp_enqueue_script('slick', get_template_directory_uri() . '/assets/js/slick.min.js', array('jquery'), '1.0', true);
    wp_enqueue_script('magnific-popup', get_template_directory_uri() . '/assets/js/jquery.magnific-popup.min.js', array('jquery'), '1.0', true);
    wp_enqueue_script('isotope', get_template_directory_uri() . '/assets/js/isotope.pkgd.min.js', array('jquery'), '1.0', true);
    wp_enqueue_script('imagesloaded', get_template_directory_uri() . '/assets/js/imagesloaded.pkgd.min.js', array('jquery'), '1.0', true);
    wp_enqueue_script('nice-select', get_template_directory_uri() . '/assets/js/jquery.nice-select.min.js', array('jquery'), '1.0', true);
    wp_enqueue_script('nice-number', get_template_directory_uri() . '/assets/js/jquery.nice-number.min.js', array('jquery'), '1.0', true);
    wp_enqueue_script('jquery-ui', get_template_directory_uri() . '/assets/js/jquery-ui.min.js', array('jquery'), '1.0', true);
    wp_enqueue_script('syotimer', get_template_directory_uri() . '/assets/js/jquery.syotimer.min.js', array('jquery'), '1.0', true);
    wp_enqueue_script('main', get_template_directory_uri() . '/assets/js/main.js', array('jquery'), '1.0', true);
}
// 绑定钩子到回调函数，必须放在函数定义之后
add_action('wp_enqueue_scripts', 'add_scripts');
?>

如果你的functions.php文件开头已经包含<?php开标签，无需重复添加代码开头的<?php。

wp_enqueue_script参数说明：第三个参数为依赖数组，填写依赖的脚本句柄可保证加载顺序正确；第五个参数为true表示脚本放在页脚加载，为false表示放在头部加载。

• 确保你主题目录下的assets/js路径中对应脚本文件真实存在，大小写和文件名完全匹配。
• 如果你使用的是子主题，将代码中所有get_template_directory_uri()替换为get_stylesheet_directory_uri()。
• 加载后如果出现脚本冲突，可以先注释掉自定义jQuery加载的两行，使用WordPress自带的jQuery版本测试。

内容的提问来源于stack exchange，提问作者Rory Neill