我刚刚将我的第一个自定义主题上传到我的网站,一切都很顺利,直到我在手机上查看网站并意识到当我点击汉堡菜单时,什么也没发生。这是我的网站:
timothycdavis.co.uk
以下是我的style.css文件的链接,我的bootstrap文件。
以下是我的functions.php文件和header.php文件
的functions.php:
// Register Custom Navigation Walker
require_once('wp_bootstrap_navwalker.php');
// Theme Support
function wpb_theme_setup(){
// Nav Menu
register_nav_menus(array(
'primary' => __('Primary Menu ')
));
}
add_action('after_setup_theme', 'wpb_theme_setup');
add_action( 'wp_loaded', 'wpse248829_register_scripts' );
function wpse248829_register_scripts() {
wp_register_script( 'character-counter-script-js', get_template_directory_uri() . '/js/char-counter.min.js', array( 'jquery' ), false, true );
wp_register_script( 'tweet-counter', get_template_directory_uri() . '/js/tweet-counter.min.js', array( 'jquery' ), false, true );
wp_register_script( 'title-tag-counter-script', get_template_directory_uri() . '/char-counter/js/title-tag.min.js', array( 'jquery' ), false, true );
wp_register_script( 'description-counter-script', get_template_directory_uri() . '/js/description-tag.min.js', array( 'jquery' ), false, true );
}
//Enqueue scripts/styles.
add_action( 'wp_enqueue_scripts', 'wpse248829_enqueue_scripts' );
function wpse248829_enqueue_scripts() {
// Load everywhere.
wp_enqueue_style( 'style', get_stylesheet_uri() );
// Probably not needed, because it was already specified as a dependency.
// wp_enqueue_script( 'jquery' );
// Only enqueue scripts/styles on static front page.
if ( is_front_page() ) {
wp_enqueue_script( 'character-counter-script-js' );
}
if ( is_page_template( 'tweet-template.php' ) ) {
wp_enqueue_script( 'tweet-counter' );
}
if ( is_page_template( 'title-tag-template.php' ) ) {
wp_enqueue_script( 'title-tag-counter-script' );
}
if ( is_page_template( 'description-tag-template.php' ) ) {
wp_enqueue_script( 'description-counter-script' );
}
}
require get_template_directory() . '/inc/customizer.php';
的header.php
<!DOCTYPE html>
<html dir="ltr" lang="en-GB" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap Core CSS -->
<link href="<?php bloginfo('template_url') ?>/css/bootstrap.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="http://timothycdavis.co.uk/wp-content/themes/char-counter/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lato:400,700,900' rel='stylesheet' type='text/css'>
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<!-- Theme CSS -->
<link rel="shortcut icon" href="/img/favicon.ico">
<script src="//load.sumome.com/" data-sumo-site-id="63887403fa39b3ec361069237f61eca50baf36e10e2973ac54b998b5095b3bb2" async="async"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<title><?php wp_title(''); ?></title>
<?php wp_head(); ?>
</head>
<body itemscope itemtype="http://schema.org/WebPage">
<div id="wrapper" class="clearfix" itemprop="mainContentOfPage">
<nav id="mainNav" class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<?php if ( get_theme_mod( 'm1_logo' ) ) : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" id="site-logo" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<img src="<?php echo get_theme_mod( 'm1_logo' ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
</a>
<?php else : ?>
<hgroup>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<p class="site-description"><?php bloginfo( 'description' ); ?></p>
</hgroup>
<?php endif; ?>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<?php
wp_nav_menu( array(
'menu' => 'primary',
'theme_location' => 'primary',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
?>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
提前写好我编写糟糕的代码,并提前感谢。
答案 0 :(得分:0)
您在js控制台中收到以下错误:
TypeError:$不是函数
当我追踪它时,它就在这里:
var initTop = new Array();; $(&#34; textarea&#34;)。on(&#34; input&#34;,function ... etc
做两件事:
jQuery(document).ready(
调用内)$()
语法...您的其他调用似乎使用jQuery()
语法,这意味着您可能已启用no conflict mode。<强>更新强>
好的,现在您的JS错误已修复,您的导航正在加载。做得好。接下来,你有一个过分热心的导航实现。请注意,在HTML DOM中,每个id=""
都必须具有唯一值。
您会发现在您的实现中,ID bs-example-navbar-collapse-1
被使用了两次。如果你只使用一次,你的导航工作就可以了。现在发生的事情是你的JavaScript找到第一个(因为它只应该是一个),当它打开那个时,另一个被隐藏。
观看此视频:
http://screencast.com/t/GdGHeL2U0yF
我相信这会将以下代码转换为您想要的代码:
<!-- Collect the nav links, forms, and other content for toggling -->
<?php
/* <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> NO */
/* <ul class="nav navbar-nav navbar-right"> NO */
// now let the thing build itself and don't help
wp_nav_menu( array(
'menu' => 'primary',
'theme_location' => 'primary',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
/* </ul> NO */
/* </div> NO */
?>
<!-- /.navbar-collapse -->