如何将Aria角色和架构标记添加到自定义Walker容器

时间:2016-05-08 作者:550

Edit: 在做了一些研究之后,我发现wp_nav_menu 函数使用以下代码显示容器值。

if ( $args->container ) {
    /**
     * Filter the list of HTML tags that are valid for use as menu containers.
     *
     * @since 3.0.0
     *
     * @param array $tags The acceptable HTML tags for use as menu containers.
     *                    Default is array containing \'div\' and \'nav\'.
     */
    $allowed_tags = apply_filters( \'wp_nav_menu_container_allowedtags\', array( \'div\', \'nav\' ) );
    if ( is_string( $args->container ) && in_array( $args->container, $allowed_tags ) ) {
        $show_container = true;
        $class = $args->container_class ? \' class="\' . esc_attr( $args->container_class ) . \'"\' : \' class="menu-\'. $menu->slug .\'-container"\';
        $id = $args->container_id ? \' id="\' . esc_attr( $args->container_id ) . \'"\' : \'\';
        $nav_menu .= \'<\'. $args->container . $id . $class . \'>\';
    }
}
第341至357行https://developer.wordpress.org/reference/functions/wp_nav_menu/

$nav_menu .= \'<\'. $args->container . $id . $class . \'>\';
上面这一行处理容器信息的输出,我现在试图弄清楚如何在custom walker类中修改此信息以添加额外字段。

End of Edit

我目前正在尝试将aria角色和模式标记添加到我创建的自定义walker中。

我试图避免像下面这样直接将菜单包装在标签中。我更喜欢编辑容器并动态附加额外的元素。

<nav class="" role="navigation" itemscope="itemscope"  itemtype="http://schema.org/SiteNavigationElement">
  wp_nav_menu( $defaults );
</nav>
目前,我的wp\\U nav\\U菜单调用如下所示。

$defaults = array(
    \'menu\'              => \'\',
    \'menu_class\'        => \'\',
    \'menu_id\'           => \'\',
    \'container\'         => \'nav\',
    \'container_class\'   => \'a-primarymenu\',
    \'container_id\'      => \'\',
    \'before\'            => \'\',
    \'after\'             => \'\',
    \'link_before\'       => \'\',
    \'link_after\'        => \'\',
    \'depth\'             => 0,
    \'walker\'            => new Custom_Nav_Walker( \'a-primarymenu\' ),
    \'theme_location\'    => \'primary\',
    \'items_wrap\'        => \'<ul>%3$s</ul>\',
); wp_nav_menu( $defaults );
我分配的容器类被传递给自定义walker类,并允许我的菜单输出如下。

<nav class="a-primarymenu">
 <ul>
   <li class="a-primarymenu__item"><a href="#link">Link</a></li>
   <li class="a-primarymenu__item"><a href="#link">Link</a></li>
   <li class="a-primarymenu__item"><a href="#link">Link</a></li>
   <li class="a-primarymenu__item"><a href="#link">Link</a></li>
   <li class="a-primarymenu__item"><a href="#link">Link</a></li>
 </ul>
</nav>
我需要的帮助是弄清楚如何修改容器html输出

又称作<nav class="a-primarymenu">

所以我可以添加role="navigation"itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement" 到元素。

然后产生。

<nav class="a-primarymenu" role="navigation" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement">

我能找到的最接近这个期望输出的匹配是https://core.trac.wordpress.org/ticket/35127 然而,这只是对wordpress核心的请求,而不是修改后的walker。

1 个回复
SO网友:TheDeadMedic

@Dan meant this:

<nav role="navigation" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement"><?php

    wp_nav_menu([
        \'container\'  => \'\',
        \'items_wrap\' => \'<ul>%3$s</ul>\',
        ...
    ]);

?></nav>