0
Я создаю сайт на основе Wordpress, и все мои скрипты используют jQuery 2.1.4.реализация jQuery - не все скрипты хорошо работают
Проблема в том, что когда я реализую jQuery в разделе <header>, тогда работает «прокрутка вверх», но навигация (Bootstrap navwalker) нет. Когда я реализую jQuery в functions.php, тогда навигация работает, но «прокрутка вверх» не работает!
Я попытался использовать другую версию jQuery для прокрутки вверх с помощью noConflict, но затем nav не работает.
Я попытался также переместить все мои скрипты сразу после <body> и <?php wp_head(); ?>, но он также не работает.
И когда я реализую jQuery как в секции <head>, так и в functions.php (только для теста), навигатор не работает.
Код (как этого СЧА работ и выделите верхний не работает):
<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
<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] (http://jsfiddle.net/)? – psycotik
functions.php автоматически включается в WordPress, мне не нужно его реализовывать в разделе '
'. Я думаю, было бы довольно сложно воспроизвести его в JsFiddle из-за этого functions.php и navwalker ... Я добавил навигационный код к вопросу – DandyПолучаете ли вы какие-либо ошибки в консоли в обоих случаях? – Arcanyx