Question

我已成功将一个引导菜单添加到Wordpress。我的导航栏与基本的bootstrap导航栏略有不同，因为我在导航链接上方有一个大图像，电话号码和facebook链接。

我正在使用navwalker插件，允许我使用普通的Wordpress菜单编辑器添加/编辑链接。

我需要将以下代码添加到navwalker系统，以便它显示在我的页面上。我不需要在编辑器中编辑此代码。

当前的NavBar：

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <img src="<?php bloginfo('template_directory'); ?>/images/logolarge.png" class="center-block img-responsive" alt="Cocke Chiropractic Clinic"/>                
        </div>
        <?php
            wp_nav_menu( array(
                'menu'              => 'primary',
                'theme_location'    => 'primary',
                'depth'             => 2,
                'container'         => 'div',
                'container_class'   => 'navbar-collapse collapse',
                'container_id'      => 'navigation',
                'menu_class'        => 'nav navbar-nav navLarge',
                'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                'walker'            => new wp_bootstrap_navwalker())
            );
        ?>      
    </div>
</div>

外面：

<div class="contact hidden-xs">
        <span>Call Now! <a href="tel:2058708787">(205) 870-8787</a></span>
        <br />
        <a href="#" target="_blank"><img src="<?php bloginfo('template_directory'); ?>/images/fbsmall.png" class="social img-responsive pull-right" /></a>
    </div>

下面的代码插入到上面的wp_nav_menu navwalker中。我还需要.contact div来显示在navwalker菜单中。我该怎么做？

<div class="navbar-collapse collapse">
    <div class="contact hidden-xs">
        <span>Call Now! <a href="tel:2058708787">(205) 870-8787</a></span>
        <br />
        <a href="#" target="_blank"><img src="<?php bloginfo('template_directory'); ?>/images/fbsmall.png" class="social img-responsive pull-right" /></a>
    </div>                
    <ul class="nav navbar-nav navLarge" id="navigation">
        <li><a href="">Home</a></li>
        <li class="divider-vertical-second-menu class=hidden-xs"></li>
        <li><a href="">About</a></li>
        <li class="divider-vertical-second-menu class=hidden-xs"></li>
        <li><a href="">Service/Treatments</a></li>
        <li class="divider-vertical-second-menu class=hidden-xs"></li>
        <li><a href="">FAQ</a></li>
        <li class="divider-vertical-second-menu class=hidden-xs"></li>
        <li><a href="">New Patient</a></li>
        <li class="divider-vertical-second-menu class=hidden-xs"></li>
        <li><a href="">Contact</a></li>
        <li class="hidden-sm hidden-md hidden-lg"><a href="#" target="_blank"><img src="<?php bloginfo('template_directory'); ?>/images/fbsmall.png" class="img-responsive" /></a></li>
    </ul>

我在寻找什么：

我现在有什么：

Answer 1

我能够解决这个问题，我移动我的代码Nav Walker调用：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>
        <label><input type="checkbox" /></label>
      </td>
    </tr>
  </tbody>
</table>

Answer 2

您可以编辑WP-Bootstrap-Navwalker.php

OR

这样使用

<ul class="navbar-nav nav-flex-icons">
  <li class="nav-item">
    <a class="nav-link p-1" href="tel:02332224491"><i class="fa fa-phone" aria-hidden="true"></i>Call me</a>
                </li></ul>

添加社交链接＆amp;致电NavWalker Wordpress菜单

2 个答案: