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

Question

[corasao]

Есть вот такое меню.
На мобильном оно должно превратиться в меню такого плана.
То есть кнопка должна с ПК меню упасть в мобильное меню.
Как можно одну и ту же кнопку перенести с одного места в другое?
Как вариант я создал еще одну кнопку, которая скрыта в ПК меню, а на мобильной версии я ее открываю, а ту кнопку что была на ПК версии наоборот, скрываю.
Но тогда я не знаю как внести ее в 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:[phone]">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. Уверен, есть еще какой-то вариант, который будет самым лучшим и самым оптимальным.

Comments

[Владимир Брумер]

Приветствую. Вы можете использовать функцию wp_is_mobile() + фильтр wp_nav_menu_items.

Пример

меню + итем после меню, если не мобила

wp_nav_menu(array('theme_location'=>'header_menu','container'=>'div','container_id'=>'menu','container_class'=>'menu','menu_class'=>'menu_class'));

if(! wp_is_mobile()){ //если не мобила
// кнопка 
}

добавляем итем в меню если мобила

add_filter( 'wp_nav_menu_items', 'change_nav_menu_items', 10, 2 );

function change_nav_menu_items( $items, $args ) {
	if ( 'header_menu' == $args->theme_location && wp_is_mobile() ) {
		$items .= '<li>' . кнопка . '</li>';
	}
	return $items;
}

Сама кнопка может быть описана в глобальной переменной или классом или функцией, а затем вызываться в нужном месте...

Например:

if(wp_is_mobile()){
echo Menu::Ret();
}
wp_nav_menu(array('theme_location'=>'osnova','container'=>'div','container_id'=>'menu','container_class'=>'menu','menu_class'=>'menu_class'));

где Menu::Ret() - это класс, который возвращает SVG с какой-то разметкой

как пример получаем

ПК:



Мобила (а само меню доступно по развороту):

[Антон Литвиненко]

Можно и дублировать, можно джаваскриптом перенести

[corasao]

Владимир Брумер, большое спасибо!

Добавил кнопку в мобильное меню с помощью фильта, что вы предложили

add_filter( 'wp_nav_menu_items', 'change_nav_menu_items', 10, 2 );

function change_nav_menu_items( $items, $args ) {
  if ( 'header_menu' == $args->theme_location && wp_is_mobile() ) {
    $items .= '<li>' . кнопка . '</li>';
  }
  return $items;
}

Этого оказалось достаточно.
А скриваю кнопку для мобильного в ПК версии/скрываю кнопку для ПК в мобильной версии/кнопку для мобильной версии включаю в мобильной версии - это все делаю с помощью css/html.
Не знаю на сколько это верно. Но так как в html и css на данный момент я разбираюсь намного лучше нежели в php и js - большинство таких задач решаю с помощью именно html и css. Может это и не лучшее решение, но работает)