如何在WordPress的functions.php中调用指定jQuery脚本？

没问题，我来帮你一步步搞定这个事儿。WordPress对jQuery的加载有自己的规则，直接写原生jQuery可能会出问题，所以得按照它的规范来，下面给你两种靠谱的方法：

方法一：直接在functions.php中添加内联脚本（适合短代码） #

这种方法不用额外创建JS文件，直接把代码嵌入到页面底部，简单直接：

把这段代码添加到你的主题（推荐用子主题，避免主题更新丢失代码）的functions.php文件里：

function custom_levering_trigger_script() {
    // 可选：只在WooCommerce产品页面加载脚本，减少不必要的资源消耗
    if ( is_product() ) {
        ?>
        <script type="text/javascript">
            // 用jQuery的ready方法确保DOM加载完成后再绑定事件
            jQuery(document).ready(function($) {
                // 这里可以用$代替jQuery，写起来更顺手
                $("ul[data-attribute_name=attribute_pa_afhentning-og-levering] li").click(function(){ 
                    var selectedlevering = $("ul[data-attribute_name=attribute_pa_afhentning-og-levering]").find("li.selected").attr("data-value"); 
                    if (selectedlevering === "afhentning"){ 
                        $("ul[data-attribute_name=attribute_pa_packages] li[data-value=afhentning] span").click(); 
                        $("ul[data-attribute_name=attribute_pa_packages] li[data-value=afhentning]").hide(); 
                    } 
                });
            });
        </script>
        <?php
    }
}
// 把脚本挂到wp_footer钩子，确保在页面底部加载，此时jQuery已经加载完成
add_action( 'wp_footer', 'custom_levering_trigger_script' );

关键说明： #

• wp_footer钩子：保证脚本在页面底部输出，这时候WordPress默认加载的jQuery已经就绪了，不会出现找不到jQuery的错误
• is_product()：判断当前是否是WooCommerce产品页面，如果你需要在其他页面也生效，直接删掉这个判断就行
• jQuery(document).ready(function($) { ... })：给jQuery起个$的别名，不用每次都写长长的jQuery，代码更简洁

方法二：用单独的JS文件加载（更规范，适合代码较多的情况） #

如果之后你还要扩展脚本功能，这种方法更易维护：

1. 创建JS文件：在你的主题文件夹下新建一个js目录，然后创建custom-levering-script.js文件，把下面的代码放进去：

jQuery(document).ready(function($) {
    $("ul[data-attribute_name=attribute_pa_afhentning-og-levering] li").click(function(){ 
        var selectedlevering = $("ul[data-attribute_name=attribute_pa_afhentning-og-levering]").find("li.selected").attr("data-value"); 
        if (selectedlevering === "afhentning"){ 
            $("ul[data-attribute_name=attribute_pa_packages] li[data-value=afhentning] span").click(); 
            $("ul[data-attribute_name=attribute_pa_packages] li[data-value=afhentning]").hide(); 
        } 
    });
});

2. 在functions.php中注册并加载脚本：把这段代码添加到functions.php里：

function enqueue_custom_levering_script() {
    if ( is_product() ) {
        // 注册脚本，指定依赖jQuery，确保jQuery先加载
        wp_register_script( 
            'custom-levering-script', 
            get_template_directory_uri() . '/js/custom-levering-script.js', 
            array( 'jquery' ), 
            '1.0', 
            true // 这个参数设为true，让脚本在页面底部加载，优化性能
        );
        // 加载注册好的脚本
        wp_enqueue_script( 'custom-levering-script' );
    }
}
add_action( 'wp_enqueue_scripts', 'enqueue_custom_levering_script' );

关键说明： #

• 如果用的是子主题，把get_template_directory_uri()换成get_stylesheet_directory_uri()，这样路径会指向子主题的目录，避免父主题覆盖
• array('jquery')：告诉WordPress这个脚本依赖jQuery，它会自动确保jQuery先加载，不会出现依赖问题

额外注意事项 #

• 不要直接修改父主题的functions.php，一定要用子主题，否则主题更新后你的代码会全部丢失
• 测试前记得清除浏览器缓存和WordPress缓存，确保新脚本能正确加载
• 如果点击事件没生效，可以打开浏览器的开发者工具（F12），看控制台有没有报错，排查路径或者选择器的问题

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