jquery - 在 wordpress 中正确放置 $(document).ready(function(){ 的位置？

Question

我正在尝试添加 library到 wordpress。 所以我已经将所有的 CSS 和 JavaScript 库添加到 Wordpress。 现在我必须运行一些将在调用以下函数时执行的 Java 代码。

$(document).ready(function(){
        if (Modernizr.touch) {
            // show the close overlay button
            $(".close-overlay").removeClass("hidden");
            // handle the adding of hover class when clicked
            $(".img").click(function(e){
                if (!$(this).hasClass("hover")) {
                    $(this).addClass("hover");
                }
            });
            // handle the closing of the overlay
            $(".close-overlay").click(function(e){
                e.preventDefault();
                e.stopPropagation();
                if ($(this).closest(".img").hasClass("hover")) {
                    $(this).closest(".img").removeClass("hover");
                }
            });
        } else {
            // handle the mouseenter functionality
            $(".img").mouseenter(function(){
                $(this).addClass("hover");
            })
            // handle the mouseleave functionality
            .mouseleave(function(){
                $(this).removeClass("hover");
            });
        }
    });

如何将其添加到我的页面？

Answer 1

您应该将此代码添加到一个文件中并使用 wp_enqueue_scripts 添加。
函数 scripts_styles() {

使用wp_enqueue_script添加javascript

wp_enqueue_script( 'script-id', get_template_directory_uri() . '/js/main.js', array( 'jquery' ));

使用wp_enqueue_style

添加CSS wp_enqueue_style( 'all-theme', get_template_directory_uri() . '/css/style.css.css');
} add_action( 'wp_enqueue_scripts', 'scripts_styles' );