仅使用div和a的自定义格式导航菜单

时间：2018-06-28 作者：Batuhan ALPEREN

我只想使用添加菜单<div> 和<a> 我的Wordpress主题，但我不知道怎么做。

当我将此代码放入head\\uu menu类时，它会生成不同的菜单<ul> 和<li>.

<?php wp_nav_menu(array(\'theme_location\' => \'menu\')); ?>
有人能帮我吗？我的导航条形码在下面

<div class="container-fluid header">
<div class="row">
    <div class="col-12">
        <div class="navbar">
            <a href="<?php bloginfo(\'url\'); ?>">
                <img src="<?php bloginfo(\'template_url\'); ?>/img/logo.png" class="logo">
            </a>
            <label for="toggle">
                <i class="fas fa-bars"></i>
            </label>
            <input type="checkbox" id="toggle">
            <div class="head__menu">
                <a href="#">Home</a>
                <a href="#">Tech</a>
                <a href="#">Game</a>
            </div>
        </div>
    </div>
    <div class="cool-line"></div>
</div>

1 个回复
SO网友:Dharmishtha Patel

下面是一个学步的课程，可以做到这一点。将此添加到您的函数中。php文件；

class Description_Walker extends Walker_Nav_Menu
{
    function start_el(&$output, $item, $depth, $args)
    {
        $classes = empty($item->classes) ? array () : (array) $item->classes;
        $class_names = join(\' \', apply_filters( \'nav_menu_css_class\', array_filter( $classes ), $item ) );
        !empty ( $class_names ) and $class_names = \' class="\'. esc_attr( $class_names ) . \'"\';
        $output .= "";
        $attributes  = \'\';
        !empty( $item->attr_title ) and $attributes .= \' title="\'  . esc_attr( $item->attr_title ) .\'"\';
        !empty( $item->target ) and $attributes .= \' target="\' . esc_attr( $item->target     ) .\'"\';
        !empty( $item->xfn ) and $attributes .= \' rel="\'    . esc_attr( $item->xfn        ) .\'"\';
        !empty( $item->url ) and $attributes .= \' href="\'   . esc_attr( $item->url        ) .\'"\';
        $title = apply_filters( \'the_title\', $item->title, $item->ID );
        $item_output = $args->before
        . "<a $attributes $class_names>"
        . $args->link_before
        . $title
        . \'</a>\'
        . $args->link_after
        . $args->after;
        $output .= apply_filters( \'walker_nav_menu_start_el\', $item_output, $item, $depth, $args );
    }
}



function header_nav()
{
    wp_nav_menu(
    array(
        \'theme_location\'  => \'header-menu\',
        \'menu\'            => \'\',
        \'container\'       => \'\',
        \'container_class\' => \'\',
        \'container_id\'    => \'\',
        \'menu_class\'      => \'\',
        \'menu_id\'         => \'\',
        \'echo\'            => true,
        \'fallback_cb\'     => \'wp_page_menu\',
        \'before\'          => \'\',
        \'after\'           => \'\',
        \'link_before\'     => \'\',
        \'link_after\'      => \'\',
                \'items_wrap\'      => \'%3$s\',        
                \'depth\'           => 0,
        \'walker\'          => new Description_Walker
        )
    );
}
最后，在您的主题标题中添加对nav header\\u nav（）的调用，无论您想在哪里显示菜单。在这里，我用NAV元素对其进行了包装；

  <nav class="" id="" role="navigation">
      <?php header_nav(); ?>
  </nav>
这应该输出这个；

  <nav role="navigation" id="">
     <a class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item" href="#">Link 1</a>
     <a class="menu-item menu-item-type-taxonomy menu-item-object-category" href="#">link 2</a>
     <a class="menu-item menu-item-type-taxonomy menu-item-object-category" href="#">link 3</a>
  </nav>
资料来源：https://stackoverflow.com/questions/12159486/wordpress-change-header-navigation-list-items-to-div/12161295#12161295

结束
标签： menus   小码农  

相关推荐

Custom Menus and taxonomies

好的，我刚开始使用WordPress，不是很好，我有一个菜单问题，我真的需要一些帮助。我在一个网站上工作，它有多个地点，并非所有地点都销售相同的产品。所有位置都是具有父结构的页面。俄亥俄州-联系我们-关于我们-产品等。。。西弗吉尼亚州-联系我们-关于我们-产品等。。。宾夕法尼亚州-联系我们-关于我们-产品等我掌握了自定义页面模板的窍门，并为其添加了自定义菜单（因此，我所有的Ohio页面都使用了我制作的自定义Ohio模板，并包含了自定义Ohio菜单）。我正在使用帖子创建产品信息页面，并使用以下方式显示它们：