Wordpress header 菜单自定义

Question

我已经安装了主题，我想自定义header菜单。新 header 菜单的结构应该是：

<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 生成了新的 header 菜单结构并且不再应用样式。

因此我有几个问题：

如何使用  标签填充 header 菜单元素？
如何使用 WP 功能包含徽标 <img src="img/logo.png"> 的来源？
如何将 header manu 元素也包含在 li 标签中？
或者（而不是 1-3 个问题）how to "translate" regular html above on wordpress html?

Answer 1

How to populate header menu elements with  tag?

您可以使用 wp_nav_menu 的 link_before 参数在文本 link 之前显示一些内容。所以您的 wp_nav_menu 代码将如下所示：

<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>

如果你只需要在某些link上添加这个图标，我建议在这个link上添加一个class（在管理中，点击"Screen options"在右上角然后选中 "CSS classes" 以显示 class 输入），然后在 CSS 中添加一个伪元素 link 以显示图标。它看起来像这样：

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;
}

How to include source for logo <img src="img/logo.png"> with WP function?

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

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

How to include also as header manu element include in li tag?

考虑到您在谈论搜索导航栏（不确定您的意思），您可以使用 items_wrap wp_nav_menu 参数：

'items_wrap' => '<ul id="%1$s" class="%2$s">'.
                  '%3$s'.
                  '<li class="hidden-xs hidden-sm" id="navbar-search">'.
                     '<a href="#">'.
                       '<i class="fa fa-search"></i>'.
                     '</a>'.
                  '</li>'.
                '</ul>',

Answer 2

看看函数法典参考： https://developer.wordpress.org/reference/functions/wp_nav_menu/

您可以使用 before 和 after 参数在 link 文本之前应用 。您还可以使用 link_before 和 link_after 参数在 link 之前放置文本。如果您需要包装一些代码，您可以使用 items_wrap 参数将包装器传递给 div 菜单本身。

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

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

您可以使用 container_class 和 menu_class 自定义类并将样式应用于 ul 和 li。默认情况下，WordPress returns 具有类似层次结构的标记代码：div>ul>li>a.

希望对您有所帮助。我提供的 link 包含使用该功能的完整说明。

Wordpress header 菜单自定义

Wordpress header menu customisation

wordpress

nav