php - How to add aria role and schema markup to custom walker container

admin管理员组

文章数量:1332394

Edit: after doing some research I've found that in the wp_nav_menu function uses the following code to display the containers value.

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 . '>';
    }
}

lines 341 to 357 /

$nav_menu .= '<'. $args->container . $id . $class . '>';

The above line deals with the output of the container information I'm now trying to figure out how to modify this information within the custom walker class to add the extra fields.

End of Edit

I'm currently trying to add aria roles and schema markup to a custom walker I've created.

I'm trying to avoid wrapping the menu inside the tags directly like below. I would prefer to edit the container and attach the extra elements dynamically.

<nav class="" role="navigation" itemscope="itemscope"  itemtype="">
  wp_nav_menu( $defaults );
</nav>

Currently my wp_nav_menu call looks like this.

$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 );

The container class I assign is passed to the custom walker class and allows my menu output to be as follows.

<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>

What I need help with is figuring out how to modifer the container html output

aka <nav class="a-primarymenu">

so I can add role="navigation" and itemscope="itemscope" itemtype="" to the element.

Which would then produce.

<nav class="a-primarymenu" role="navigation" itemscope="itemscope" itemtype="">

The closest match I could find to this desired output was however this is just a request to the wordpress core and not a modifiered walker.

Edit: after doing some research I've found that in the wp_nav_menu function uses the following code to display the containers value.

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 . '>';
    }
}

lines 341 to 357 https://developer.wordpress/reference/functions/wp_nav_menu/

$nav_menu .= '<'. $args->container . $id . $class . '>';

The above line deals with the output of the container information I'm now trying to figure out how to modify this information within the custom walker class to add the extra fields.

End of Edit

I'm currently trying to add aria roles and schema markup to a custom walker I've created.

I'm trying to avoid wrapping the menu inside the tags directly like below. I would prefer to edit the container and attach the extra elements dynamically.

<nav class="" role="navigation" itemscope="itemscope"  itemtype="http://schema/SiteNavigationElement">
  wp_nav_menu( $defaults );
</nav>

Currently my wp_nav_menu call looks like this.

$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 );

The container class I assign is passed to the custom walker class and allows my menu output to be as follows.

<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>

What I need help with is figuring out how to modifer the container html output

aka <nav class="a-primarymenu">

so I can add role="navigation" and itemscope="itemscope" itemtype="http://schema/SiteNavigationElement" to the element.

Which would then produce.

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

The closest match I could find to this desired output was https://core.trac.wordpress/ticket/35127 however this is just a request to the wordpress core and not a modifiered walker.

• php
• functions
• theme-development
• menus
• filters

Share Improve this question edited May 9, 2016 at 6:29 550 asked May 8, 2016 at 13:20 550550 4511 gold badge11 silver badge88 bronze badges 2

• 1 You can set container => false and wrap ul list inside your nav element. – James Vu Commented May 8, 2016 at 14:05
• Thanks Dan, But using the wrap element would create a loop of schema information. As the information site element is only meant to be on the container itself and not the sub levels. By adding it to the wrap it would repeat down the depths. – 550 Commented May 8, 2016 at 14:09

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

@Dan meant this:

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

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

?></nav>

本文标签： phpHow to add aria role and schema markup to custom walker container