【发布时间】：2015-06-12 08:35:16
【问题描述】：
我基于 Wordpress 创建了一个网站，我的所有脚本都使用 jQuery 2.1.4。
问题是，当我在<header> 部分中实现 jQuery 时，“滚动到顶部”可以工作，但导航 (Bootstrap navwalker) 不能。当我在functions.php 中实现 jQuery 时，导航可以正常工作，但“滚动到顶部”却不行！
我尝试使用另一个 jQuery 版本滚动到顶部 noConflict，但导航不起作用。
我也尝试在 <body> 和 <?php wp_head(); ?> 之后移动我的所有脚本，但它也不起作用。
当我在<head> 部分和functions.php（仅用于测试）中实现 jQuery 时，导航不起作用。
代码（像这样导航有效，滚动到顶部无效）：
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>
<!-- scroll to top-->
<script>
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollToTop').fadeIn();
} else {
$('.scrollToTop').fadeOut();
}
});
$('.scrollToTop').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
});
</script>
<?php wp_head(); ?>
functions.php
<?php
/* Theme setup */
add_action( 'after_setup_theme', 'wpt_setup' );
if ( ! function_exists( 'wpt_setup' ) ):
function wpt_setup() {
register_nav_menu( 'primary', __( 'Primary navigation', 'wptuts' ) );
} endif;
add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
wp_enqueue_script( 'jquery-2.1.4.min.js', get_template_directory_uri() . '/js/jquery-2.1.4.min.js');
}
add_action( 'wp_enqueue_scripts', 'add_my_script' );
function wpt_register_js() {
wp_register_script('jquery.bootstrap.min', get_template_directory_uri() . '/js/bootstrap.min.js', 'jquery-2.1.4.min.js');
wp_enqueue_script('jquery.bootstrap.min');
}
add_action( 'init', 'wpt_register_js' );
function wpt_register_css() {
wp_register_style( 'bootstrap.min', get_template_directory_uri() . '/css/bootstrap.min.css' );
wp_enqueue_style( 'bootstrap.min' );
wp_enqueue_style( 'my_template', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'wpt_register_css' );
// Register custom navigation walker
require_once('wp_bootstrap_navwalker.php');
?>
导航代码
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<?php /* Primary navigation */
wp_nav_menu( array(
'menu' => 'Menu 1',
'depth' => 2,
'container' => false,
'menu_class' => 'nav navbar-nav',
//Process nav menu using our custom nav walker
'walker' => new wp_bootstrap_navwalker())
);
?>
</div>
</nav>
<script>标签的输出顺序：
<script type='text/javascript' src='.../wp-content/themes/tyszka/js/bootstrap.min.js?ver=4.2.2'></script>
<script type='text/javascript' src='.../wp-includes/js/jquery/jquery.js?ver=1.11.2'></script>
<script type='text/javascript' src='.../wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<!-- some plugin stuff here-->
<link rel="EditURI" type="application/rsd+xml" title="RSD" href=".../xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href=".../wp-includes/wlwmanifest.xml" />
<meta name="generator" content="WordPress 4.2.2" />
<!-- scroll to top-->
<script>
$(document).ready(function(){
//Check to see if the window is top if not then display button
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollToTop').fadeIn();
} else {
$('.scrollToTop').fadeOut();
}
});
//Click event to scroll to top
$('.scrollToTop').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
});
</script>
</head>
【问题讨论】：
-
functions.php包含在哪里？导航代码是什么样的？是否可以在JsFiddle 中复制问题？ -
functions.php 自动包含在 WordPress 中，我不必在
<head>部分实现它。我认为由于这个functions.php和navwalker，在JsFiddle中复制它会相当困难......我已经将导航代码添加到问题中 -
在这两种情况下，您是否在控制台中遇到任何错误？
-
严格来说 PHP 处理 HTML/CSS/Javascript。当你加载页面时，你会得到输出，你可以用它来创建一个 JsFiddle。无论如何，我认为我们需要查看
<script>标签的输出顺序... -
我已经添加了输出
标签： php jquery wordpress twitter-bootstrap-3 wordpress-theming