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…
<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 buttons
zaraz 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.
Problem w tym, że są to przedmioty <li>
s wewnątrz a <ul>
podobnie jak primary
menu…
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, buttons
uzyskaj dane wyjściowe przy użyciu innej konstrukcji HTML, np <button>
zamiast elementów?