web-dev-qa-db-ja.com

フィルタを使用してメニュー項目リンクにカスタム属性を追加する

テーマのアクセシビリティを向上させるために、クラスaria-current="page"を持つメニュー項目に.current_page_item属性を追加したいと思います。

今のところ、私は以下を使ってjQueryを通してこれをしています：

var currentitem = $( '.current_page_item > a' );
currentitem.attr( 'aria-current', 'page' );

これが私がやりたいことをしている間、私はPHPがこの特定のことを扱うことを好むでしょう。

これは、カスタムのNav Walkerクラスまたは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 );

このフィルタを書く際のどんな助けでも評価されるでしょう。

menusaccessibility
4
Cedon

current_page_item CSSクラスをターゲットにするか、代わりにcurrent-menu-item CSSクラスをターゲットにすることができます。 current_page_itemクラスはすべての種類のメニュー項目に存在するわけではありません。 ここで答えを読んでください なぜその理由がわかります。

どのCSSクラスを選択しても、次のようにCODEを使用して属性を設定できます。

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;
}
4
Fayaz

それを達成するためにフィルタ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 を参照してください。

0
Yoav Kadosh