wordpress function.php jquery conflict?

WordPress function.php jQuery的冲突?

问题 (Question)

I am making a WordPress theme

I am trying to figure out why all of my scripts are not working... I posted my full functions.php below... Can anyone see what is wrong? I suspect jquery conflict... If so what is the problem?

let me know if you need the url where the problem is if you cannot see the mistake below...

Thank alot!

<?php
function biscuits_enqueue() {

    wp_enqueue_script( 'jquery-ui', 'https://code.jquery.com/jquery.js', array( 'jquery') );
    wp_enqueue_script( 'bootstrap.min', get_template_directory_uri(). '/js/bootstrap.min.js', array( 'jquery' ) );
    wp_enqueue_script( 'ekko-lightbox', get_template_directory_uri(). '/js/ekko-lightbox.js', array( 'jquery' ) ); 

}
add_action('wp_footer', 'biscuits_enqueue');
?>

<script>
    $(document).ready(function($){
        //lightbox
        $(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) {
            event.preventDefault();
            $(this).ekkoLightbox();
        });

        //bs-sidebar
        $(function () {
            var $window = $(window)
            var $body = $(document.body)
            var $sideBar = $('.bs-sidebar')

            var navHeight = $('.navbar').outerHeight(true) + 10

            $body.scrollspy({
              target: '.bs-sidebar',
              offset: navHeight
            })

            $('.bs-docs-container [href=#]').click(function (e) {
              e.preventDefault()
            })

            // back to top
            setTimeout(function () {
                    $sideBar.affix({
                    offset: {
                        top: function () {
                            var offsetTop = $sideBar.offset().top
                            var sideBarMargin = parseInt($sideBar.children(0).css('margin-top'), 10)
                            var navOuterHeight = $('.bs-docs-nav').height()

                            return (this.top = offsetTop - navOuterHeight - sideBarMargin)
                        },
                        bottom: function () {
                            return $('.bs-footer').outerHeight(true)
                        }
                    }
                })
            }, 100)

            $window.on('load resize', function () {
                $body.scrollspy('refresh')
            })

            $window.on('load', function () {
                $('.bs-top').affix();
                setTimeout(function () {
                    $sideBar.affix('checkPosition')
                }, 10);
            });

            // tooltip demo
            $('.tooltip-demo').tooltip({
                selector: "[data-toggle=tooltip]",
                container: "body"
            })

            $('.tooltip-test').tooltip()
            $('.popover-test').popover()

            $('.bs-docs-navbar').tooltip({
                selector: "a[data-toggle=tooltip]",
                container: ".bs-docs-navbar .nav"
            })
        })
    });
</script>

The problem may be caused by this:

Additional info

我做了一个WordPress主题

我想知道为什么我所有的脚本都不工作…我把我的全部functions.php下面…任何人都可以看到什么是错误的?我怀疑jQuery的冲突…如果有什么问题?

让我知道你需要的网址是哪里的问题如果你不能看到下面的错误…

感谢很多!

<?php
function biscuits_enqueue() {

    wp_enqueue_script( 'jquery-ui', 'https://code.jquery.com/jquery.js', array( 'jquery') );
    wp_enqueue_script( 'bootstrap.min', get_template_directory_uri(). '/js/bootstrap.min.js', array( 'jquery' ) );
    wp_enqueue_script( 'ekko-lightbox', get_template_directory_uri(). '/js/ekko-lightbox.js', array( 'jquery' ) ); 

}
add_action('wp_footer', 'biscuits_enqueue');
?>

<script>
    $(document).ready(function($){
        //lightbox
        $(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) {
            event.preventDefault();
            $(this).ekkoLightbox();
        });

        //bs-sidebar
        $(function () {
            var $window = $(window)
            var $body = $(document.body)
            var $sideBar = $('.bs-sidebar')

            var navHeight = $('.navbar').outerHeight(true) + 10

            $body.scrollspy({
              target: '.bs-sidebar',
              offset: navHeight
            })

            $('.bs-docs-container [href=#]').click(function (e) {
              e.preventDefault()
            })

            // back to top
            setTimeout(function () {
                    $sideBar.affix({
                    offset: {
                        top: function () {
                            var offsetTop = $sideBar.offset().top
                            var sideBarMargin = parseInt($sideBar.children(0).css('margin-top'), 10)
                            var navOuterHeight = $('.bs-docs-nav').height()

                            return (this.top = offsetTop - navOuterHeight - sideBarMargin)
                        },
                        bottom: function () {
                            return $('.bs-footer').outerHeight(true)
                        }
                    }
                })
            }, 100)

            $window.on('load resize', function () {
                $body.scrollspy('refresh')
            })

            $window.on('load', function () {
                $('.bs-top').affix();
                setTimeout(function () {
                    $sideBar.affix('checkPosition')
                }, 10);
            });

            // tooltip demo
            $('.tooltip-demo').tooltip({
                selector: "[data-toggle=tooltip]",
                container: "body"
            })

            $('.tooltip-test').tooltip()
            $('.popover-test').popover()

            $('.bs-docs-navbar').tooltip({
                selector: "a[data-toggle=tooltip]",
                container: ".bs-docs-navbar .nav"
            })
        })
    });
</script>

这个问题可能引起的:

附加信息

最佳答案 (Best Answer)

What are you asking about? The wp_enqueue_script or the javascript part?

wp_enqueue_script() takes a fourth argument which if true, will place a script in the footer as generated by get_footer() or wp_footer(). Also, you want to use the wp_enqueue_scripts for scripts, and not wp_footer like so:

add_action('wp_enqueue_scripts', 'my_theme_equeue_scripts');

..actually, it's the fifth argument.

. . .

In order to use jQuery, you must load the library with a <script> element and specify the script location with the src attribute.

e.g:

<script type="text/javascript" 
        src="http://rmko/wp-includes/js/jquery/jquery.js"></script>

<script type="text/javascript"
        src="http://rmko/wp-content/themes/MyWorkout24/js/bootstrap.js"></script>

If you did everything correctly on the Wordpress side of things, a line similar to the above should appear near the top or bottom of the final HTML document. If you can not locate "jquery.js" in the final HTML document, review the previous part of this answer. Note that "bootstrap.js" must come after jQuery (closer to the bottom of the final HTML).

When that is in order, you may employ the usual self-executing anonymous function paradigm to pass the "special" dollar sign to a block of JavaScript code;

<script>
(function($){

/*
we define a function with one "special" argument [funtion($){...}] and call
it immediately in another function: [()(jQuery)]. The outer function is given
the global jQuery object as an argument. That global variable is defined in 
"jquery.js". 

This works less than perfectly if -this- script is "below" (in the footer) 
everything else such as elements with HTML id attributes and CSS classes
that are commonly used as jQuery selectors. To  be on the safe side you
can do this: 
*/ 

// here, $ means jQuery. 
$(document).ready(function($){

    $('input[type="submit"]').click(function(event){
        event.preventDefault();
        alert('form is ready to be submitted.');
    });

});


})(jQuery)
</script>

. . .

Omar, I'm going to surmise that you are new to WP/PHP/JS and welcome you to StackOverflow. However, please read introductory documentation before posting questions here, because I for one treasure this place as somewhere to find non trivial solutions and well written suggestions for hard problems.

It is also a good place to learn by reading questions. Unfortunately I fear no one will learn anything from either your question or my answer that they could not have learned by browsing the web or even a book. I hope you understand my concern regarding pollution of SO with trivial questions.

你问的是什么?该wp_enqueue_script或JavaScript的部分?

wp_enqueue_script()以四分之一的说法如果属实,将生成的脚本在页脚get_footer()wp_footer()。同时,要使用wp_enqueue_scripts脚本,而不wp_footer像这样:

add_action('wp_enqueue_scripts', 'my_theme_equeue_scripts');

..其实,这是第五论

。..

为了使用jQuery,你必须加载库与<script>元素指定脚本的位置与src属性。

例句:

<script type="text/javascript" 
        src="http://rmko/wp-includes/js/jquery/jquery.js"></script>

<script type="text/javascript"
        src="http://rmko/wp-content/themes/MyWorkout24/js/bootstrap.js"></script>

如果你做了一切正确的事情的WordPress的一面,一条类似于上面应该出现在最终的HTML文档的顶部或底部。如果你不能找到“jQuery。JS”在最后的HTML文件,审查这个回答前面的部分。请注意,“引导。JS”就要来了jQuery(接近最终HTML底部)。

当这是为了,你可以使用通常的自我执行匿名函数的范式,通过“特殊”的美元符号块的JavaScript代码;

<script>
(function($){

/*
we define a function with one "special" argument [funtion($){...}] and call
it immediately in another function: [()(jQuery)]. The outer function is given
the global jQuery object as an argument. That global variable is defined in 
"jquery.js". 

This works less than perfectly if -this- script is "below" (in the footer) 
everything else such as elements with HTML id attributes and CSS classes
that are commonly used as jQuery selectors. To  be on the safe side you
can do this: 
*/ 

// here, $ means jQuery. 
$(document).ready(function($){

    $('input[type="submit"]').click(function(event){
        event.preventDefault();
        alert('form is ready to be submitted.');
    });

});


})(jQuery)
</script>

。..

奥玛尔,我要去猜测你是新的WP /PHP / JS和欢迎你的计算器。然而,请提问前请阅读这里的介绍文档,因为我一个珍惜这个地方作为一个地方找到非平凡解和良好的书面建议,难的问题。

这也是一个学习的好地方通过阅读问题。我害怕不幸的是没有人会了解你的问题和我的回答,他们无法浏览网页,甚至是一本书学到的。我希望你理解我的关于污染这么琐碎的问题。

本文翻译自StackoverFlow,英语好的童鞋可直接参考原文:http://stackoverflow.com/questions/22082228