0

Меню требуется организовать из админки. Такую структуру меню генерирует Wordpress

<ul>
  <li>1</li>
  <li>
    <ul>
      <li>11</li>
      <li>12</li>
      <li>13</li>
    </ul>
  </li>
  <li>2</li>
</ul>
А вот на такую структуру требуется поменять

<ul>
  <li>1</li>
  <li>
    <div>
      <ul>
        <div>
          <li>11</li>
        </div>
        <div>
          <li>12</li>
        </div>
        <div>
          <li>13</li>
        </div>
      </ul>
    </div>
  </li>
  <li>2</li>
</ul>

2
  • 1
    Ваша разметка не валидная, вас это не смущает?)
    – user243545
    14 мая 2020 в 18:32
  • 1
    Не занимайтесь ерундой. WP делали очень грамотные люди. Научитесь использовать то, что они создали. 14 мая 2020 в 18:36

1 ответ 1

1

Способов реализации очень много, предлагаю 2:

1) Использовать расширение класса Walker_Nav_Menu(). Документация здесь https://developer.wordpress.org/reference/classes/walker_nav_menu/. Рабочий пример:

<?php
wp_nav_menu(
    array(
        'container'=> false, 
        'theme_location' => 'primary',
        'walker' => new New_Walker_Nav_Menu()
    )
);

class New_Walker_Nav_Menu extends Walker_Nav_Menu {
    function start_lvl( &$output, $depth = 0, $args = null ) {
        $output .= '<div><ul>';
    }

    function end_lvl( &$output, $depth = 0, $args = null ) {
        $output .= "</ul></div>";
    }

    function start_el( &$output, $item, $depth = 0, $args = null, $id = 0 ) {
        if ( $depth === 0 ) {
            $output .= $indent . '<li>';
        } else {
            $output .= $indent . '<div><li>';
        }

        $atts           = array();
        $atts['title']  = ! empty( $item->attr_title ) ? $item->attr_title : '';
        $atts['target'] = ! empty( $item->target ) ? $item->target : '';
        if ( '_blank' === $item->target && empty( $item->xfn ) ) {
            $atts['rel'] = 'noopener noreferrer';
        } else {
            $atts['rel'] = $item->xfn;
        }
        $atts['href']         = ! empty( $item->url ) ? $item->url : '';
        $atts['aria-current'] = $item->current ? 'page' : '';

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

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

        $title = apply_filters( 'the_title', $item->title, $item->ID );
        $title = apply_filters( 'nav_menu_item_title', $title, $item, $args, $depth );

        $item_output  = $args->before;
        $item_output .= '<a' . $attributes . '>';
        $item_output .= $args->link_before . $title . $args->link_after;
        $item_output .= '</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 = null ) {
        if ( $depth === 0 ) {
            $output .= "</li>";
        } else {
            $output .= "</li></div>";
        }

    }
}
?>

2) Получить меню через wp_get_nav_menu_items() и сделать разметку, как хотите. Минусом будет то, что придется допиливать получение дочерних элементов для родительских элементов, если они есть. Пример:

<?php
$menu_name = 'primary';
if ( ( $locations = get_nav_menu_locations() ) && isset( $locations[ $menu_name ] ) ) {
    $menu = wp_get_nav_menu_object( $locations[ $menu_name ] );
    $menu_items = wp_get_nav_menu_items($menu->term_id);

    echo '<ul>';
    foreach ( $menu_items as $key => $menu_item ) {
        if ( $menu_item->menu_item_parent === 0 ) {
            echo '<li>'.$menu_item->title.'</li>';
        } else {
            echo '<div><li>'.$menu_item->title.'</li></div>';
        }

    }
    echo '</ul>';
} ?>

PS: Я думаю теперь не составит сложностей создать меню с любой версткой, даже невалидной.

1
  • Спасибо за помощь!
    – Proshka
    14 мая 2020 в 19:55

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.