带 Walker 的 WordPress 自定义菜单 3 级

Question

您好，我有一个菜单要移至 WordPress，如何使用 walker 指定我的类、子类、子子类？您还可以注意到，我想为每个菜单项添加一个按钮，其操作逻辑已经是手工 JavaScipt。

<ul data-spollers="768,max" class="menu__list">
                    <li class="menu__item">
                        <a href="" class="menu__link">Главная</a>
                        <button type="button" class="menu__arrow _icon-menu_down"></button>
                    </li>
                    <li class="menu__item">
                        <a href="" class="menu__link">Продукция</a>
                        <button type="button" class="menu__arrow _icon-menu_down"></button>
                        <ul data-spollers="768,max" class="menu__sub-list">
                            <li class="menu__sub-item">
                                <a href="" class="menu__sub-link">Product #1</a>
                                <button data-spoller type="button" class="menu__sub-arrow _icon-menu_left"></button>
                                <ul class="menu__subsub-list">
                                    <li class="menu__subsub-item">
                                        <a href="" class="menu__subsub-link">Product #2</a>
                                    </li>
                                    <li class="menu__subsub-item">
                                        <a href="" class="menu__subsub-link">Product #3</a>
                                    </li>
                                    <li class="menu__subsub-item">
                                        <a href="" class="menu__subsub-link">Product #4</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="menu__sub-item">
                                <a href="" class="menu__sub-link">Product #2</a>
                            </li>
                            <li class="menu__sub-item">
                                <a href="" class="menu__sub-link">Product #3</a>
                            </li>
                            <li class="menu__sub-item">
                                <a href="" class="menu__sub-link">Product #4</a>
                            </li>
                        </ul>
                    </li>
                    <li class="menu__item">
                        <a href="" class="menu__link">О компании</a>
                        <button data-spoller type="button" class="menu__arrow _icon-menu_down"></button>
                        <ul class="menu__sub-list">
                            <li class="menu__sub-item">
                                <a href="" class="menu__sub-link">Product #1</a>
                            </li>
                            <li class="menu__sub-item">
                                <a href="" class="menu__sub-link">Product #2</a>
                            </li>
                            <li class="menu__sub-item">
                                <a href="" class="menu__sub-link">Product #3</a>
                            </li>
                            <li class="menu__sub-item">
                                <a href="" class="menu__sub-link">Product #4</a>
                            </li>
                        </ul>
                    </li>
                    <li class="menu__item">
                        <a href="" class="menu__link">Контакты</a>
                        <button type="button" class="menu__arrow _icon-menu_down"></button>
                    </li>
                </ul>

Answer 1

我明白了

My_Walker_Nav_Menu 类扩展 Walker_Nav_Menu {

// add classes to ul sub-menus
function start_lvl(&$output, $depth = 0, $args = NULL)
{
    // depth dependent classes
    $indent = ($depth > 0  ? str_repeat("\t", $depth) : ''); // code indent
    $display_depth = ($depth + 1); // because it counts the first submenu as 0
    $classes = array(
        '',
        ($display_depth % 2  ? 'menu-odd' : 'menu-even'),
        ($display_depth >= 2 ? 'menu__subsub-list' : 'menu__sub-list'),
        'menu-depth-' . $display_depth
    );
    $class_names = implode(' ', $classes);

    // build html
    if ($display_depth === 1) :

        $output .= "\n" . $indent . '<button data-spoller type="button" class="menu__arrow _icon-menu_down">' . "</button>";
        $output .= "\n" . $indent . '<ul class="' . $class_names . '">' . "\n";

    elseif ($display_depth === 2) :

        $output .= "\n" . $indent . '<button data-spoller type="button" class="menu__sub-arrow _icon-menu_left">' . "</button>";
        $output .= "\n" . $indent . '<ul class="' . $class_names . '">' . "\n";

    else :
        $output .= "\n" . $indent . '<ul class="' . $class_names . '">' . "\n";

    endif;
}

// add main/sub classes to li's and links
function start_el(&$output, $item, $depth = 0, $args = NULL, $id = 0)
{
    global $wp_query;
    $indent = ($depth > 0 ? str_repeat("\t", $depth) : ''); // code indent

    // depth dependent classes
    $depth_classes = array(
        ($depth == 0 ? 'menu__item' : ''),
        ($depth == 1 ? 'menu__sub-item' : ''),
        ($depth >= 2 ? 'menu__subsub-item' : ''),
        ($depth % 2 ? 'menu-item-odd' : 'menu-item-even'),
        'menu-item-depth-' . $depth
    );
    $depth_class_names = esc_attr(implode(' ', $depth_classes));

    // passed classes
    $classes = empty($item->classes) ? array() : (array) $item->classes;
    $class_names = esc_attr(implode(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item)));

    // build html
    $output .= $indent . '<li id="nav-menu-item-' . $item->ID . '" class="' . $depth_class_names . ' ' . $class_names . '">';

    // link attributes
    $attributes  = !empty($item->attr_title) ? ' title="'  . esc_attr($item->attr_title) . '"' : '';
    $attributes .= !empty($item->target)     ? ' target="' . esc_attr($item->target) . '"' : '';
    $attributes .= !empty($item->xfn)        ? ' rel="'    . esc_attr($item->xfn) . '"' : '';
    $attributes .= !empty($item->url)        ? ' href="'   . esc_attr($item->url) . '"' : '';
    $attributes .= ' class="' . ($depth == 0 ? 'menu__link' : '') . ($depth == 1 ? 'menu__sub-link' : '') . ($depth >= 2 ? 'menu__subsub-link' : '') . '"';

    $item_output = sprintf(
        '%1$s<a%2$s>%3$s%4$s%5$s</a>%6$s',
        $args->before,
        $attributes,
        $args->link_before,
        apply_filters('the_title', $item->title, $item->ID),
        $args->link_after,
        $args->after
    );

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

}