So erstellen Sie ein responsives WordPress-Menü mit Bootstrap Nav Walker

Suchen Sie nach einer Möglichkeit, mit einem responsiven Navigationsmenü mit Bootstrap zu beginnen? Während es wahrscheinlich ein Plugin dafür gibt, haben wir einen schnellen Code-Schnipsel erstellt, den Sie verwenden können, um ein responsives WordPress-Menü mit dem Bootstrap Nav Walker in WordPress vollständig zu erstellen.

Anweisungen:

Zuerst müssen Sie die Datei wp_bootstrap_navwalker.php von hier herunterladen und in den Ordner wp-content/themes/your-theme hochladen.

Danach müssen Sie diesen Code zur functions.php-Datei Ihres Themes oder in ein seitenspezifisches Plugin einfügen:

// Register Custom Navigation Walker for function.php
require_once('wp_bootstrap_navwalker.php');

Als Nächstes müssen Sie ein Bootstrap-Menü erstellen und den folgenden Code in die header.php-Datei Ihres Themes einfügen.

// Create navigation
<div class="navbar " role="navigation">
            <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>
	        </div>
	
		    <div class="navbar-collapse collapse ">
				<?php  /* menu */
			       	wp_nav_menu( array(
							    'menu'              => 'primary-menu',
			       				'theme_location'    => 'primary-menu',
				        		'depth'             => 5,
				        		'container'         => 'div',
				        		'container_class'   => 'collapse navbar-collapse navbar-ex1-collapse ',
				        		'menu_class'        => 'nav navbar-nav  ',
				        		'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
				        		'walker'            => new wp_bootstrap_navwalker())
					); 
				 ?>
           	</div>
		</div><!--	Navigation -->


?>

Stellen Sie sicher, dass Sie den Parameter 'menu' durch den Namen Ihres Bootstrap-Menüs ersetzen.

Hinweis: Wenn Sie zum ersten Mal Code-Schnipsel in WordPress hinzufügen, lesen Sie bitte unseren Leitfaden, wie Sie Code-Schnipsel richtig in WordPress hinzufügen, damit Sie Ihre Website nicht versehentlich beschädigen.

Wenn Ihnen dieser Code-Schnipsel gefallen hat, sollten Sie sich unsere anderen Artikel auf der Website ansehen, wie z. B.: 50+ beste responsive WordPress-Themes für eine mobilfreundliche Website und wie man ein Bewerbungsformular in WordPress erstellt.