Как обернуть список пользовательским классом, используя wp_nav_menu?

Я хочу отобразить меню в подвале с 4 колонками. Но когда я добавляю новое меню, функция wp_nav_menu создает элемент <li> и добавляет в него все элементы меню.

Теперь, как я могу обернуть каждый элемент li в пользовательский тег div с классом?

Мне нужен этот вывод:

На изображении выше вы можете видеть, что каждое меню обернуто в div.

Я пробовал с wp_nav_menu(), но это не помогает. Поскольку я новичок в разработке тем для WordPress, я не знаю других вариантов.

Есть ли способ сказать WordPress добавить элемент div с пользовательским классом перед каждым элементом меню?

Спасибо 🙂

Лучше всего пройтись по всем элементам меню, чтобы получить их по отдельности, так. Это даст вам возможность добавлять классы как к ul, так и к элементам li.

    <?php $myMenu = get_nav_menu_locations();

// 'main-menu' - это имя вашего меню, вы можете найти его в разделе 'меню' на панели управления вашего сайта WordPress
$menuID = $myMenu['main-menu'];

$mainNav = wp_get_nav_menu_items($menuID);

?>
<ul>
    <?php foreach ($mainNav as $navItem): ?>

        <li>
            <a href="https://wordpress.stackexchange.com/questions/288486/<?php echo $navItem->url; ?>"
              title="<?php echo $navItem->title; ?>">
              <?php echo $navItem->title; ?>
          </a>
      </li>
  <?php endforeach; ?>
</ul>

Возможно, используйте nav_walker или фильтр на wp_nav_menu_objects

Вот простой nav_walker, который, когда выводится с помощью wp_nav_menu, обернет содержимое каждой ссылки в меню в элемент span

<?php
/**
 * Add_Span_Nav_Walker
 * класс walker для wp_nav_menu, который оборачивает содержимое каждой ссылки элемента меню в элемент span
 */

class Add_Span_Nav_Walker extends Walker_Nav_Menu {

    function start_lvl( &$output, $depth = 0, $args = [] ) {
        $indent = str_repeat( "\t", $depth );
        $output .= "\n$indent\n";
    }

    function end_lvl( &$output, $depth = 0, $args = [] ) {
        $indent = str_repeat( "\t", $depth );
        $output .= "$indent\n";
    }

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

        $class_names = $value="";

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

        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );

        $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

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

        $output .= $indent . '';

        $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 ) . '"' : '';

        $item_output = $args->before;
        $item_output .= '<li' . $class_names . '><a' . $attributes . '><span>';
        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
        $item_output .= '</span></a>';
        $item_output .= $args->after;

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

    function end_el( &$output, $item, $depth = 0, $args = [] ) {
        $output .= "\n";
    }
}

Когда мы выводим наше nav_menu в теме, мы можем использовать Add_Span_Nav_Walker как класс walker:

<?php
if ( has_nav_menu( 'wpse288486_nav' ) ) :
    wp_nav_menu( [
        'theme_location' => 'wpse288486_nav',
        'walker'         => new Add_Span_Nav_Walker(),
    ] );
endif;