corasao
@corasao
Начинающий web разработчик

Как кнопку поместить в меню Wordpress?

Есть вот такое меню.
На мобильном оно должно превратиться в меню такого плана.
То есть кнопка должна с ПК меню упасть в мобильное меню.
Как можно одну и ту же кнопку перенести с одного места в другое?
Как вариант я создал еще одну кнопку, которая скрыта в ПК меню, а на мобильной версии я ее открываю, а ту кнопку что была на ПК версии наоборот, скрываю.
Но тогда я не знаю как внести ее в wp_nav_menu() не используя при этом дополнительных оберток в HTML.
Структура меню в html
<nav class="menu">
        <a class="logo" href="#">
          <img class="logo__img" src="images/logo.svg" alt="#">
        </a>
        <ul class="menu__list">
          <li class="menu__item"><a class="menu__link" href="#">Програма</a></li>
          <li class="menu__item"><a class="menu__link" href="#">Вчителі</a></li>
          <li class="menu__item"><a class="menu__link" href="#">Про нас</a></li>
          <li class="menu__item"><a class="menu__link" href="#">Контакти</a></li>
          <li class="menu__item-btn"><a class="menu__link-btn" href="#">Хочу на екскурсію</a></li>//кнопка для мобильных версий, которую я скрываю для ПК
        </ul>
        <a class="header__address" href="https://goo.gl/maps/YTkkBgwy7EifHfhG8" target="_blank">Коріатовичів 47а</a>
        <a class="header__phone" href="tel:096 042 99 25">096 042 99 25</a>
        <a class="header__btn btn" href="#">Хочу на екскурсію</a> //кнопка для ПК версии, которую я скрываю для мобильных
        <button class="mobile__btn" type="button"></button> // кнопка открытия мобильного меню, можно игнорировать
      </nav>

Как вариант можно
<a class="menu__link-btn" href="#">Хочу на екскурсію</a>
вынести за <ul class="menu__list"> и потом обернуть в дополнительный div <ul class="menu__list"> и <a class="menu__link-btn">.
И тогда внутри этого div указать
<?php wp_nav_menu(array(
            'theme_location'  => 'header_menu',
            'container'       => null,
            'menu_class'      => 'menu__list',
            'menu_id'         => 'menu__list',
          ));?>
<a class="menu__link-btn" href="#">Хочу на екскурсію</a>

и все будет работать как я хочу.
Но есть предчувствие, что это далеко не лучшее решение.

Подытожим.
1. Идеально - использовать одну и ту же кнопку как для ПК так и для мобильной версии
2. Без дополнительных оберток добавить wp_nav_menu() еще одну li с кнопкой (Хочу на екскурсію)
3. Уверен, есть еще какой-то вариант, который будет самым лучшим и самым оптимальным.
  • Вопрос задан
  • 30 просмотров
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы