Wordpress标题菜单定制

我已经安装了主题，我希望自定义标题菜单。 新标题菜单的结构应为：

<div class="navbar-header">
    <a class="navbar-brand" href="#">
        <img src="img/logo.png">
    </a>
</div>
<nav class="collapse navbar-collapse">
    <ul class="nav navbar-nav navbar-right">
        <li class="">
            <a href="#">
                <i class="fa fa-exclamation"></i>
                         Page1                         
            </a>
        </li>
        <li class="">
            <a href="#">
                <i class="fa fa-exclamation"></i>
                         Page2                         
            </a>
        </li>
                ...

        <!-- Navbar Search -->
        <li class="hidden-xs hidden-sm" id="navbar-search">
            <a href="#">
                <i class="fa fa-search"></i>
            </a>
        </li>
    </ul>
</nav>
<!--/.nav-collapse -->

...

我试图通过使用WP函数来解决这个问题：

<nav class="collapse navbar-collapse">
    <?php if ( has_nav_menu( 'primary-menu' ) ) { ?>
    <?php wp_nav_menu( array( 'theme_location' => 'primary-menu', 'menu_class' => 'menu clearfix', 'container' => '', 'walker' => new mts_menu_walker ) ); ?>
    <?php } else { ?>
        <ul class="menu clearfix">
        <?php wp_list_categories('title_li='); ?>
        </ul>
        <?php } ?>
</nav>

无论如何，结果很差，因为WP产生了标题菜单的新结构，并且不再应用样式

因此，我有几个问题：

如何使用

标记填充标题菜单元素

如何使用WP功能包含徽标的源代码

如何在li标签中也包含作为标题的manu元素

或者（代替1-3个问题）如何在WordPressHTML上“翻译”上面的常规html

如何使用

标记填充标题菜单元素

您可以使用的

link\u before

参数在文本链接之前显示内容。因此，您的

wp\u nav\u菜单

代码如下所示：

<nav role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement" class="collapse navbar-collapse">
    <?php wp_nav_menu(array(
        'container' => '',
        'menu' => __( 'Menu mobile', 'cicr' ),
        'menu_class' => 'menu clearfix',
        'theme_location' => 'primary-menu',
        'before' => '',
        'after' => '',
        'link_before' => '<i class="fa fa-exclamation"></i>',
        'link_after' => '',
        'walker' => new mts_menu_walker
    )); ?>
</nav>

a.exclamation {
  position: relative;
  display: inline-block;
  padding-left: 15px;
}
a.exclamation:before {
  content: "";
  height: 10px;
  width: 10px;
  top: 0;
  left: 0;
  background: url("images/exclamation.png") left top no-repeat;
  position: absolute;
  left: 0;
  top: 0;
}

如何使用WP功能包含徽标的源代码

将徽标放在主题文件夹的图像文件夹中，然后使用函数获取主题文件夹的URI

<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/logo.png" />

---

查看功能代码参考：

您可以使用

before

和

after

参数在链接文本之前应用

。您还可以使用

link\u before

和

link\u after

参数将文本放置在链接之前。如果需要包装一些代码，可以使用

items\u wrap

参数将包装传递给div菜单本身

要带上您上传的WordPress徽标（自定义页面的标题），您应该尝试：

<img src="<?php echo( get_header_image() ); ?>" alt="<?php echo( get_bloginfo( 'title' ) ); ?>" />

“alt=”“/>

您可以使用

container\u class

和

menu class

自定义类并将样式应用于

ul

和

li

。默认情况下，WordPress返回具有类似层次结构的标记代码：

div>ul>li>a

---

希望有帮助。我提供的链接有使用该函数的完整说明。

非常感谢您的帮助。这行代码也非常有用-menu_class'=>“menu clearfix”，我添加了必需的类（不是重写css）对于图标，我刚刚决定安装fon awesome插件并手动放置图标。感谢您的帮助，现在我更好地了解了如何为所需的标记添加类

<img src="<?php echo( get_header_image() ); ?>" alt="<?php echo( get_bloginfo( 'title' ) ); ?>" />