WordPress Snippet

ワードプレスをカスタマイズしよう

WordPress 4.8 page_menu_link_­attributes filter

HTML5のdata-属性や、WAI-AREA属性など、リンクや要素内で属性を追加したいという場面は少なくないと思います。

WordPress4.8でWalker_Pageクラスにフィルターが追加されました。

以下のコードは、サイドバーウィジェットのページ一覧 WAI-ARIAの新しい属性、aria-current属性を追加するものです。

ページ一覧ウィジェットは、通常以下のようなソースを出力します。current_page_itemクラスが出力されるので、このリンクにスタイルを与えること自体には何の支障もないわけですが、

<li class="page_item page-item-999 current_page_item">
 <a href="http://example.com/wp/example/">2col</a>
</li>

current_page_itemは、WordPressが出力するクラス名であっても、WEB上では、定義済みのクラス名でもないわけで 
WAI-AREAが定義したaria-current属性を使用する事で、いろんなブラウザで、「あ、現在表示しているページのリンクなのね」と理解可能になる仕組みのようで、今後も属性の追加などのニーズは増えていくのかなと感じます。

カテゴリーやタクソノミーは、これからでしょうか?

add_filter ('page_menu_link_attributes', 'add_aria_current', 11, 5) ;

function add_aria_current ( $attrs= array (), $page, $depth, $args, $current_page ) {
	//https://core.trac.wordpress.org/ticket/40359
	if ($page->ID=== $current_page) {
		$attrs['aria-current']= 'page' ;
	}

	return $attrs;
}

core.trac.wordpress.org/ticket/40359

関連

Accessible Rich Internet Applications (WAI-ARIA) 1.1 日本語訳

wp_nav_menu()で同様の事を行ってみる

add_filter( 'nav_menu_link_attributes', 'filter_function_name', 10, 3 );
 
function filter_function_name( $atts, $item, $args ) {
	
	if( raindrops_is_current_post( $item->url ) ) {
		
		$atts['aria-current']= 'page';
		return $atts;
	}
	return $atts;
}
if ( ! function_exists( 'raindrops_is_current_post' ) ) {
	
	function raindrops_is_current_post($url) {
		global $post;

		$postid	= absint( url_to_postid( $url ) );

		if ( $postid== $post->ID && is_singular() ) {

			return true;
		}
		return false;
	}
}

[emulsion_relate_posts]