WordPress

Jak używać elementów przycisków dla elementów menu tgetWordPress?

  • 20 sierpnia, 2018
  • 4 min read
Jak używać elementów przycisków dla elementów menu tgetWordPress?


Jak mieszać typy elementów HTML dla paska nawigacyjnego z dwoma menu?

Buduję motyw WordPress z Bootstrap 4.

Zawartość menu WordPressa powinna pochodzić z opcji menu i być wyświetlana na pasku nawigacyjnym Bootstrap 4. Używam tego specyficznego dla Bootstrap 4 wp_nav_menu nawigator…

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

… aby wyświetlić główne menu linków tekstowych nawigacji jako nieuporządkowaną listę, tak jak Bóg zamierzył …

 <!-- Navbar  -->
 <nav class="navbar navbar-expand-md navbar-light"><!-- collapse at stated breakpoint -->
     <a class="navbar-brand" href=" echo esc_url( home_url(" ) ); ?>">
       <img src=" 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', // name of wordpress menu
       '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',
       // other:
       'fallback_cb'     => 'bs4navwalker::fallback',
       'walker'          => new bs4navwalker()
     ]);
     ?>
     <button class="btn btn-outline-primary mx-3" type="submit">Button</button>
     <button class="btn btn-primary ml-3" type="submit">Sign up</button>
 </nav>

To działa dobrze. Wyjście jest…

Warto przeczytać!  Jak znaleźć błąd wtyczek?

wprowadź tutaj opis obrazu

<nav class="navbar navbar-expand-md navbar-light"><!-- collapse at stated breakpoint -->
     <a class="navbar-brand" href="
       <img src=" height="30" class="d-inline-block align-top mr-1">
              Sandbox     </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="Home Page" href=" class="nav-link active" aria-expanded="false"><i class="icon-speedometer"></i>Home</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="Example Page" href=" class="nav-link" aria-expanded="false"><i class="ti-layout-grid2"></i>Trends</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="Custom Page" href=" class="nav-link" aria-expanded="false"><i class="ti-palette"></i>Custom</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">Strategy</a></li>
       </ul>
     </div>
     <button class="btn btn-outline-primary mx-3" type="submit">Button</button>
     <button class="btn btn-primary ml-3" type="submit">Sign up</button>
 </nav>

Zobaczysz jednak fragment, w którym ręcznie wstawiłem dwa <button> elementy. Zamiast twardego kodowania, chcę, aby były one generowane dynamicznie z menu WordPress, tak jak w przypadku primary menu.

Zrobiłem drugie menu WordPress, buttons. Tu się załamuję…

Mogę wstawić sekundę wp_nav_menu zadzwonić po buttonszaraz po pierwszym dla primary

 <?php
 wp_nav_menu([ // bs4navwalker menu generator
   'menu'            => 'buttons', // name of wordpress menu
   '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',
   // other:
   'fallback_cb'     => 'bs4navwalker::fallback',
   'walker'          => new bs4navwalker()
 ]);
 ?>

… a pozycje menu zostaną wstawione we właściwe miejsce.

Warto przeczytać!  Jak wyłączyć emotikony w WordPress (krok po kroku)

Problem w tym, że są to przedmioty <li>s wewnątrz a <ul>podobnie jak primary menu…

wprowadź tutaj opis obrazu

Zakładam, że bs4navwalker jest skonfigurowany do wyświetlania wszystkich wp_nav_menu items jako elementy listy, a może to robi WordPress.

Jak mogę dopilnować, aby pozycje z drugiego menu, buttonsuzyskaj dane wyjściowe przy użyciu innej konstrukcji HTML, np <button> zamiast elementów?


Źródło