Wordpress 菜单在移动设备上不起作用答案

【问题标题】：Wordpress Menu not working on mobileWordpress 菜单在移动设备上不起作用
【发布时间】：2016-12-12 16:36:24
【问题描述】：

我刚刚将我的第一个自定义主题上传到我的网站，一切都很顺利，直到我在手机上查看了该网站并意识到当我点击汉堡菜单时，什么都没有发生。这是我的网站：

timothycdavis.co.uk

这里是我的style.css 文件的链接，我的bootstrap 文件。

下面是我的functions.php文件和header.php文件

函数.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>

提前为我写得不好的代码道歉，并提前感谢。

【问题讨论】：

你的 Bootstrap 的 JS 文件在 HTML 输出中被注释掉了。
@makshh 我已经解决了这个问题，但菜单仍然无法正常工作

标签： php wordpress twitter-bootstrap wordpress-theming

【解决方案1】：

您的 js 控制台中出现以下错误：

TypeError: $ 不是函数

当我找到它时，它就在这里：

var initTop=new Array();;$("textarea").on("input",function ...等

做两件事：

确保您使用 jQuery 语法的调用仅在 jQuery 可用后调用（例如在同一个 js 文件中现有的 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 -->

【讨论】：

感谢您的回复，我对 jquery 还很陌生，所以您能向我解释一下要解决这个问题该怎么做吗
合格的问题，在这里，但是你是从$("textarea").on("input",function开始写这段javascript的吗？如果没有，它被不正确地包含或您的 jQuery 设置为 no conflict mode
嗯，我不确定如何比我在解决方案中更清楚。由于$ 不是运行时的对象，因此不能使用它。您需要确保 $ 是您编写的 js 运行时的对象。使用上面的 1. 和 2. 做到这一点。
注意，这可能就像使用jQuery 一样简单，你有$。
错误不再发生，但菜单仍然不起作用