向每个子菜单添加唯一ID

时间:2021-12-08 作者:Sam

我有以下菜单通过标题。php:

<?php
wp_nav_menu(
    array(
        \'container\' => false,
        \'theme_location\' => \'primary\',
        \'items_wrap\' => \'<ul class="header__nav-items header__nav-items--primary">%3$s</ul>\',
    )
);
对于包含子菜单项的父菜单项,我将替换<a> 带按钮的标签(由ACF控制)。功能如下:

<?php
function edit_menu_item($item_output, $item) {
    if ( get_field( \'dropdown\', $item) == \'yes\' ) { 
        return \'<button aria-expanded="false" aria-controls="aria-\'.$item->object_id.\'" class="header__button">\'.$item->title.\'</button>\';
    }
    return $item_output;
}
add_filter(\'walker_nav_menu_start_el\',\'edit_menu_item\', 10, 2);
单击按钮时aria-expanded 属性从falsetrue. 子菜单也会显示出来。这是通过JavaScript控制的。

通过上述功能,这就是前端产生的。

<ul class="header__nav-items">
    <li class="menu-item-has-children header__nav-item">
        <button aria-expanded="true" aria-controls="aria-1880" class="header__button">Food</button>
        <ul class="sub-menu header__sub-menu header__sub-menu--toggled">
            <li class="header__nav-item"><a href="/pizza" class="header__nav-anchor">Pizza</a></li>
            <li class="header__nav-item"><a href="/burgers" class="header__nav-anchor">Burgers</a></li>
            <li class="header__nav-item"><a href="/fries" class="header__nav-anchor">Fries</a></li>
        </ul>
    </li>
</ul>
Thearia-controls 属性具有唯一ID。此ID需要与我的子菜单匹配。

如何向每个子菜单添加唯一ID?

1 个回复
最合适的回答,由SO网友:vralle 整理而成

据我所知,WordPress中的菜单处理程序使用菜单参数。你可以试着用这个。

使用参数过滤器,我们可以传递项的ID:

add_filter(
    \'nav_menu_item_args\',
    function( $args, $item, $depth ) {
        $args->item_id = $item->ID;

        return $args;
    },
    10,
    3
);
然后在任何地方使用自定义参数。

add_filter(
    \'walker_nav_menu_start_el\',
    function($item_output, $item) {
        if ( get_field( \'dropdown\', $item) == \'yes\' ) { 
            return \'<button aria-expanded="false" aria-controls="submenu-\'. $item->ID . \'" class="header__button">\' . $item->title . \'</button>\';
        }
        return $item_output;
    },
    10,
    2
);
class My_Nav_Menu_Walker extends Walker_Nav_Menu {
    /**
     * Starts the list before the elements are added.
     *
     * @see Walker::start_lvl()
     *
     * @param string   $output Used to append additional content (passed by reference).
     * @param int      $depth  Depth of menu item. Used for padding.
     * @param stdClass $args   An object of wp_nav_menu() arguments.
     */
    public function start_lvl( &$output, $depth = 0, $args = null ) {
        if ( isset( $args->item_spacing ) && \'discard\' === $args->item_spacing ) {
            $t = \'\';
            $n = \'\';
        } else {
            $t = "\\t";
            $n = "\\n";
        }
        $indent = str_repeat( $t, $depth );

        // Default class.
        $classes = array( \'sub-menu\' );

        // ! Get parent item ID:
        $id = isset( $args->item_id ) ? \' id="submenu-\' . absint( $args->item_id ) . \'"\' : \'\';

        /**
         * Filters the CSS class(es) applied to a menu list element.
         *
         * @since 4.8.0
         *
         * @param string[] $classes Array of the CSS classes that are applied to the menu `<ul>` element.
         * @param stdClass $args    An object of `wp_nav_menu()` arguments.
         * @param int      $depth   Depth of menu item. Used for padding.
         */
        $class_names = implode( \' \', apply_filters( \'nav_menu_submenu_css_class\', $classes, $args, $depth ) );
        $class_names = $class_names ? \' class="\' . esc_attr( $class_names ) . \'"\' : \'\';

        // ! Insert ID:
        $output .= "{$n}{$indent}<ul{$class_names}{$id}>{$n}";
    }
}
它仍然包括带有自定义Walker的文件,并将其指向菜单:

wp_nav_menu(
    array(
        \'container\' => false,
        \'theme_location\' => \'primary\',
        \'items_wrap\' => \'<ul class="header__nav-items header__nav-items--primary">%3$s</ul>\',
        \'walker\'  => new My_Nav_Menu_Walker()
    )
);
我还没有测试代码。在某些情况下,可能存在冲突,您可以使用clone 或使用另一种方法限制自定义参数的范围。

相关推荐

WordPress中声明SplitMenuWalker::Walk($Elements,$max_Depth)时出现警告

我开始在WordPress网站上收到以下错误:警告:SplitMenuWalker::walk($elements,$max\\u depth)的声明应与/home/relati67/public\\u html/wp content/themes/mentis/inc/mega menu/split menu中的walk::walk($elements,$max\\u depth,$args)兼容。php第0行我不知道在这里该怎么办。我发现了一个具有类似内容的线程,但错误指向特定行(不是第0行),并且不