在 Wordpress 中从 functions.php 调用 jQuery

Question

我想在 WordPress 中从我的 functions.php 调用一个 jQuery。

我正在使用 Divi 主题。当我将脚本直接添加到 Divi 主题中时，它可以工作。但我想将它添加到我的子主题的functions.php 中，这就是问题的开始。

函数.php

function coolbanner_enqueue() {
    wp_enqueue_script( 'custom-scripts', get_stylesheet_directory_uri() . '/js/coolbanner.js', array( 'jquery' ));
}
add_action( 'wp_enqueue_scripts', 'coolbanner_enqueue' );

脚本：

jQuery(document).ready(function(){
    jQuery('#cta-section').waypoint(function() {
        jQuery('#cta-section').toggleClass('animate-cta');
    }, {offset: '80%'});
});

谁能指出我做错了什么？

Answer 1

好像你缺少 jQuery Waypoint JS 文件

尝试使用您的自定义脚本将 jquery waypoint js 文件之前加入队列

function coolbanner_enqueue() {
    wp_enqueue_script( 'jquery-waypoint', 'https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js', [ 'jquery' ] );
    wp_enqueue_script( 'custom-scripts', get_stylesheet_directory_uri() . '/js/coolbanner.js', array( 'jquery-waypoint' ));
}
add_action( 'wp_enqueue_scripts', 'coolbanner_enqueue' );

你可以在这里找到 jquery waypoint github repo...

https://github.com/imakewebthings/waypoints

另外，我在下面使用的 url 来自一个 cdn，您可以在这里找到：

https://cdnjs.com/libraries/waypoints

如果你觉得使用 github 的 url 更舒服

然后只需将 cdn url 替换为以下内容...

https://raw.githubusercontent.com/imakewebthings/waypoints/master/lib/jquery.waypoints.min.js

Answer 2

解决方案：

function coolbanner_enqueue() {       
    wp_enqueue_script( 'custom-scripts-js', get_stylesheet_directory_uri() . '/js/coolbanner.js', array( 'jquery' ), '1.0', false);
}
add_action( 'wp_enqueue_scripts', 'coolbanner_enqueue' );