0

Как сделать правильный вывод меню со своей стилизацией в WordPress?

Вот пример, который я уже сделал:

                <?php
                  $menu_name = 'menu-1';
                  $locations = get_nav_menu_locations();
                  $menu = wp_get_nav_menu_object( $locations[ $menu_name ] );
                  $menuitems = wp_get_nav_menu_items( $menu->term_id, array( 'order' => 'DESC' ) );
                ?>

                <ul class="nav flex-column ml-n3 RO sidebar-menu overflow-hidden text-uppercase">
                    <?php
                    $count = 0;
                    $submenu = false;

                    foreach( $menuitems as $item ):

                        $link = $item->url;
                        $description = $item->description;
                        $title = $item->title;
                        // item does not have a parent so menu_item_parent equals 0 (false)
                        if ( !$item->menu_item_parent ):

                        // save this id for later comparison with sub-menu items
                        $parent_id = $item->ID;
                    ?>

                    <li class="nav-item ">
                        <a href="<?php echo $link; ?>" class="nav-link pt-4 d-flex">
                          <div class="num pr-xl-5 pr-lg-4 pr-md-3 pr-2 animate__animated animate__backInLeft"> <?php echo $description ?> </div>
                          <div class="menutitle ml-xl-4 ml-1 animate__animated animate__backInRight"> <?php echo $title; ?> </div> 
                        </a>
                    <?php endif; ?>

                    <?php $count++; endforeach; ?>

                </ul>

Меню показывается, но как добавить возможность добавить класс active в li?

Вот так выглядит:

введите сюда описание изображения

2 ответа 2

0

Правильно для кастомизации меню использовать Walker_Nav_Menu{}, в вашем случаю подойдет небольшая функция проверки.

function check_active_menu( $menu_item ) {
    $actual_link = ( isset( $_SERVER['HTTPS'] ) ? "https" : "http" ) . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
    if ( $actual_link == $menu_item->url ) {
        return 'active';
    }
    return '';
}
1
  • 1
    Ответы надо давать такие, которые можно использовать. В вашем ответе смысла ноль - как цеплять эту функцию и куда? Кроме того, не надо предлагать автору менять весь код ради Walker. Найдите хуки для добавления класса в меню и дайте код проверки url в этом хуке. Тогда ваш ответ будет полезен. 14 дек 2020 в 8:12
0

Как и сказал предыдущий пользователь, правильно использовать Walker_Nav_Menu для кастомизации, но я так предполагаю, что active Вам может понадобиться и на остальных меню (либо по каким-то другим причинам Вам не хочется или не можется создавать новый Walker), поэтому это вполне можно это сделать через хук nav_menu_css_class, например заменим current-menu-item, current-menu-parent, current-menu-ancestor на active:

add_filter( 'nav_menu_css_class', 'change_menu_classes', 10, 4 );

function change_menu_classes( $classes, $item, $args, $depth ) {
    return str_replace( array( 'current-menu-item', 'current-menu-parent', 'current-menu-ancestor' ), 'active', $classes );
}

Ваш ответ

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

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