Добавьте выпадающее меню, используя “add_filter => wp_nav_menu_items”

Мой проект: WordPress, Woocommerce, Bootstrap 4, bs4navwalker

Моя проблема: пользовательский элемент выпадающего списка, добавленный фильтром WP. У меня есть одна навигационная панель, 3 различных меню внутри (используя bs4navwalker), значок для корзины и форма поиска. Смотрите код.

Я использую фильтр (add_filter( ‘wp_nav_menu_items’,) для добавления деталей логина, логаута и моего аккаунта в навигационную панель, все в порядке, но я хотел бы добавить эти элементы внутрь выпадающего списка. Фильтр просто создает один или два дополнительных элемента в меню ‘пользователь’.

Я понимаю, что это происходит, потому что я добавляю <li>, но я не смог понять, как добавить весь код, необходимый bootstrap для управления выпадающим списком.

Это возможно?

front-page.php КОД

<div class="nav-custom">
  <div class="container">

      <nav class="navbar-nav navbar-toggleable-sm navbar-inverse">

        <a class="navbar-brand" href="<?php echo get_home_url(); ?>">
              <img src="<?php bloginfo('template_url'); ?>/img/logo.png" class="d-inline-block align-top" alt="">
        </a>

           <?php
           wp_nav_menu([
             'menu'            => 'top',
             'theme_location'  => 'top',
             'container'       => false,
             'container_id'    => 'bs4navbar',
             'container_class' => 'collapse navbar-collapse',
             'menu_id'         => false,
             'menu_class'      => 'navbar-nav mr-auto no-md-view',
             'depth'           => 2,
             'fallback_cb'     => 'bs4navwalker::fallback',
             'walker'          => new bs4navwalker()
           ]);

          ?>

        <!-- Форма поиска -->
        <?php get_product_search_form(); ?>

        <!-- Пользовательское меню -->
        <?php 
          wp_nav_menu([
           'menu'            => 'user',
           'theme_location'  => 'user',
           'container'       => false,
           //'container_id'    => 'bs4navbar',
           //'container_class' => 'collapse navbar-collapse',
           'menu_id'         => false,
           'menu_class'      => 'navbar-nav mr-auto no-md-view',
           'depth'           => 2,
           'fallback_cb'     => 'bs4navwalker::fallback',
           'walker'          => new bs4navwalker()
         ]);
        ?>

        <!-- Меню корзины -->
        <?php 
          wp_nav_menu([
           'menu'            => 'Cart',
           'theme_location'  => 'Cart',
           'container'       => false,
           //'container_id'    => 'bs4navbar',
           //'container_class' => 'collapse navbar-collapse',
           'menu_id'         => false,
           'menu_class'      => 'navbar-nav mr-auto',
           'depth'           => 2,
           'fallback_cb'     => 'bs4navwalker::fallback',
           'walker'          => new bs4navwalker()
         ]);
        ?>
                <!-- код для значка НАЧАЛО -->
        <?php
        if ( WC()->cart->get_cart_contents_count() !== 0 ) {
          ?>  
          <span class="badge badge-pill badge-warning no-md-view">
            <a class="cart-customlocation" href="<?php echo wc_get_cart_url(); ?>" title="<?php _e( 'Просмотреть свою корзину' ); ?>"><?php echo sprintf ( _n( '%d товар', '%d товаров', WC()->cart->get_cart_contents_count() ), WC()->cart->get_cart_contents_count() ); ?></a>
          <?php 
        }
        ?>

        </span>
    </nav>

  </div>
</div>

functions.php КОД

<?php

add_filter( 'wp_nav_menu_items', 'my_account_loginout_link', 10, 2 );
/**
 * Добавить WooCommerce Мой аккаунт Логин/Логаут в меню
 * 
 * @see https://support.woothemes.com/hc/en-us/articles/203106357-Add-Login-Logout-Links-To-The-Custom-Primary-Menu-Area
 */
function my_account_loginout_link( $items, $args ) {
    if (is_user_logged_in() && $args->theme_location == 'user') { //измените расположение меню темы на ваше

        $items .= '                 
                    <li><a class="nav-link" href="' . get_permalink( wc_get_page_id( 'myaccount' ) ) . '">Мои Данные</a></li>
                    <li><a class="nav-link" href="'. wp_logout_url( get_home_url() ) .'">Выйти</a></li>
                    '; //измените ссылку выхода, здесь она ведет на 'shop', вы можете изменить её на 'myaccount'
    }
    elseif (!is_user_logged_in()  && $args->theme_location == 'user') {//измените расположение меню темы на ваше

        $items .= '<li><a class="nav-link" href="' . get_permalink( wc_get_page_id( 'myaccount' ) ) . '">Войти</a></li>';
    }
    return $items;
}

Результат

Как вы можете видеть, элемент был добавлен в мое пользовательское меню (иконка пользователя + Войти), но не как выпадающий список.

Я думаю, это сделает то, что вы хотите добиться. В основном, таким образом вы подключаетесь до генерации HTML, чтобы добавить свои элементы меню. У меня пока не было возможности это протестировать, но это должно сработать.

ИЗМЕНЕНИЕ: Поскольку вы хотите, чтобы это было под выпадающим списком, вам нужно установить menu_item_parent. Если элемент меню с иконкой пользователя будет статичным, вы можете взять ID элемента меню, посмотрев исходный код этого элемента меню и взяв число, которое идет после menu-item- в ID.

Например, в этом случае 103191 является ID элемента меню (обратите внимание, что это не то же самое, что объект/пост/страница/CPT и т.д., на который указывает элемент меню).

function my_account_loginout_link( $items, $menu, $args ) {
    if ( $args->theme_location !== 'user' ) {
        return $items;
    }

    if ( is_user_logged_in() ) {
        $added_menu_items = array(
            array(
                'title' => 'Мои Данные',
                'url' => get_permalink( wc_get_page_id( 'myaccount' ) )
            ),
            array(
                'title' => 'Выйти',
                'url' => wp_logout_url( get_home_url() )
            )
        );
    } else {
        $added_menu_items = array(
            array(
                'title' => 'Войти',
                'url' => get_permalink( wc_get_page_id( 'myaccount' ) )
            )
        );
    }

    $parent_menu_id = 103191;
    $menu_order = count( $items ) + 1;
    foreach ( $added_menu_items as $added_item ) {
        $nav_menu_item = new stdClass;
        $nav_menu_item->menu_item_parent = $parent_menu_id;
        $nav_menu_item->url = $added_item['url'];
        $nav_menu_item->title = $added_item['title'];
        $nav_menu_item->menu_order = $menu_order;
        $items[] = $nav_menu_item;
        $menu_order++;
    }
    return $items;
}
add_filter( 'wp_get_nav_menu_items', 'my_account_loginout_link', 10, 3 );

Адаптировано от:

• https://teleogistic.net/2013/02/11/dynamically-add-items-to-a-wp_nav_menu-list/
• http://www.daggerhart.com/dynamically-add-item-to-wordpress-menus/