So integrieren Sie die Bootstrap-Navigationsleiste in das WordPress-Theme

Wollten Sie schon immer Ihren Theme-Entwicklungsprozess beschleunigen? Ich denke, die Antwort lautet „Ja“, und Sie kennen Bootstrap bereits und entwickeln es in Ihren Modellen. Da stellt sich die Frage: „Wie integriere ich Bootstrap-Komponenten in ein WordPress-Theme?“

Diese Tutorialreihe zeigt Ihnen, wie Sie die beliebtesten Bootstrap-Komponenten in Ihr WordPress-Theme integrieren. Beginnen wir mit der Navbar-Komponente, die es einfach macht, eine responsive Navigationsleiste zu erstellen. Damit dieses Tutorial leicht verständlich ist, verwende ich eine Navigationsleiste, die nur das Logo und das Menü enthält.

---

1. Verwenden Sie das Bootstrap-Framework, um die Navigationsleiste zu schreiben

Das Folgende ist der Quellcode der Bootstrap-Dokumentationsseite:

<nav class="navbar navbar-default" role="navigation"> 
<!-- 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-ex1-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="#">Brand</a> 
  </div> 
  <!-- Collect the nav links, forms, and other content for toggling --> 
  <div class="collapse navbar-collapse navbar-ex1-collapse"> 
    <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 <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
          <li><a href="#">Action</a></li> 
          <li><a href="#">Another action</a></li> 
          <li><a href="#">Something else here</a></li> 
          <li><a href="#">Separated link</a></li> 
          <li><a href="#">One more separated link</a></li> 
        </ul> 
      </li> 
    </ul>
  </div>
</nav>

Schauen wir uns den Code genauer an und klären ein paar Dinge, um den nächsten Teil dieses Tutorials besser zu verstehen.

<nav role="navigation">…</nav>

Wrapper – Ein -Tag mit der Klasse „navbar“ und der Rolle „navigation“, das den gesamten Inhalt der Navigationsleiste umschließt. <nav></nav>

<div class="navbar-header">…</div>

Header – Ein mit der Klasse „navbar-header“, sichtbar auf jeder Bildschirmgröße. <div> <pre class="brush:php;toolbal:false;">&lt;button class=&quot;navbar-toggle&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;.navbar-ex1-collapse&quot;&gt;…&lt;/button&gt; </pre> <p>Schaltfläche umschalten<em> – </em> stellt minimierten Inhalt auf kleinen Bildschirmen dar; diese Schaltfläche ist erforderlich, aber Sie können den darin enthaltenen Inhalt ändern. <code><button></button>

<a class="navbar-brand" href="#">Brand</a>

Marke – Ein Link mit Ihrem Logo; er ist optional und Sie können ihn hier weglassen und an anderer Stelle einfügen.

<div class="collapse navbar-collapse navbar-ex1-collapse">…</div>

Zusammenklappbarer Inhalt - mit der Klasse „collapse“ und „navbar-collapse“ enthält alle Inhalte, die auf kleinen Bildschirmen minimiert werden sollen. <div> <pre class="brush:php;toolbal:false;">&lt;ul class=&quot;nav navbar-nav&quot;&gt;…&lt;/ul&gt; </pre> <p>Menü<em> – Ein </em> mit der Klasse „nav navbar-nav“, das die Site-Navigation darstellt. <code><ul></ul>

---

2.Integrieren Sie das Modell in die Vorlage

Bei diesem Schritt wird davon ausgegangen, dass Sie WordPress installiert haben und das von Ihnen entwickelte Theme aktiviert ist.

2.1. Bereiten Sie ein Thema für Ihr Menü vor

Öffnen Sie Ihre Datei

functions.php und registrieren Sie Ihre Navigation, falls Sie dies noch nicht getan haben.

<?php
/* Theme setup */
add_action( 'after_setup_theme', 'wpt_setup' );
    if ( ! function_exists( 'wpt_setup' ) ):
        function wpt_setup() {	
            register_nav_menu( 'primary', __( 'Primary navigation', 'wptuts' ) );
        } endif;
?>

Registrieren Sie Bootstrap und jQuery:

function wpt_register_js() {
	wp_register_script('jquery.bootstrap.min', get_template_directory_uri() . '/js/bootstrap.min.js', 'jquery');
	wp_enqueue_script('jquery.bootstrap.min');
}
add_action( 'init', 'wpt_register_js' );
function wpt_register_css() {
	wp_register_style( 'bootstrap.min', get_template_directory_uri() . '/css/bootstrap.min.css' );
	wp_enqueue_style( 'bootstrap.min' );
}
add_action( 'wp_enqueue_scripts', 'wpt_register_css' );

Laden Sie Edward McIntyres

-Klasse von GitHub herunter. Platzieren Sie die Datei im Theme-Stammordner. Gehen Sie zurück zu Ihrer wp-bootstrap-navwalkerfunctions.php und fügen Sie den folgenden Code ein:

<?php // Register custom navigation walker
	require_once('wp_bootstrap_navwalker.php');
?>

2.2. Erstellen Sie ein Menü im Backend

Navigieren Sie zu Ihrem WordPress-Website-Backend

Darstellung->Menü. Erstellen Sie ein neues Menü mit dem Namen „Primär“ und fügen Sie ihm Elemente hinzu. Gehen Sie zur Registerkarte Standorte verwalten und weisen Sie das Menü „Haupt“ dem Themenstandort mit dem Namen „Haupt“ zu. Änderungen speichern.

Wordpress-Menüverwaltungsseite

2.3. Integrieren Sie das Navigationsleistenmodell in die Vorlage

Öffnen Sie Ihre

header.php, kopieren Sie das Navigationsleistenmodell und fügen Sie es dort ein, wo es angezeigt werden soll. Ersetzen wir nun einen Teil des Modells durch die Template-Funktionalität von WordPress. Beginnen Sie damit, den richtigen Link zu Ihrem Logo zu platzieren. Ändern Sie diese Zeile:

<a class="navbar-brand" href="#">Brand</a>

An:

<a class="navbar-brand" href="<?php bloginfo('url')?>"><?php bloginfo('name')?></a>

Der nächste Schritt besteht darin, das Menü anstelle des Modellmenüs aus dem Backend auszugeben. Für diese Zeilen:

<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 <b class="caret"></b></a>
		<ul class="dropdown-menu">
			<li><a href="#">Action</a></li>
			<li><a href="#">Another action</a></li>
			<li><a href="#">Something else here</a></li>
			<li><a href="#">Separated link</a></li>
			<li><a href="#">One more separated link</a></li>
		</ul>
	</li>
</ul>

mit:

<?php /* Primary navigation */ 
wp_nav_menu( array(
  'menu' => 'top_menu',
  'depth' => 2,
  'container' => false,
  'menu_class' => 'nav',
  //Process nav menu using our custom nav walker
  'walker' => new wp_bootstrap_navwalker())
);
?>

Jetzt haben Sie die Bootstrap-Navigationsleistenkomponente in Ihr Theme integriert.

---

Fazit

In diesem Tutorial haben wir uns angeschaut, wie man eine mit dem Bootstrap-CSS-Framework erstellte Navigationsleiste in ein WordPress-Theme integriert. Um die Theme-Entwicklung zu beschleunigen, können Sie einfach die Quelldateien herunterladen und in Ihr Theme einfügen.

Auf Envato Market finden Sie auch einige tolle Bootstrap-Themen und -Vorlagen, wie zum Beispiel die Neon Bootstrap Admin-Vorlage oder die Selphy Electronics E-Commerce Boostrap-Vorlage.