Highlight another nav item

时间：2017-07-17 作者：Josh Rodgers

我正在使用WordPress开发一个图片库网站。我有相册和画廊，有不同的永久链接。。。http://url.com/albums 和http://url.com/gallery, 但主导航中只显示相册。

我的导航代码如下所示：

<div id="nav">
    <ul>
        <?php wp_list_pages("title_li="); ?>
    </ul>
</div>
因为我正在使用wp_list_pages() 函数，则您所在的当前页面将获取current_page_item 类添加到li 标签

库页面不是主导航的一部分，因此当有人查看其中一个库页面时，主导航中不会突出显示任何内容。

当有人查看gallery页面时，我想在主导航中突出显示相册页面。因为每个图库都在相册中，所以突出显示该页是有意义的。

有人能给我指出正确的方向吗？

谢谢，乔希

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

这个page_css_class filter 用于修改每个菜单项获得的类。

这里我们检查当前是否正在查看单数envira post类型和菜单项slug为gallery. 在这种情况下，我们向传递给函数的默认类数组中添加一个类。

function wpd_page_css_class( $css_class, $page ){
    if( is_singular( \'envira\' ) && \'albums\' == $page->post_name ){
        $css_class[] = \'current_page_item\';
    }
    return $css_class;
}
add_filter( \'page_css_class\', \'wpd_page_css_class\', 10, 2 );

SO网友:Josh Rodgers

经过一番摸索，我在这里找到了答案：https://forum.jquery.com/topic/jquery-addclass-to-containing-li-based-on-a-href-contents 来自Przemek（第4条评论）。

我所做的只是确保代码只在gallery页面上执行：

<?php if ( is_singular("envira") ) { ?>
    <script>
        $(function() {
            $(\'li.page_item\').find(\'a[href*="/albums/"]\').parent().addClass(\'current_page_item\');
        });
    </script>
<?php } ?>
这是可行的，因为它找到了带有相册永久链接的列表项，并添加了我需要的类。如果我更改页面顺序，脚本仍然可以工作。唯一一次这将是一个问题，如果我的永久链接改变，但对于这个网站，这不是一个问题。

谢谢，乔希

结束
标签： menus   navigation   wp-list-pages   小码农  

相关推荐

Odd spacing in Navigation Bar

我正在重新设计my website, 我很难找到是什么导致导航项目之间的间距（我假设是边距）。我一直在钻研chrome开发工具，但我在任何地方都找不到导致它的原因。请注意，当您在项目之间悬停时，项目之间会有一个明显的白色条带。