Get Each Menu Nav Label of Menus in HTML tag

admin管理员组

文章数量:1302886

I have footer menus built with wp_nav_menu using code below:

wp_nav_menu(
   array(
        'container'      => '',
        'depth'          => 1,
        'items_wrap'     => '%3$s',
        'theme_location' => 'footer',
        'link_before'    => '<span content="">',
        'link_after'     => '</span>',
   )
);

and the HTML output like the following:

<ul class="footer-menus">
   <li id="1"><a title="A" href="https://localhost/A/"><span content=""></span>A</a></li>
   <li id="2"><a title="B" href="https://localhost/B/"><span content=""></span>B</a></li>
   <li id="3"><a title="C" href="https://localhost/C/"><span content=""></span>C</a></li>
</ul>

the question is how to fill the tag <span content where the content tag is the menu nav label that same with the li tag have, so the HTML output will be like this:

<ul class="footer-menus">
   <li id="1"><a title="A" href="https://localhost/A/"><span content="A"></span>A</a></li>
   <li id="2"><a title="B" href="https://localhost/B/"><span content="B"></span>B</a></li>
   <li id="3"><a title="C" href="https://localhost/C/"><span content="C"></span>C</a></li>
</ul>

Any help appreciated. Thanks!

I have footer menus built with wp_nav_menu using code below:

wp_nav_menu(
   array(
        'container'      => '',
        'depth'          => 1,
        'items_wrap'     => '%3$s',
        'theme_location' => 'footer',
        'link_before'    => '<span content="">',
        'link_after'     => '</span>',
   )
);

and the HTML output like the following:

<ul class="footer-menus">
   <li id="1"><a title="A" href="https://localhost/A/"><span content=""></span>A</a></li>
   <li id="2"><a title="B" href="https://localhost/B/"><span content=""></span>B</a></li>
   <li id="3"><a title="C" href="https://localhost/C/"><span content=""></span>C</a></li>
</ul>

the question is how to fill the tag <span content where the content tag is the menu nav label that same with the li tag have, so the HTML output will be like this:

<ul class="footer-menus">
   <li id="1"><a title="A" href="https://localhost/A/"><span content="A"></span>A</a></li>
   <li id="2"><a title="B" href="https://localhost/B/"><span content="B"></span>B</a></li>
   <li id="3"><a title="C" href="https://localhost/C/"><span content="C"></span>C</a></li>
</ul>

Any help appreciated. Thanks!

• menus
• html
• navigation

Share Improve this question asked Mar 22, 2021 at 7:56 Jessy KimJessy Kim 311 bronze badge

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Add This code in functions.php file

class WP_Custom_Nav_Walker extends Walker_Nav_Menu {

    public function start_el(&$output, $item, $depth = 0, $args = array (), $id = 0) {
        $indent = ( $depth ) ? str_repeat ( "\t", $depth ) : '';

        $classes   = empty ( $item->classes ) ? array () : (array) $item->classes;
        $classes[] = 'menu-item-' . $item->ID;

        $class_names = join ( ' ', apply_filters ( 'nav_menu_css_class', array_filter ( $classes ), $item, $args, $depth ) );
        $class_names = $class_names ? ' class="' . esc_attr ( $class_names ) . '"' : '';

        $id = apply_filters ( 'nav_menu_item_id', 'menu-item-' . $item->ID, $item, $args, $depth );
        $id = $id ? ' id="' . esc_attr ( $id ) . '"' : '';

        $output .= $indent . '<li' . $id . $class_names . '>';

        $atts           = array ();
        $atts[ 'title' ]  = ! empty ( $item->attr_title ) ? $item->attr_title : '';
        $atts[ 'target' ] = ! empty ( $item->target ) ? $item->target : '';
        $atts[ 'rel' ]    = ! empty ( $item->xfn ) ? $item->xfn : '';
        $atts[ 'href' ]   = ! empty ( $item->url ) ? $item->url : '';

        $atts = apply_filters ( 'nav_menu_link_attributes', $atts, $item, $args, $depth );

        $attributes = '';
        foreach ( $atts as $attr => $value ) {
            if( ! empty ( $value ) ) {
                $value      = ( 'href' === $attr ) ? esc_url ( $value ) : esc_attr ( $value );
                $attributes .= ' ' . $attr . '="' . $value . '"';
            }
        }

        $item_output = $args->before;
        $item_output .= '<a' . $attributes . '>';
        /** This filter is documented in wp-includes/post-template.php */
        // YOUR ADDED CONTROL STARTS HERE!!
        if( $args->link_before === 'span' ) {
            $item_output .= '<span content="'.$item->title.'"></span>';
        }
        $item_output .= apply_filters ( 'the_title', $item->title, $item->ID ) . $args->link_after;
        // YOUR ADDED CONTROL ENDS HERE!!


        $item_output .= '</a>';
        $item_output .= $args->after;

        $output .= apply_filters ( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }

}

menu should be like this

wp_nav_menu(
   array(
        'menu_class'     => 'nav-menu',
        'container'      => '',
        'depth'          => 1,
        'items_wrap'     => '%3$s',
        'theme_location' => 'footer',
        'walker'         => new WP_Custom_Nav_Walker(),
        'link_before'    => 'span',
   )
);

本文标签： Get Each Menu Nav Label of Menus in HTML tag