使菜单引导兼容

时间:2018-09-11 作者:Jenova1628

我的WordPress导航菜单有问题。目前的情况如下:Wordpress Problem

我试图让我的bootstrap 3.3.7(认为这是正确的版本)菜单工作,这就是错误所在。我使用的代码行是:

<?php wp_nav_menu(array( \'theme-location\' => \'main_menu\' ) ); ?>
还有我的functions.php 具有以下代码:

function register_my_menus() {
  register_nav_menus(
    array(
      \'main_menu\'   => __( \'Primary Menu\' ),
      \'footer_menu\' => __(\'Footer Menu\')
    );
  )
}
add_action( \'init\', \'register_my_menus\' );
我读到walkernav可以解决这个问题,但当尝试使用它时,它没有任何帮助?

编辑:我的标题。php

<nav class="navbar navbar-default" role="navigation">
  <div class="container">
    <div class="navbar-header">

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar top-bar"></span>
        <span class="icon-bar middle-bar"></span>
        <span class="icon-bar bottom-bar"></span>
      </button>

      <a class="navbar-brand" href="<?php  coldstar_the_page_link( \'front-page.php\' );  ?>">
        <img src="<?php bloginfo(\'template_url\'); ?>/images/companylogo.png" class="img-responsive hidden-md" alt="Bed Centre Grimsby Logo">
        <img src="<?php bloginfo(\'template_url\'); ?>/images/logo.png" class="img-responsive hidden-lg hidden-sm hidden-xs" alt="">
      </a>
    </div>

    <div id="navbar" class="navbar-collapse collapse">
      <ul class="top-contact hidden-xs hidden-sm">
        <li class="phone">
          <span class="icon"></span>
          01472 267660
        </li>
        <li class="email">
          <span class="icon"></span> <a href="mailto:[email protected]">[email protected]</a>
        </li>
        <li class="facebook">
          <a href="https://www.facebook.com/Bedcentregrimsby/" target="_blank"><img src="http://beta.bedcentregrimsby.co.uk/wp-content/themes/bedcentregrimsby/assets/images/facebook-logo.png"></a>
        </li>
      </ul>

      <div class="nav navbar-nav navbar-right">
        <?php
          wp_nav_menu( array(
            \'theme_location\'  => \'primary\',
            \'depth\'           => 1,   // 1 = with dropdowns, 0 = no dropdowns.
            \'container\'       => \'div\',
            \'container_class\' => \'collapse navbar-collapse\',
            \'container_id\'    => \'bs-example-navbar-collapse-1\',
            \'menu_class\'      => \'navbar-nav mr-auto\',
            \'fallback_cb\'     => \'WP_Bootstrap_Navwalker::fallback\',
            \'walker\'          => new WP_Bootstrap_Navwalker()
          ) );
        ?>
      </div>
    </div>
  </div>   <!-- END container -->
</nav>
<div class="feature-nav">
  <div class="container">
    <div class="col-xs-12 col-sm-4 col-md-4 delivery">
      <div class="icon"></div>
      <div class="text">
        <p>FREE Local Delivery<span>We deliver for FREE within a distance of 8 miles.</span></p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-4 parking">
      <div class="icon"></div>
      <div class="text">
      <p>FREE Parking<span>Our carpark is free for our customers.</span></p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-4 disability">
      <div class="icon"></div>
      <div class="text">
      <p>Wheelchair Friendly<span>Our store is accessible for wheelchairs. </span></p>
      </div>
    </div>
  </div>
</div>
EDIT2:这就是它在html中的表现

<nav class="navbar navbar-default" role="navigation">
    <div class="container">
        <div class="navbar-header">

            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar top-bar"></span>
                <span class="icon-bar middle-bar"></span>
                <span class="icon-bar bottom-bar"></span>
            </button>


            <a class="navbar-brand" href="<?php  coldstar_the_page_link( \'front-page.php\' );  ?>">
                <img src="<?php bloginfo(\'template_url\'); ?>/images/companylogo.png" class="img-responsive hidden-md" alt="Bed Centre Grimsby Logo">
                <img src="<?php bloginfo(\'template_url\'); ?>/images/logo.png" class="img-responsive hidden-lg hidden-sm hidden-xs" alt="">
            </a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="top-contact hidden-xs hidden-sm">
                <li class="phone">
                    <span class="icon"></span>
                    01472 267660
                </li>
                <li class="email">
                    <span class="icon"></span> <a href="mailto:[email protected]">[email protected]</a>
                </li>
                <li class="facebook">
                    <a href="https://www.facebook.com/Bedcentregrimsby/" target="_blank"><img src="http://beta.bedcentregrimsby.co.uk/wp-content/themes/bedcentregrimsby/assets/images/facebook-logo.png"></a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li class="current"><a href="localhost:81">Home</a></li>
                <li><a href="/about-us">About Us</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Our Products</a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Bedsteads</a></li>
                        <li><a href="#">Bedsteads</a></li>
                        <li><a href="#">Bedsteads</a></li>
                        <li><a href="#">Bedsteads</a></li>
                        <li><a href="#">Bedsteads</a></li>
                        <li><a href="#">Bedsteads</a></li>
                    </ul>
                </li>
                <li><a href="/bed-guide">Bed Guide</a></li>
                <li><a href="/reviews">Reviews</a></li>
                <li><a href="/news">News</a></li>
                <li><a href="/contact-us">Contact Us</a></li>
            </ul>



    </div>
</nav>

2 个回复
SO网友:benny-ben

您可以这样尝试:

<nav class="navbar navbar-default" role="navigation">
  <div class="container">
    <div class="navbar-header">

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar top-bar"></span>
        <span class="icon-bar middle-bar"></span>
        <span class="icon-bar bottom-bar"></span>
      </button>

      <a class="navbar-brand" href="<?php coldstar_the_page_link( \'front-page.php\' ); ?>">
        <img src="<?php bloginfo(\'template_url\'); ?>/images/companylogo.png" class="img-responsive hidden-md" alt="Bed Centre Grimsby Logo">
        <img src="<?php bloginfo(\'template_url\'); ?>/images/logo.png" class="img-responsive hidden-lg hidden-sm hidden-xs" alt="">
      </a>
    </div>

    <div id="navbar" class="navbar-collapse collapse">
      <ul class="top-contact hidden-xs hidden-sm">
        <li class="phone">
          <span class="icon"></span>
          01472 267660
        </li>
        <li class="email">
          <span class="icon"></span> <a href="mailto:[email protected]">[email protected]</a>
        </li>
        <li class="facebook">
          <a href="https://www.facebook.com/Bedcentregrimsby/" target="_blank"><img src="http://beta.bedcentregrimsby.co.uk/wp-content/themes/bedcentregrimsby/assets/images/facebook-logo.png"></a>
        </li>
      </ul>

    <?php
          wp_nav_menu( array(
              \'container\'      => false,
              \'menu_id\'        => \'joey-ireland\',
              \'menu_class\'     => \'nav navbar-nav navbar-right\',
              \'items_wrap\'     => \'<ul id="%1$s" class="%2$s">%3$s</ul>\',
              \'theme_location\' => \'primary\',  // must match in register_nav_menus
              \'depth\'          => 5,
              \'fallback_cb\'    => false,
              \'walker\'         => new Joey_Bootstrap_Walker(),
          ));

class Joey_Bootstrap_Walker extends Walker_Nav_Menu {

    function start_lvl(&$output, $depth = 0, $args = Array() ) {
        $indent = str_repeat("\\t", $depth);
        $output .= "\\n$indent<ul class=\\"dropdown-menu\\">\\n";
    }

    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        if ( isset( $args->item_spacing ) && \'discard\' === $args->item_spacing ) {
            $t = \'\';
            $n = \'\';
        } else {
            $t = "\\t";
            $n = "\\n";
        }
        $indent = ( $depth ) ? str_repeat( $t, $depth ) : \'\';

        $has_child = false;
        if ( $args->walker->has_children !== false ) {
            $has_child = true;
        }

        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $classes[] = \'menu-item-\' . $item->ID;

        $args = apply_filters( \'nav_menu_item_args\', $args, $item, $depth );

        $class_names = join( \' \', apply_filters( \'nav_menu_css_class\', array_filter( $classes ), $item, $args, $depth ) );

        // Check our custom has_children property.
        $class_drop = \'\';
        if ( $has_child ) {
            $class_drop = $class_names !== \'\' ? \' dropdown\' : \'dropdown\';
        }

        if ( $class_names ) {
          $class_names = \' class="\' . esc_attr( $class_names ) . $class_drop . \'"\';
        } else {
          $class_names = $class_drop !== \'\' ? \' class="\' . $class_drop . \'"\' : \'\';
        }

        $id = apply_filters( \'nav_menu_item_id\', \'menu-item-\'. $item->ID, $item, $args, $depth );
        $id = $id ? \' id="\' . esc_attr( $id ) . \'"\' : \'\';

        $output .= $indent . \'<li\' . $id . $class_names .\'>\';

        $atts = array();
        $atts[\'title\']  = ! empty( $item->attr_title ) ? $item->attr_title : \'\';
        $atts[\'target\'] = ! empty( $item->target )     ? $item->target     : \'\';
        $atts[\'rel\']    = ! empty( $item->xfn )        ? $item->xfn        : \'\';
        $atts[\'href\']   = ! empty( $item->url )        ? $item->url        : \'\';

        $atts = apply_filters( \'nav_menu_link_attributes\', $atts, $item, $args, $depth );

        $attributes = \'\';
        foreach ( $atts as $attr => $value ) {
            if ( ! empty( $value ) ) {
                $value = ( \'href\' === $attr ) ? esc_url( $value ) : esc_attr( $value );
                $attributes .= \' \' . $attr . \'="\' . $value . \'"\';
            }
        }

        if ( $has_child === true ) {
            $attributes .= \' class="dropdown-toggle" data-toggle="dropdown"\';
        }

        $title = apply_filters( \'the_title\', $item->title, $item->ID );

        $title = apply_filters( \'nav_menu_item_title\', $title, $item, $args, $depth );

        $item_output = $args->before;
        $item_output .= \'<a\'. $attributes .\'>\';
        $item_output .= $args->link_before . $title . $args->link_after;
        $item_output .= \'</a>\';
        $item_output .= $args->after;

        $output .= apply_filters( \'walker_nav_menu_start_el\', $item_output, $item, $depth, $args );
    }
}
  ?>

    </div>
  </div>
</nav>
<div class="feature-nav">
  <div class="container">
    <div class="col-xs-12 col-sm-4 col-md-4 delivery">
      <div class="icon"></div>
      <div class="text">
        <p>FREE Local Delivery<span>We deliver for FREE within a distance of 8 miles.</span></p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-4 parking">
      <div class="icon"></div>
      <div class="text">
      <p>FREE Parking<span>Our carpark is free for our customers.</span></p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-4 disability">
      <div class="icon"></div>
      <div class="text">
      <p>Wheelchair Friendly<span>Our store is accessible for wheelchairs. </span></p>
      </div>
    </div>
  </div>
</div>


有关文档,请参阅此处:

SO网友:Alt C

您以错误的方式实现了菜单,这就是它不起作用的原因。

WordPress提供了关于创建菜单的详细文档。你必须先经历一下。https://developer.wordpress.org/themes/functionality/navigation-menus/

在正确地实现了这一点之后,再学习walker类。我还没有使用bootstrap 3.3.7,但让您知道bootstap 4x工作正常,似乎您有3x版的walker类。。你可以用这个。

使用以下链接启动4x:https://github.com/wp-bootstrap/wp-bootstrap-navwalker

以下是教程:https://code.tutsplus.com/tutorials/how-to-integrate-a-bootstrap-navbar-into-a-wordpress-theme--wp-33410

<?php wp_nav_menu( array( \'theme_location\' => \'primary\', 
            \'depth\' => 1, 
            \'container\' => \'div\', 
            \'container_class\' => \'collapse navbar-collapse\', 
            \'container_id\' => \'bs-example-navbar-collapse-1\', 
            \'menu_class\' => \'navbar-nav mr-auto\', 
            \'fallback_cb\' => \'WP_Bootstrap_Navwalker::fallback\', 
            \'walker\' => new WP_Bootstrap_Navwalker() ) ); ?>

结束