Добавить последовательную нумерацию для меню WordPress (только глубина 0)

Question

Я пытаюсь добавить последовательную нумерацию после каждой ссылки в меню в WordPress. Они должны быть в теге и в виде текста. так что я могу стиль

Попробовал это ниже, но так как это CSS, я не могу стилизовать эти числа.

Как добавить последовательную нумерацию для WordPress меню

У меня нет знаний о JS. поэтому я сделал это в navwalker.php

            if(! empty( $item->attr_title )){
            $item_output .= '<a'. $attributes .'><i class="' . esc_attr( $item->attr_title ) . '"></i>&nbsp;';
        } else {
            $item_output .= '<a'. $attributes .'>';
        }

        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
        $item_output .= ($args->has_children && $depth == 0) ? ' <span class="caret"></span></a>' : '</a>';
        $item_output .= $args->after . '<span class="navnum">' . str_pad(esc_attr( $item->menu_order ), 2, "0", STR_PAD_LEFT) . '.</span>';

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

И это работает. Единственная проблема, которая заключается в подсчете дочерних элементов (подменю) в сворачиваемом меню, поэтому он создает что-то вроде этого:

01
03
04
07
08

Есть идеи о том, как считать только родителей?

(Если решение JS, я был бы признателен, если вы объясните это очень просто)

Answer 1

Если то, что вы пытаетесь сделать, это только меню верхнего уровня, вы можете просто проверить глубину.

Изменить:

    $item_output .= $args->after . '<span class="navnum">' . str_pad(esc_attr( $item->menu_order ), 2, "0", STR_PAD_LEFT) . '.</span>';

чтобы:

    $item_output .= $args->after . ($depth == 0 ? '<span class="navnum">' . str_pad(esc_attr( $item->menu_order ), 2, "0", STR_PAD_LEFT) : '') . '.</span>';

Для нумерации пунктов меню последовательно установите собственный глобальный счетчик при запуске нового уровня:

public function start_lvl( &$output, $depth = 0, $args = array() ) {
    if (!isset($_GLOBALS['menu_counter'])) {
        $GLOBALS['menu_counter'] = array();
    }
    $GLOBALS['menu_counter'][$depth] = 0;
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<ul class=\"sub-menu\">\n";
}

Тогда в start_el:

public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
    global $menu_counter;
    ....

и в примере кода, который вы дали в своем вопросе:

$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
$item_output .= ($args->has_children && $depth == 0) ? ' <span class="caret"></span></a>' : '</a>';
$item_output .= $args->after . '<span class="navnum">' . str_pad(++$menu_order[$depth], 2, "0", STR_PAD_LEFT) . '.</span>';

Для этого нужно установить переменную, начиная с нуля, когда вы устанавливаете новый уровень. Затем для каждого элемента на этом уровне он добавляет один к этой переменной и использует результат в качестве номера пункта меню.