snake-snake
@snake-snake
Начинающий PHP программист, Web-разработчик.

Криво отображается навигационное меню при подключении классов в functions.php, где у меня ошибка?

Это то как мне нужно в идеале вывести меню:
              <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav m-auto">
                  <li class="nav-item dropdown active">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Home<i class="fas fa-chevron-down fa-xs"></i></a>
                    <!-- Dropdown Menu -->
                    <ul class="dropdown-menu">
                      <li class="active"><a class="dropdown-item" href="index.html">Home 01</a></li>
                      <li><a class="dropdown-item" href="index-02.html">Home 02</a></li>
                      <li><a class="dropdown-item" href="index-03.html">Home 03</a></li>
                      <li><a class="dropdown-item" href="index-04.html">Home 04</a></li>
                      <li><a class="dropdown-item" href="index-05.html">Home 05</a></li>
                      <li><a class="dropdown-item" href="index-06.html">Home 06</a></li>
                    </ul>
                  </li>


Сейчас у меня так (header.php):

              <!-- Navbar START -->
              <div class="collapse navbar-collapse" id="navbarSupportedContent">
               
                        <?php
                        wp_nav_menu( [
                            'theme_location'  => 'main',
                            'menu'            => 'main',
                            'container'       => false,
                            'container_class' => '',
                            'container_id'    => '',
                            'menu_class'      => 'navbar-nav m-auto',
                            'menu_id'         => '',
                            'echo'            => true,
                            'fallback_cb'     => '',
                            'before'          => '',
                            'after'           => '',
                            'link_before'     => '',
                            'link_after'      => '',
                            'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
                            'depth'           => 2,
                            'walker'          => new Main_Walker_Nav_Menu(),
                            'add_li_class'    => ''
                        ] );

                        ?>

Сейчас у меня так (functions.php):
register_nav_menus(
    array(
        'main'    => __( 'Главное меню', '' ),
        'footer-info'    => __( 'Информация', '' ),
        'footer-menu'    => __( 'Меню сайта', '' ),
    )
);


add_filter( 'category_link', function($a){
    return str_replace( 'category/', '', $a );
}, 99 );

class Main_Walker_Nav_Menu extends Walker_Nav_Menu {
    /*
     * Позволяет перезаписать <ul class="sub-menu">
     */
    function start_lvl(&$output, $depth = 3, $args = array()) {
        /*
         * $depth – уровень вложенности, например 2,3 и т д
         */

        if($depth == 0){
            $output .= "<ul class=\"dropdown-menu\" role=\"menu\">";
        }

        if($depth == 1){
            $output .= "<ul class=\"dropdown-menu\" role=\"menu\">";
        }


    }
    /**
     * @see Walker::start_el()
     * @since 3.0.0
     *
     * @param string $output
     * @param object $item Объект элемента меню, подробнее ниже.
     * @param int $depth Уровень вложенности элемента меню.
     * @param object $args Параметры функции wp_nav_menu
     */


    function end_lvl( &$output, $depth = 3, $args = array()) {

        $output .= "</ul>";
    }
}


function add_class_to_all_menu_anchors( $atts ) {
    $atts['class'] = 'nav-item dropdown';
    $atts['data-toggle'] = '';

    return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_class_to_all_menu_anchors', 10 );

function menu_set_dropdown( $sorted_menu_items, $args ) {
    $last_top = 0;
    foreach ( $sorted_menu_items as $key => $obj ) {
        // it is a top lv item?
        if ( 0 == $obj->menu_item_parent ) {
            // set the key of the parent
            $last_top = $key;
        } else {
            $sorted_menu_items[$last_top]->classes['dropdown'] = 'nav-item dropdown';
        }
    }
    return $sorted_menu_items;
}
add_filter( 'wp_nav_menu_objects', 'menu_set_dropdown', 10, 2 );


add_filter(
    'nav_menu_link_attributes',
    function($atts, $item, $args, $depth) {
        // добавляем класс nav-link для элементов <a>
        $atts['class'] = 'nav-link dropdown-toggle';
        return $atts;
    },
    10,
    4
);
  • Вопрос задан
  • 83 просмотра
Пригласить эксперта
Ответы на вопрос 2
Psixodelik
@Psixodelik
Преподаватель на Hexlet
Посмотри в веб-инспекторе, что отличается от «эталонной» вёрстки
Ответ написан
snake-snake
@snake-snake Автор вопроса
Начинающий PHP программист, Web-разработчик.
Не могу выставить классы на вложенное меню, и что самое интересное вложенный
<ul class="dropdown-menu">
                      <li class="active"><a class="dropdown-item" href="index.html">Home 01</a></li>
                      <li><a class="dropdown-item" href="index-02.html">Home 02</a></li>
                      <li><a class="dropdown-item" href="index-03.html">Home 03</a></li>
                      <li><a class="dropdown-item" href="index-04.html">Home 04</a></li>
                      <li><a class="dropdown-item" href="index-05.html">Home 05</a></li>
                      <li><a class="dropdown-item" href="index-06.html">Home 06</a></li>
                    </ul>
                  </li>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы