将自定义ID设置为列表元素查看器自定义函数

时间:2015-12-22 作者:Henry Lynx

我正在自定义WP主题中使用引导创建导航。我成功地获得了以下结果:

<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27">...</li>
但是,在将导航转换为WP导航之前,我已经对其进行了样式化,如下所示:

<li class="" id="nava"><a href="--><?php //echo get_option(\'home\');?><!--/">Home</a></li>
我想用id=“nava”替换id=“menu-item-27”。

非常感谢您的帮助!

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

您可以使用nav_menu_item_id 过滤方式如下:

add_filter( \'nav_menu_item_id\', function( $menu_id, $item, $args, $depth )
{
    if( \'menu-item-27\' === $menu_id )
        $menu_id = \'nava\';

    return $menu_id;
}, 10, 4 );
但是,如果删除并重新插入菜单项,这对于菜单ID来说是“不稳定的”。您可能还希望以特定的菜单位置为目标。

一种常见的方法,我喜欢它的灵活性,就是检查特定的CSS类,我们可以在后端的导航UI中设置这些类。

下面是一个示例,我们检查set-id-nava 班如果设置了,那么我们用nava:

add_filter( \'nav_menu_item_id\', function( $menu_id, $item, $args, $depth )
{
    if( in_array( \'set-id-nava\', (array) $item->classes ) )
        $menu_id = \'nava\';

    return $menu_id;
}, 10, 4 );
我们还可以使其更加动态,并检查set-id-???.

我们甚至可以添加一个额外的输入字段来设置每个菜单项的CSS id。但这需要更多的工作。

如果你不想set-id-nava 作为CSS类,您可以将其删除,例如通过nav_menu_css_class 滤器

SO网友:Henry Lynx

谢谢@birgire我编辑了walker课程如下:

From: 
$id = apply_filters( \'nav_menu_item_id\', \'menu-item-\'. $item->ID, $item, $args );
To:
$id = apply_filters( \'nav_menu_item_id\', \'nava\', $item, $args );