在wp_NAV_MENU_ITEMS筛选器中添加的菜单项从不突出显示

时间:2016-04-11 作者:Alexander Farber

在一个二十三子主题中,我附加了一个菜单项(链接到/player-number 页面模板,其中每个用户的编号不同,并在游戏数据库中表示其id),使用wp_nav_menu_items 挂钩:

function my_nav_menu_items( $items ) {
    $profile = sprintf(\'<li id="menu-item-32" 
        class="menu-item menu-item-type-custom 
        menu-item-object-custom menu-item-32">
        <a href="/player-%d/#navbar">Profile</a></li>\', 
        42); // 42 is just a placeholder here, representing user id

    return $items . $profile;
}

add_filter( \'wp_nav_menu_items\', \'my_nav_menu_items\' );
并且该项目在primary-menu, 但由于某些原因,它从未突出显示(为截图中的非英语文本道歉):

website screenshot

一、 e.当我单击任何其他菜单项时,它会将其颜色更改为淡红色,字体倾斜为斜体:

highlighted menu item

但最后一个菜单项不能做到这一点,为什么?

UPDATE:

这个wp_nav_menu_objects 过滤器似乎更适合添加菜单项的任务,我已经尝试在我的/wp-content/themes/twentythirteen-child/functions.php 文件:

function my_nav_menu_objects( $sorted_menu_items ) 
{
    $link = array (
        \'title\'            => \'Profile\',
        \'menu_item_parent\' => 0,
        \'ID\'               => 32,
        \'url\'              => \'/player-42\',
    );
    $sorted_menu_items[] = (object) $link;
    error_log(print_r($sorted_menu_items, TRUE));
    return $sorted_menu_items;
}

add_filter( \'wp_nav_menu_objects\', \'my_nav_menu_objects\' );
但它也遇到了同样的问题:添加了菜单项,但没有突出显示(CSS样式current-menu-item 对于缺少的),选择时。

UPDATE 2:

此外,我还尝试手动添加一个名为“Profile”的菜单项,然后搜索并替换其url 使用以下代码:

function my_nav_menu_objects( $sorted_menu_items )
{
    foreach ( $sorted_menu_items as $item ) {
            error_log(print_r($item, TRUE));

            if ( $item->title == \'Profile\' ) {
                $item->url = \'/player-42\';
                break;
            }
    }

    return $sorted_menu_items;
}

add_filter( \'wp_nav_menu_objects\', \'my_nav_menu_objects\' );
具有相同的效果(URL已更改,但选中该URL时缺少CSS突出显示)。

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

@AlexanderFarber,有很多方法可以在下面附加属性类wp_nav_menu 链接我同意Sumit在中添加页面链接Appearance > Menu WordPress负责current-menu-item 类别或current_page_item 班此外,这种方式是将来处理导航菜单的最佳实践。

在wp\\U nav\\U菜单中创建动态链接,因为您的问题与this answer, 那么你有一个Page 具有player 作为slug。我的方法是,在将这些页面作为菜单添加到Appearance > Menu (然后用“Profile”更改标签),我将使用过滤器nav_menu_link_attributes 使此页面具有动态链接。作为您的问题,您可以使用当前用户id使其动态化。看看这个示例代码,比如7 是否将帖子/页面ID作为目标:

add_filter( \'nav_menu_link_attributes\', function( $atts, $item, $args, $depth )
{
    // check our nav_menu
    if ( is_object( $args ) && is_object( $item ) && \'primary-menu\' == $args->menu_id )
    {
        $post_id = 7; // Define Post or Page ID
        $user    = wp_get_current_user();
        if ( 0 < $user->ID && $post_id == $item->object_id )
            $atts[\'href\'] = esc_url( user_trailingslashit( untrailingslashit( $item->url ) . \'-\' . $user->ID ) );
    }
    return $atts;
} 10, 4 );
在进行更改之前,您需要检查哪个菜单,因为您的过滤器将影响同一页面中的另一个菜单。通过这种方法,您不会在当前页面的属性(类或id主题css相关)上遇到问题。

Answer related your code

是的,我知道你需要通过过滤器添加自定义链接wp_nav_menu_items 并为当前页面添加class属性,与您的答案几乎相同。因为它与页面相关,所以我使用current_page_item 作为类属性,与css Twenty13匹配,以突出显示项目导航菜单。

add_filter( \'wp_nav_menu_items\', \'my_nav_menu_items\', 10, 2 );
function my_nav_menu_items( $items, $args )
{
    if ( is_object( $args ) && \'primary-menu\' == $args->menu_id )
    {
            $user         = wp_get_current_user();
            $with_user_id = ( 0 != $user->ID ) ? \'-\' . $user->ID : \'\';
            
            $post_id      = 7; // Post or Page ID
            $class        = ( is_page( $post_id ) ) ? \'current_page_item\' : \'\';
            
            $items .= sprintf( \'<li id="menu-item-32" class="menu-item menu-item-type-custom 
            menu-item-object-custom %1$s menu-item-32"><a href="%2$s">%3$s</a></li>\',
                sanitize_html_class( $class ),
                esc_url( user_trailingslashit( untrailingslashit( get_page_link( $post_id ) ) . $with_user_id  ) ),
                __( \'Profile\', \'textdomain\' )
            );
    }
    return $items;
}
您可以调整代码以适应当前项目。我希望这有帮助。

SO网友:Monkey Puzzle

其他页面显示“当前菜单项”css状态:

.nav-menu .current_page_item > a, .nav-menu .current_page_ancestor > a, .nav-menu .current-menu-item > a, .nav-menu .current-menu-ancestor > a {
   color: #bc360a;
   font-style: italic;
此页面显示为“page-id-32”。如果与菜单中的页面相对应,则应显示“当前页面项”css。否则,当您在该页面上时,您需要以某种方式在css中获取类“当前菜单项”。例如,如果您更改:

sprintf(\'<li id="menu-item-32" 
    class="menu-item menu-item-type-custom 
    menu-item-object-custom menu-item-32">

sprintf(\'<li id="menu-item-32" 
    class="menu-item menu-item-type-custom 
    menu-item-object-custom current-menu-item">
它可以完成这项工作,但我认为这将“始终”显示当前页面。

SO网友:Alexander Farber

以下是我自己的解决方案-在/wp-content/themes/twentythirteen-child/functions.php 文件添加current-menu-item 如果页面段塞为player:

function my_nav_menu_items( $items ) 
{
    $profile = sprintf(\'<li class="menu-item 
        menu-item-type-custom 
        menu-item-object-custom 
        %s"><a href="/player-%d/#navbar">Profile</a></li>\', 
        ( is_page( \'player\' ) ? \'current-menu-item\' : \'\' ),
        42);
    return $items . $profile;
}

add_filter( \'wp_nav_menu_items\', \'my_nav_menu_items\' );
更具体的页面检查是:is_page( array ( 42, \'player\' ) )

相关推荐

WP_Query filters

这个问题可能看起来很愚蠢,但我真的没有找到有用的链接。我正在尝试做一个简单的查询,在这里我选择了最近的10篇文章,我希望能够在循环中只显示这10篇文章中的1篇我的代码看起来像 // Query latest 10 records $the_query = new WP_Query( array( \'post_type\' => \'post\', \"order\" => \"DESC\", \'posts_per_page