如何使用wp_NAV_MENU用自定义类包装列表?

时间:2017-12-13 作者:Jai Shankar

我想显示4列页脚菜单。但当我添加新菜单时,wp\\u nav\\u菜单会创建一个<;li>并将每个菜单项添加到其中。

enter image description here

现在,如何用一个类的自定义div标记包装每个li元素?

我需要此输出:

enter image description here

在上图中,您可以看到每个菜单都包装在一个div中。

我试过使用wp\\u nav\\u menu()它没有帮助。由于我是WordPress主题开发的新手,我不知道还有什么选择。

有没有什么方法可以让WordPress在每个菜单项之前添加一个带有自定义类的div元素?

谢谢:)

2 个回复
SO网友:Elke

最好循环浏览所有菜单项,以便您可以单独获取它们,如下所示。这将使您可以向ul和li项目添加类。

    <?php $myMenu = get_nav_menu_locations();

// \'main-menu\' is the name of your menu, you can find this under \'menu\' in the Dashboard of your Wordpress site
$menuID = $myMenu[\'main-menu\'];

$mainNav = wp_get_nav_menu_items($menuID);

?>
<ul>
    <?php foreach ($mainNav as $navItem): ?>

        <li>
            <a href="<?php echo $navItem->url; ?>"
              title="<?php echo $navItem->title; ?>">
              <?php echo $navItem->title; ?>
          </a>
      </li>
  <?php endforeach; ?>
</ul>

SO网友:admcfajn

可能使用nav_walker 或打开过滤器wp_nav_menu_objects

这是一个简单的nav\\U walker,当在wp\\U nav\\U菜单上输出时,它会将菜单中每个链接的内容包装成一个范围

<?php
/**
 * Add_Span_Nav_Walker
 * wp_nav_menu walker-class to wrap contents of each menu-item link in span element
 */

class Add_Span_Nav_Walker extends Walker_Nav_Menu {

    function start_lvl( &$output, $depth = 0, $args = [] ) {
        $indent = str_repeat( "\\t", $depth );
        $output .= "\\n$indent\\n";
    }

    function end_lvl( &$output, $depth = 0, $args = [] ) {
        $indent = str_repeat( "\\t", $depth );
        $output .= "$indent\\n";
    }

    function start_el( &$output, $item, $depth = 0, $args = [], $id = 0 ) {
        $indent = ( $depth ) ? str_repeat( "\\t", $depth ) : \'\';

        $class_names = $value = \'\';

        $classes   = empty( $item->classes ) ? [] : (array) $item->classes;
        $classes[] = \'menu-item-\' . $item->ID;

        $class_names = join( \' \', apply_filters( \'nav_menu_css_class\', array_filter( $classes ), $item, $args ) );

        $class_names = $class_names ? \' class="\' . esc_attr( $class_names ) . \'"\' : \'\';

        $id = apply_filters( \'nav_menu_item_id\', \'menu-item-\' . $item->ID, $item, $args );
        $id = $id ? \' id="\' . esc_attr( $id ) . \'"\' : \'\';

        $output .= $indent . \'\';

        $attributes = ! empty( $item->attr_title ) ? \' title="\' . esc_attr( $item->attr_title ) . \'"\' : \'\';
        $attributes .= ! empty( $item->target ) ? \' target="\' . esc_attr( $item->target ) . \'"\' : \'\';
        $attributes .= ! empty( $item->xfn ) ? \' rel="\' . esc_attr( $item->xfn ) . \'"\' : \'\';
        $attributes .= ! empty( $item->url ) ? \' href="\' . esc_attr( $item->url ) . \'"\' : \'\';

        $item_output = $args->before;
        $item_output .= \'<li\' . $class_names . \'><a\' . $attributes . \'><span>\';
        $item_output .= $args->link_before . apply_filters( \'the_title\', $item->title, $item->ID ) . $args->link_after;
        $item_output .= \'</span></a>\';
        $item_output .= $args->after;

        $output .= apply_filters( \'walker_nav_menu_start_el\', $item_output, $item, $depth, $args );
    }


    function end_el( &$output, $item, $depth = 0, $args = [] ) {
        $output .= "\\n";
    }
}

当我们在菜单中输出nav\\U菜单时,我们可以使用Add_Span_Nav_Walker 作为walker类:

<?php
if ( has_nav_menu( \'wpse288486_nav\' ) ) :
    wp_nav_menu( [
        \'theme_location\' => \'wpse288486_nav\',
        \'walker\'         => new Add_Span_Nav_Walker(),
    ] );
endif;

结束

相关推荐

返回Get_Header和Get_Footer字符串,而不是回显它

我试图在wordpress应用程序中使用mustache并将其模块化。我想使用mustache partials将页眉和页脚字符串注入到各个模板文件中。然而,只要我在控制器层上调用get\\u header/get\\u footer,页眉和页脚就会立即显示出来。我试图做的是从页眉和页脚中检索标记并将其存储到变量中,以便“稍后”注入模板中,这是可能的吗?提前感谢!