我正在制作 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>
问题可能是由此引起的:
答案 0 :(得分:1)
wp_enqueue_script()
接受第四个参数,如果为true,则会将脚本放在由get_footer()
或wp_footer()
生成的页脚中。此外,您希望将wp_enqueue_scripts
用于脚本,而不是wp_footer
,例如:
add_action('wp_enqueue_scripts', 'my_theme_equeue_scripts');
..实际上,它是fifth argument。
要使用jQuery,您必须使用<script>
元素加载库,并使用src
属性指定脚本位置。
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>
如果您在Wordpress方面做了一切正确的事情,最终HTML文档的顶部或底部附近会出现与上面类似的行。如果你找不到&#34; jquery.js&#34;在最终的HTML文档中,请查看此答案的前一部分。注意&#34; bootstrap.js&#34;必须来之后 jQuery(更接近最终HTML的底部)。
当这样的顺序时,您可以使用通常的自动执行匿名函数范例来传递&#34;特殊的&#34;美元符号到一段JavaScript代码;
<script>
(function($){
/*
we define a function with one "special" argument [function($){...}] 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,我猜想你是WP / PHP / JS的新手,欢迎你来到StackOverflow。但是,在这里发布问题之前,请先阅读介绍性文档,因为我觉得这个地方可以找到非常简单的解决方案和有关难题的书面建议。
通过阅读来学习也是一个好地方。不幸的是,我担心没有人会从你的问题或我的答案中学到任何东西,他们无法通过浏览网页甚至书本来学习。我希望您通过琐碎的问题理解我对SO污染的关注。