テーマのアクセシビリティを向上させるために、クラス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 );
このフィルタを書く際のどんな助けでも評価されるでしょう。
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;
}
それを達成するためにフィルタ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 を参照してください。