WordPress добавить класс active в меню

Question

Как сделать правильный вывод меню со своей стилизацией в 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?

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

Answer 1

Правильно для кастомизации меню использовать 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 '';
}

Answer 2

Как и сказал предыдущий пользователь, правильно использовать 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 );
}

БЛОГ НА HUSL

WordPress добавить класс active в меню

Ответы (2 шт):