在WordPress中实现Webflow JS

Question

我正在尝试在Webflow水平滚动中实现WordPress。

HTML导出(工作)：https://horizontalscrolling.demo.site/webflow/horizontal-scrolling/

我的WordPress尝试(不起作用)：https://horizontalscrolling.demo.site/horizontal-scrolling/

正如您在WordPress版本中所看到的，向下滚动不会使紫色部分中的图像水平移动。

我的问题是：

1. 如何修复控制台中的JS错误？

webflow.js:16 Uncaught TypeError: Cannot read property 'tram' of undefined
    at Object. (webflow.js:16)
    at n (webflow.js:7)
    at Object. (webflow.js:7)
    at n (webflow.js:7)
    at Object. (webflow.js:16)
    at n (webflow.js:7)
    at Object. (webflow.js:16)
    at n (webflow.js:7)
    at webflow.js:7
    at webflow.js:7

1. webflow.js是一个巨大的文件(155.3 KB)。当然，实际的相关代码只是一小部分。我如何确定它是什么部分，这样我就可以使用它了？

下面是我如何在WordPress中加载JS：

自定义功能插件中的代码：

wp_enqueue_script( 'main', plugin_dir_url( __FILE__ ) . 'assets/js/main.js', array( 'jquery' ), '1.0.0', true );

wp_enqueue_script( 'webflow', plugin_dir_url( __FILE__ ) . 'assets/js/webflow.js', '', '1.0.0', true );

其中main.js是：

(function($) {
    $("html").attr("data-wf-page", "5c37e0e1e3cff796d50e5cca");
    $("html").attr("data-wf-site", "5c37e0e1e3cff72e980e5cc5");
})(jQuery);

提前谢谢。

Answer 1

开始起作用了。

为了匹配Webflow导出中的数据属性，我不得不在HTML标记中添加几个数据属性。

然后将window.$的两个实例替换为webflow.js中的window.jQuery。在该文件的开头添加var $ = jQuery的替代方案。

现在需要弄清楚如何将webflow.js裁剪成所需的实际代码。