Konvertieren Bootstrap navbar zu WordPress-Menü
Ich weiß, es gibt eine Menge Themen über diese im Netz, aber ich finde Sie sehr kompliziert. Grundsätzlich möchte ich zu konvertieren ein Bootstrap-navigation-Menü, um eine WordPress-Menü.
Sagen, ich habe das default-Bootstrap Navbar:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Den Weg würde ich normalerweise einen link auf diese navbar mit meiner WordPress-Seiten wird anstatt manuell auflisten jedes <li>
würde ich Folgendes verwenden:
<ul class="nav navbar-nav">
<?php wp_list_pages('title_li=');?>
</ul>
Den Ausgang dieser Liste würde alle meine Seiten, die ich erstellt in WordPress:
<ul class="nav navbar-nav">
<li class="page_item page-item-9"><a href="...">About</a></li>
<li class="page_item page-item-2"><a href="...">Sample Page</a></li>
</ul>
Dies ist alles in Ordnung, wie kann ich eine Seite hinzufügen und es wird aufgenommen in meinem Menü als erwartet.
Das problem
Das problem ist, ich weiß nicht, wie ein dropdown-Element in der Menüleiste aus und integrieren in WordPress, zum Beispiel die dropdown-Element:
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
Wie würde ich integrieren diese mit WordPress-also das nächste mal, wenn ich will hinzufügen, um eine neue dropdown-Liste kann ich leicht tun es die gleiche Weise wie die normalen Menüpunkte?
Ich würde es schätzen, wenn Sie nicht links zu den WordPress-codex-websites und andere tutorials wie ich haben schon viele Dinge versucht
Du musst angemeldet sein, um einen Kommentar abzugeben.
Müssen Sie diese https://github.com/twittem/wp-bootstrap-navwalker , fügen Sie die nav-walker-Datei und Folgen Sie den Anweisungen. Hier ist ein Beispiel aus einer zufälligen Website die ich gemacht habe, ich bin nicht die Anpassung an Ihre eigene Website, denn Sie müssen lernen, diese für alle Ihre zukünftigen WP Entwicklungen. Es ist unglaublich leicht, überprüfen Sie es heraus:
Wie Sie vielleicht bemerkt haben, im Grunde haben Sie zu ersetzen, was nach deinem code ist
mit
und voila
'container_id' => 'bs-example-navbar-collapse-1'
Können Sie ersetzen die ul-element innerhalb des div des Klasse collapse navbar-collapse mit wp_nave_menu als Beispiel Folgen.