在WordPress中添加skrollr及jQuery等JS库的正确方法

Hey there! 作为刚上手WordPress自定义模板的开发者，我完全懂你想要给网站加视差效果的心情——skrollr确实是个不错的选择。下面就一步步给你讲清楚在WordPress里正确添加它，以及通用的JS库加载方法：

WordPress有一套规范的脚本加载机制（wp_enqueue_script），不推荐直接在模板文件里硬写<script>标签，这样能避免版本冲突、重复加载，还能更好地管理依赖关系。具体操作如下：

1. 编辑主题的functions.php文件
   找到你的主题根目录下的functions.php（如果是子主题，就改子主题的functions.php），添加以下代码：

function my_theme_load_custom_scripts() {
    // 1. 加载WordPress自带的jQuery（不用自己下载，避免版本冲突）
    wp_enqueue_script('jquery');

    // 2. 注册并加载本地的skrollr.min.js
    wp_enqueue_script(
        'skrollr', // 脚本的唯一标识（自定义名称，不能重复）
        get_template_directory_uri() . '/js/vendors/skrollr.min.js', // 脚本的完整URL路径
        array('jquery'), // 依赖项：如果skrollr需要jQuery就填这个，不需要可以留空为array()
        '0.6.30', // 你的skrollr版本号（可以从下载的文件注释里找到）
        true // 是否在页面底部加载（推荐true，避免阻塞页面渲染）
    );

    // 3. 添加skrollr的初始化脚本
    // 先在主题的js目录下新建一个skrollr-init.js文件，用来写初始化代码
    wp_enqueue_script(
        'skrollr-init',
        get_template_directory_uri() . '/js/skrollr-init.js',
        array('skrollr'), // 依赖skrollr，确保在skrollr之后加载
        '', // 自定义脚本可以不用填版本号
        true
    );
}
// 挂载到WordPress的脚本加载钩子
add_action('wp_enqueue_scripts', 'my_theme_load_custom_scripts');

2. 编写skrollr的初始化代码
   在主题的js/目录下新建skrollr-init.js，添加以下基础初始化代码（可以根据你的需求加配置项）：

// 确保DOM加载完成后再初始化skrollr
document.addEventListener('DOMContentLoaded', function() {
    const skrollrInstance = skrollr.init({
        // 这里可以添加你的自定义配置，比如：
        // edgeStrategy: 'set',
        // easing: {
        //     ease: 'outCubic'
        // }
    });
});

3. 验证加载是否成功
   打开你的网站，右键查看页面源代码，搜索skrollr.min.js，如果能找到对应的链接，且点击能正常打开文件，就说明加载成功了。

不管是加载jQuery、第三方库还是自定义脚本，都可以遵循这套规范：

• 利用WordPress内置的JS库
  WordPress自带了很多常用库（比如jQuery、jQuery UI、Underscore.js等），直接用它们的官方标识加载即可，不用自己下载：

// 加载内置的jQuery UI
wp_enqueue_script('jquery-ui-core');
// 加载内置的Underscore.js
wp_enqueue_script('underscore');

• 加载本地自定义脚本
  和skrollr的加载逻辑一样，把脚本放到主题的js/目录下，用wp_enqueue_script注册，注意填写正确的路径和依赖项。

• 加载CDN上的脚本
  如果想用CDN托管的JS库（比如Chart.js、Vue.js），可以直接把CDN地址作为脚本路径：

wp_enqueue_script(
    'chartjs',
    'https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js',
    array(), // 无依赖就留空
    '4.4.0', // CDN脚本的版本号
    true
);

• 如果用的是子主题，要把get_template_directory_uri()换成get_stylesheet_directory_uri()，这样路径才会指向子主题目录。
• 永远优先使用wp_enqueue_script加载脚本，不要直接在header.php或footer.php里硬写<script>标签，否则可能会出现脚本冲突、缓存失效等问题。
• 如果你的skrollr不需要依赖jQuery，记得把依赖数组改成array()，避免不必要的加载。

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