WordPress升级5.8后Slick Slider报$(...).slick is not a function错误求解

你遇到的$(...).slick is not a function报错是WordPress环境下使用jQuery插件的典型问题，核心诱因有三个：

1. WordPress自带的jQuery默认开启无冲突（noConflict）模式，全局环境下$别名默认不生效，直接调用会指向未定义的变量
2. 你额外引入了第三方jQuery资源，和WordPress自带的jQuery产生双实例冲突，slick方法仅挂载到了其中一个jQuery实例上，调用时的$指向的实例没有挂载slick方法
3. 硬编码的相对资源路径在WordPress多级路由下会解析失败，且没有声明脚本依赖关系，很容易出现slick晚于自定义初始化脚本加载的问题

按以下步骤依次修改即可修复问题：

• 移除硬编码的第三方jQuery引入：删除HTML中<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>这一行，WordPress默认已内置jQuery，重复引入必然导致实例冲突
• 修改自定义JS适配无冲突模式：将custom-slick.js中的代码替换为以下内容，外层用jQuery调用，内层回调中传入$别名即可正常使用：

jQuery(document).ready(function($){
    $('.center').slick({
        centerMode: true,
        centerPadding: '60px',
        slidesToShow: 3,
        responsive: [
            {
                breakpoint: 768,
                settings: {
                    arrows: false,
                    centerMode: true,
                    centerPadding: '40px',
                    slidesToShow: 3
                }
            },
            {
                breakpoint: 480,
                settings: {
                    arrows: false,
                    centerMode: true,
                    centerPadding: '40px',
                    slidesToShow: 1
                }
            },
            {
                lazyLoad: 'ondemand',
                slidesToShow: 3,
                slidesToScroll: 1
            }
        ]
    });
});

• 改用WordPress官方方法加载资源：将你模板文件中硬编码的所有link样式、script脚本标签全部删除，在自定义轮播插件的主文件中添加以下代码，自动处理资源路径、依赖关系和加载顺序：

function custom_carousel_load_assets() {
    // 注册加载样式
    wp_enqueue_style('slick-css', plugin_dir_url(__FILE__) . 'slick.css');
    wp_enqueue_style('slick-theme-css', plugin_dir_url(__FILE__) . 'slick-theme.css');
    wp_enqueue_style('custom-carousel-css', plugin_dir_url(__FILE__) . 'custom-carousel.css');

    // 注册加载脚本，声明依赖保证加载顺序
    wp_enqueue_script('slick-js', plugin_dir_url(__FILE__) . 'slick.min.js', array('jquery'), '1.8.1', true);
    wp_enqueue_script('custom-slick-js', plugin_dir_url(__FILE__) . 'custom-slick.js', array('jquery', 'slick-js'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'custom_carousel_load_assets');

• 冲突排查：如果修改完以上内容仍然报错，可以临时禁用其他插件、切换为WordPress默认主题，排查是否有其他扩展重复加载slick或者jQuery导致冲突。

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