如何在WordPress主题中高效引入smoothState.js等JS类库？

已发现的操作错误 #

• 子主题functions.php脚本注册/加载逻辑错误：
  1. 先注册了句柄为scount的smoothstate脚本，后续加载却没有使用这个句柄，反而直接填写相对路径，WordPress无法正确定位资源
  2. 加载自定义script.js时同样使用了相对路径，会出现路径解析错误
• script.js文件内容错误：
  JS文件内不能写<script>引入标签，这类标签仅适用于HTML文件，写在JS文件中会直接触发语法错误，导致整个JS文件失效
• 动画CSS选择器不匹配：你初始化smoothstate绑定的是#page元素，但过渡动画仅给了.site-content，如果你的主题中.site-content不是#page的直接子元素，或者动画类没有对应smoothstate的状态类，动画不会生效
• 冗余引入冲突：你已经通过WordPress的wp_enqueue_script加载了jquery和smoothstate，不需要在script.js中重复引入，会导致资源重复加载冲突

具体修正步骤 #

第一步：修正子主题functions.php的脚本加载代码 #

删除原有相关代码，替换为以下内容：

// 加载smoothstate和自定义脚本
add_action( 'wp_enqueue_scripts', 'custom_enqueue_smoothstate' );
function custom_enqueue_smoothstate() {
    // 注册smoothstate脚本，调用主主题路径
    wp_register_script( 'jquery-smoothstate-js', get_template_directory_uri() . '/assets/js/jquery.smoothstate.js', array( 'jquery' ), '0.5.2', true );
    // 加载smoothstate
    wp_enqueue_script( 'jquery-smoothstate-js' );
    // 加载自定义script.js：如果script.js放在子主题目录，用get_stylesheet_directory_uri()；如果放在主主题就用get_template_directory_uri()
    wp_enqueue_script( 'custom-script-js', get_template_directory_uri() . '/assets/js/script.js', array( 'jquery', 'jquery-smoothstate-js' ), '1.0.0', true );
}

末尾的true参数表示脚本加载到页脚，避免DOM未加载就执行JS的问题。

第二步：清空原有script.js内容，替换为以下代码 #

( function( $ ) {
    $( function() {
        // 确认你的主题页面外层容器ID确实为page，不是的话要改成对应ID
        if ( $( '#page' ).length > 0 ) {
            var settings = { 
                anchors: 'a:not([target="_blank"])', // 排除新窗口打开的链接，避免跳转异常
                prefetch: true,
                cacheLength: 2,
                onStart: {
                    duration: 280, // 和你CSS里的过渡时长保持一致
                    render: function ( $container ) {
                        $container.addClass( 'is-exiting' );
                    }
                },
                onReady: {
                    duration: 0,
                    render: function ( $container, $newContent ) {
                        $container.removeClass( 'is-exiting' );
                        $container.html( $newContent );
                        // 如果有需要重新初始化的JS（比如菜单、轮播）可以写在这里
                    }
                }
            };
            $( '#page' ).smoothState( settings );
        }
    } );
})( jQuery );

第三步：修正CSS过渡代码 #

替换原有CSS为以下内容，将代码添加到子主题的style.css或者主题自定义CSS面板即可：

#page {
    -webkit-transition: -webkit-transform .28s, opacity .28s;
    -ms-transition: transform .28s, opacity .28s;
    -o-transition: transform .28s, opacity .28s;
    transition: transform .28s, opacity .28s;
    opacity: 1;
    transform: translateY(0);
}
#page.is-exiting {
    opacity: 0;
    transform: translateY(20px);
}

你可以根据需求调整translateY的数值或者替换为其他动画效果，只要出入场的属性对应即可。

第四步：验证调试 #

修改后清空WordPress缓存和浏览器缓存，打开页面按F12查看控制台是否有报错：

• 如果报smoothState is not a function，说明smoothstate脚本加载失败，检查文件路径是否正确、文件名拼写是否和代码里一致
• 如果没有报错但跳转无效果，用浏览器元素选择工具点选页面最外层容器，确认ID是不是#page，如果不是替换掉JS里的#page即可

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