it-swarm.com.de

Konvertieren Sie die Bootstrap-Navbar in das WordPress-Menü

Ich weiß, dass es im Internet viele Themen zu diesem Thema gibt, aber ich finde sie sehr kompliziert. Grundsätzlich möchte ich ein Bootstrap-Navigationsmenü in ein WordPress-Menü konvertieren.

Angenommen, ich habe die Standard-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>

Normalerweise würde ich diese Navbar normalerweise mit meinen WordPress-Seiten verknüpfen, anstatt jeden <li> manuell aufzulisten. Ich würde Folgendes verwenden:

    <ul class="nav navbar-nav">
     <?php wp_list_pages('title_li=');?>
     </ul>

Die Ausgabe davon würde alle meine Seiten auflisten, die ich in WordPress erstellt habe:

 <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, da ich eine Seite hinzufügen kann und sie wie erwartet in mein Menü aufgenommen wird.

Das Problem

Das Problem ist, dass ich nicht weiß, wie man ein Dropdown-Element in die Menüleiste einfügt und dieses in WordPress integriert, beispielsweise das 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 das in WordPress integrieren? Wenn ich also beim nächsten Mal eine neue Dropdown-Liste hinzufügen möchte, kann ich dies ganz einfach wie die normalen Menüpunkte tun.

Ich würde es begrüßen, wenn Sie keine Links zu WordPress-Codex-Websites und anderen Tutorials bereitstellen, da ich bereits viele Dinge ausprobiert habe

10
user3574492

Sie müssen dieses https://github.com/twittem/wp-bootstrap-navwalker verwenden, die Navi-Walker-Datei hinzufügen und den Anweisungen folgen. Hier ist ein Beispiel einer zufälligen Website, die ich erstellt habe. Ich passe diese nicht an Ihre eigene Website an, da Sie dies für all Ihre zukünftigen WP Entwicklungen lernen müssen. Es ist unglaublich einfach, check it out:

    <div id="nav">
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <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="<?php bloginfo('url'); ?>"><img class="logo" src="<?php bloginfo('template_directory'); ?>/images/logo.png" alt="" /></a>
        </div>


        <?php
        wp_nav_menu( array(
                'menu'              => 'primary',
                'depth'             => 2,
                'container'         => 'div',
                'container_class'   => 'navbar-collapse collapse',
                'menu_class'        => 'nav navbar-nav',
                'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                'walker'            => new wp_bootstrap_navwalker())
            );
        ?>
      </div><!-- /.container-fluid -->
    </nav>
</div><!-- #nav -->

Wie Sie vielleicht schon bemerkt haben, müssen Sie im Wesentlichen ersetzen, was hinter Ihrem Code steht 

 <!-- Collect the nav links, forms, and other content for toggling -->

mit 

<?php
    wp_nav_menu( array(
            'menu'              => 'primary',
            'depth'             => 2,
            'container'         => 'div',
            'container_class'   => 'navbar-collapse collapse',
            'menu_class'        => 'nav navbar-nav',
            'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
            'walker'            => new wp_bootstrap_navwalker())
        );
    ?>

und voila

18
Devin

Sie können das ul -Element im div von class collapse navbar-collapse durch wp_nav_menu ersetzen, wie im folgenden Beispiel.

                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <?php wp_nav_menu(
                        array(
                            'theme_location' => 'primary',
                            'container' => false,
                            'menu_class' => 'nav navbar-nav navbar-right'))
                    ?>
                </div>