如何定制导航菜单?

时间:2013-09-21 作者:orustammanapov

我是Wordpress的新手,我试过wp_nav_menu 作用如果我做对了,这是一种标准的方式,可以显示在菜单管理器帮助下创建的导航菜单。

困扰我的是,它在内部创建了一堆我可能不需要的CSS类。我可以控制集装箱div(删除它、更改它的类等)和ul 元素本身,也可以在锚元素之前和之后添加额外的元素。我找不到的是如何删除那些附加到列表元素的bizillion类(li).

有没有办法做到这一点?另一个问题是:它会带来伤害吗?我注意到有些类可以被另一个内置Wordpress函数使用。如果有办法去除这些,哪种方法肯定会保留下来?

3 个回复
最合适的回答,由SO网友:Sven 整理而成

使用wp_nav_menu() 步行者是一件很好的事情,我真的很感激这个解决方案的其他答案,但我认为要获得一份简单的菜单真的很难。所以我发现自己经常通过wp_get_nav_menu_items()

因此,让我们关注一下这个想法:我只是从WordPress导航菜单中获取所有菜单项,以完全自己重新构建菜单。

我得到的是一个裸体菜单,就像我们在学习HTML时看到的那样。输出如下所示:

<ul>
    <li></li>
    <li></li>
    <li></li>
    (...)
</ul>
首先也是最后一点,我们需要在菜单管理器中注册菜单的名称。您可能会在functions.php. 例如,这就是《十三三》主题中的内容:

register_nav_menu( \'primary\', __( \'Navigation Menu\', \'twentythirteen\' ) );
除此之外,我们不需要手动插入更多信息,因为我们可以获得详细信息(例如位置、id等)注册菜单的:

<?php
    $menu_name = \'primary\'; // this is the registered menu name

    if ( ( $locations = get_nav_menu_locations() ) && isset( $locations[ $menu_name ] ) ) :
        $menu = wp_get_nav_menu_object( $locations[ $menu_name ] );
        $menu_items = wp_get_nav_menu_items($menu->term_id);
        echo \'<ul>\';
            foreach ( (array) $menu_items as $key => $menu_item ) :
                $title = $menu_item->title;
                    echo \'<li>\' . $title . \'</li>\';
            endforeach;
        echo \'</ul>\';
    else :  
        echo \'<p>Menu "\' . $menu_name . \'" not defined.</p>\';
    endif;
?>
因此,这将呼应一个简单的菜单结构,完全没有类,菜单项构成您的导航菜单管理器;或者,如果菜单名称或位置没有(尚未)定义,它将顺利失败。

考虑到所有这些,您应该可以轻松添加自己的排序或其他内容。。。看看wp_get_nav_menu_items() 默认参数(如Codex中提供):

<?php 
    $args = array(
        \'order\'                  => \'ASC\',
        \'orderby\'                => \'menu_order\',
        \'post_type\'              => \'nav_menu_item\',
        \'post_status\'            => \'publish\',
        \'output\'                 => ARRAY_A,
        \'output_key\'             => \'menu_order\',
        \'nopaging\'               => true,
        \'update_post_term_cache\' => false 
    ); 
?>
更新:总结一下我的答案,并将重点放在问题的最后一部分:这不会伤害你(只是关于样式),但它也不会提供任何额外的功能(比如当前页面的额外类或类似的东西)。您必须自己构建所有额外的函数。

所以你可以好好利用wp_nav_menu(); 如果您不需要这些id和类名,只需忽略页面源代码中的所有这些id和类名,但如果您将来需要它们,它们就会存在:)

SO网友:cybmeta

Wordpress中有多种自定义导航菜单的方法,甚至可以完全覆盖输出。

首先wp_nav_menu() 接受一些参数,以便在菜单的每个元素附近进行自定义。有更多参数,但需要自定义输出的参数是(请转到wp_nav_menu() docu 对于每一项的描述):

 wp_nav_menu(array(
     \'container\'       => \'div\',
     \'container_class\' => \'\',
     \'container_id\'    => \'\',
     \'menu_class\'      => \'menu\',
     \'menu_id\'         => \'\',
 \'before\'          => \'\',
 \'after\'           => \'\',
 \'link_before\'     => \'\',
 \'link_after\'      => \'\',
 \'items_wrap\'      => \'<ul id="%1$s" class="%2$s">%3$s</ul>\',
));
如果以上这些还不够。有一些filters 你也可以申请,比如nav_menu_css_class. 如果您还需要更多控制,可以完全覆盖walker 的参数wp_nav_menu() 作用这个walker 值必须设置为扩展Wordpress的新PHPClassWalker_Nav_Menu 类别:

 wp_nav_menu(array(
 \'walker\'      => new MyCustomNavWalker,
));
这里是MyCustomNavWalker 类(刚刚复制了deault),您可以完全自定义:

class MyCustomNavWalker extends Walker_Nav_Menu {
/**
 * @see Walker::$tree_type
 * @since 3.0.0
 * @var string
 */
var $tree_type = array( \'post_type\', \'taxonomy\', \'custom\' );

/**
 * @see Walker::$db_fields
 * @since 3.0.0
 * @todo Decouple this.
 * @var array
 */
var $db_fields = array( \'parent\' => \'menu_item_parent\', \'id\' => \'db_id\' );

/**
 * @see Walker::start_lvl()
 * @since 3.0.0
 *
 * @param string $output Passed by reference. Used to append additional content.
 * @param int $depth Depth of page. Used for padding.
 */
function start_lvl( &$output, $depth = 0, $args = array() ) {
    $indent = str_repeat("\\t", $depth);
    $output .= "\\n$indent<ul class=\\"sub-menu\\">\\n";
}

/**
 * @see Walker::end_lvl()
 * @since 3.0.0
 *
 * @param string $output Passed by reference. Used to append additional content.
 * @param int $depth Depth of page. Used for padding.
 */
function end_lvl( &$output, $depth = 0, $args = array() ) {
    $indent = str_repeat("\\t", $depth);
    $output .= "$indent</ul>\\n";
}

/**
 * @see Walker::start_el()
 * @since 3.0.0
 *
 * @param string $output Passed by reference. Used to append additional content.
 * @param object $item Menu item data object.
 * @param int $depth Depth of menu item. Used for padding.
 * @param int $current_page Menu item ID.
 * @param object $args
 */
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
    $indent = ( $depth ) ? str_repeat( "\\t", $depth ) : \'\';

    $class_names = $value = \'\';

    $classes = empty( $item->classes ) ? array() : (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 . \'<li\' . $id . $value . $class_names .\'>\';

    $atts = array();
    $atts[\'title\']  = ! empty( $item->attr_title ) ? $item->attr_title : \'\';
    $atts[\'target\'] = ! empty( $item->target )     ? $item->target     : \'\';
    $atts[\'rel\']    = ! empty( $item->xfn )        ? $item->xfn        : \'\';
    $atts[\'href\']   = ! empty( $item->url )        ? $item->url        : \'\';

    $atts = apply_filters( \'nav_menu_link_attributes\', $atts, $item, $args );

    $attributes = \'\';
    foreach ( $atts as $attr => $value ) {
        if ( ! empty( $value ) ) {
            $value = ( \'href\' === $attr ) ? esc_url( $value ) : esc_attr( $value );
            $attributes .= \' \' . $attr . \'="\' . $value . \'"\';
        }
    }

    $item_output  = $args->before;
    $item_output .= \'<a\'. $attributes .\'>\';
    $item_output .= $args->link_before;
            // HERE are your <span> tags
            $item_output .= \'<span data-hover="\'.esc_attr($item->title).\'">\';
            $item_output .= apply_filters( \'the_title\', $item->title, $item->ID );
            $item_output .= \'</span>\';
            $item_output .= $args->link_after;
    $item_output .= \'</a>\';
    $item_output .= $args->after;

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

/**
 * @see Walker::end_el()
 * @since 3.0.0
 *
 * @param string $output Passed by reference. Used to append additional content.
 * @param object $item Page data object. Not used.
 * @param int $depth Depth of page. Not Used.
 */
function end_el( &$output, $item, $depth = 0, $args = array() ) {
    $output .= "</li>\\n";
}
}

SO网友:Zihad

是的,这是可能的
您必须为此编写自己的自定义导航助行器。这是一个完全符合您要求的:https://snipt.net/huskie/wordpress-custom-walker-class-to-remove-unnecessary-classes-and-ids-from-menu-items/ . 我希望这有帮助。如果删除这些自动生成的类,也不会造成任何伤害。

结束

相关推荐

Primary and secondary menus

我试图使主菜单上的每个选项卡都链接到次菜单,这样实际上,每个主选项卡都会指向次菜单中的一组选项卡,而不是保持静态。我希望你能帮助我,我不是一个高级WP用户,所以可以使用简单的术语。更新我已经添加了代码,但它已经显示在我的网页和仪表板上,所以我一定是弄错了,所以我将其粘贴在下面,以便您可以看到。我不知道如何找到主弹头,但我想这是我在主弹头上添加的内容。function km_dynamic_secondary_menu_reg() { global $km_nav_menus;