Question

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

<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功能包含徽标<img src="img/logo.png">的来源？
如何在li标签中包含标题manu元素？
或者（而不是1-3个问题）如何＆＃34;翻译＆＃34; wordpress html上面的常规html？

Answer 1

如何使用代码填充标题菜单元素？

您可以使用wp_nav_menu的link_before参数在文本链接之前显示内容。因此，您的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>

如果您只需要在某些链接上添加此图标，我建议在此链接上添加一个类（在管理中，单击右上角的“屏幕选项”，然后选中“CSS类”以显示类输入），然后在CSS中添加这些链接上的伪元素以显示图标。它看起来像这样：

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功能包含徽标<img src="img/logo.png">的来源？

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

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

如何在li标签中包含标题manu元素？

考虑到您在谈论搜索导航栏（不确定您的意思），您可以使用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

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

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

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

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

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

希望它有所帮助。我提供的链接提供了使用该功能的完整说明。

Wordpress标题菜单自定义

2 个答案: