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

InformationsquelleAutor user3574492 | 2014-08-15
Schreibe einen Kommentar