使用筛选器向菜单项链接添加自定义属性

时间:2017-03-22 作者:Cedon

为了增加主题的可访问性,我想添加aria-current="page" 属性设置为具有类的菜单项.current_page_item.

到目前为止,我正在通过jQuery使用以下工具进行此操作:

var currentitem = $( \'.current_page_item > a\' );
currentitem.attr( \'aria-current\', \'page\' );
虽然这就是我想要它做的,但我更希望PHP处理这个特定的事情。

我知道我可以用一个自定义导航学步器类或一个过滤器来实现nav_menu_link_attributes. 不幸的是,我还没有看到任何代码,甚至离我想做的事情很远。

function my_menu_filter( $atts, $item, $args, $depth ) {
   // Select the li.current_page_item element
   // Add `aria-current="page"` to child a element
}
add_filet( \'nav_menu_link_attributes\', \'my_menu_filter\', 10, 3 );
如果您能帮助编写此过滤器,我们将不胜感激。

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

您可以针对current_page_item CSS类,或者您可以针对current-menu-item 而不是CSS类。current_page_item 类可能不适用于所有类型的菜单项。阅读the answer here 了解原因。

无论选择哪个CSS类,都可以使用如下代码来设置属性:

add_filter( \'nav_menu_link_attributes\', \'wpse260933_menu_atts_filter\', 10, 3 );
function wpse260933_menu_atts_filter( $atts, $item, $args ) {
    if( in_array( \'current-menu-item\', $item->classes ) ) {
        $atts[\'aria-current\'] = \'page\';
    }
    return $atts;
}

SO网友:Yoav Kadosh

您可以使用过滤器nav_menu_link_attributes 为了实现这一目标:

function add_attribute_to_current_menu_item( $atts, $item, $args ) {
    // check if this item represents the current post
    if ( $item->object_id  == get_the_ID() ) 
    {
        // add the desired attributes:
        $atts[\'aria-current\'] = \'page\';
    }
    return $atts;
}
add_filter( \'nav_menu_link_attributes\', \'add_attribute_to_current_menu_item\', 10, 3 );
请参见nav_menu_link_attributes 了解更多信息。