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

Как мне смешать типы HTML-элементов для навигационной панели с двумя меню?

Я создаю тему WordPress с Bootstrap 4.

Содержимое меню WordPress должно извлекаться из параметров меню, выводиться в навигационной панели Bootstrap 4. Я использую этот специальный для Bootstrap 4 wp_nav_menu navwalker …

require_once get_template_directory() . '/inc/bs4navwalker.php';

… чтобы вывести основное меню текстовых ссылок навигации в виде ненумерованного списка, так как Бог задумал…

 <!-- Navbar https://getbootstrap.com/docs/4.1/components/navbar/ -->
 <nav class="navbar navbar-expand-md navbar-light"><!-- collapse at stated breakpoint -->
     <a class="navbar-brand" href="https://wordpress.stackexchange.com/questions/311941/<?php echo esc_url( home_url("https://wordpress.stackexchange.com/" ) ); ?>">
       <img src="https://www.example.com/logo.gif" height="30" class="d-inline-block align-top mr-1">
       <?php bloginfo( 'name' ); ?>
     </a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs4navbar" aria-controls="bs4navbar" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
     <?php
     wp_nav_menu([ // bs4navwalker menu generator
       'menu'            => 'primary', // имя меню WordPress
       'theme_location'  => 'primary',
       'depth'           => 2,
       // <nav>:
       // 'container'       => 'false',
       'container_id'    => 'bs4navbar',
       'container_class' => 'collapse navbar-collapse',
       // <ul>:
       'menu_id'         => false,
       'menu_class'      => 'navbar-nav ml-auto',
       // другое:
       'fallback_cb'     => 'bs4navwalker::fallback',
       'walker'          => new bs4navwalker()
     ]);
     ?>
     <button class="btn btn-outline-primary mx-3" type="submit">Кнопка</button>
     <button class="btn btn-primary ml-3" type="submit">Записаться</button>
 </nav>

Это работает отлично. Вывод…

<nav class="navbar navbar-expand-md navbar-light"><!-- collapse at stated breakpoint -->
     <a class="navbar-brand" href="http://www.example.com/">
       <img src="https://www.example.com/logo.gif" height="30" class="d-inline-block align-top mr-1">
              Песочница     </a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs4navbar" aria-controls="bs4navbar" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
     <div id="bs4navbar" class="collapse navbar-collapse">
       <ul id="menu-my-menu" class="navbar-nav ml-auto">
         <li id="menu-item-3" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-3 nav-item mx-3 active"><a title="Главная страница" href="http://sandbox.contexthq.com/" class="nav-link active" aria-expanded="false"><i class="icon-speedometer"></i>Главная</a></li>
         <li id="menu-item-4" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4 nav-item mx-3"><a title="Пример страницы" href="http://example.com/" class="nav-link" aria-expanded="false"><i class="ti-layout-grid2"></i>Тренды</a></li>
         <li id="menu-item-5" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-5 nav-item mx-3"><a title="Пользовательская страница" href="http://example.com/custom/" class="nav-link" aria-expanded="false"><i class="ti-palette"></i>Пользовательская</a></li>
         <li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14 nav-item mx-3"><a href="#" class="nav-link" aria-expanded="false">Стратегия</a></li>
       </ul>
     </div>
     <button class="btn btn-outline-primary mx-3" type="submit">Кнопка</button>
     <button class="btn btn-primary ml-3" type="submit">Записаться</button>
 </nav>

Тем не менее, вы увидите часть, в которой я вручную вставил два <button> элемента. Вместо жесткого кода я хочу, чтобы они генерировались динамически из меню WordPress, так же как и меню primary.

Я создал второе меню WordPress, buttons. Вот здесь я разбираюсь…

Я могу вставить второй вызов wp_nav_menu для buttons, сразу после первого для primary…

 <?php
 wp_nav_menu([ // генератор меню bs4navwalker
   'menu'            => 'buttons', // имя меню WordPress
   'theme_location'  => 'buttons',
   'depth'           => 2,
   // <nav>:
   // 'container'       => 'false',
   'container_id'    => 'bs4navbar',
   'container_class' => 'collapse navbar-collapse',
   // <ul>:
   'menu_id'         => false,
   'menu_class'      => 'navbar-nav ml-auto',
   // другое:
   'fallback_cb'     => 'bs4navwalker::fallback',
   'walker'          => new bs4navwalker()
 ]);
 ?>

… и элементы меню будут вставлены в нужное место.

Проблема в том, что эти элементы – <li> внутри <ul>, так же как и меню primary…

Я предполагаю, что bs4navwalker настроен на вывод всех элементов wp_nav_menu как элементов списка, или, может быть, это дело WordPress.

Как я могу сделать так, чтобы элементы из второго меню, buttons, выводились с использованием другой HTML-структуры, вместо этого как элементы <button>?

Следующее решение, хотя и требует дополнительной обработки PHP…

 <?php

 $options =  array(
     'echo'              => false,
     'theme_location'    => 'buttons',
     'items_wrap'        => '%3$s',
     'menu_class'        => false,
     'menu_id'           => false,
     'container'         => 'false',
     'container_class'   => false,
     'container_id'      => false,
     'before'            => '<button class="btn btn-primary mx-3 d-none d-md-block" type="submit">',
     'after'             => '</button>'
 );

 $menu = wp_nav_menu($options);

 $output = strip_tags($menu, '<button>');

 echo preg_replace('/btn-primary/', 'btn-outline-primary', $output, 1);

 ?>

Это включает в себя:

• Удаление <ul>
• Не создание контейнеров
• Оборачивание каждого элемента в тег <button>
• Подавление вывода
• Удаление всех тегов (т.е. <li>), за исключением <button>)
• В последней части замена первого экземпляра класса btn-primary на btn-outline-primary, чтобы сохранить кнопки двух цветов.

Вот вывод…

<button class="btn btn-outline-primary mx-3 d-none d-md-block" type="submit">Кнопка</button>
<button class="btn btn-primary mx-3 d-none d-md-block" type="submit">Узнать больше</button>

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

Есть ли способ сделать так, чтобы эти классы появлялись в элементе навигации, вместо использования preg_replace, или этот метод не поддержит это?