添加社交链接和电话到NavWalker Wordpress菜单

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:[phone]">[phone]</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:[phone]">[phone]</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调用：

            <div class="contact hidden-xs">
                <span>Call Now! <a href="tel:[phone]">[phone]</a></span>
                <br />
                <a href="https://www.facebook.com/Cocke-Chiropractic-Clinic-122171807867845/?fref=ts" target="_blank"><img src="<?php bloginfo('template_directory'); ?>/images/fbsmall.png" class="social img-responsive pull-right" /></a>
            </div>

Answer 2

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

要么

像这样用

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