Come Creare un Menu Responsive per WordPress Utilizzando Bootstrap Nav Walker

Stai cercando un modo per iniziare con un menu di navigazione responsive usando Bootstrap? Sebbene esista probabilmente un plugin per questo, abbiamo creato un rapido snippet di codice che puoi utilizzare per creare completamente un menu WordPress responsive utilizzando il Bootstrap nav walker in WordPress.

Istruzioni:

Per prima cosa devi scaricare il file wp_bootstrap_navwalker.php da qui e caricarlo nella cartella wp-content/themes/your-theme.

Dopo di che, devi aggiungere questo codice al file functions.php del tuo tema o in un plugin specifico per il sito:

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

Successivamente, devi creare un menu Bootstrap e aggiungere il seguente codice al file header.php del tuo tema.

// 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 -->


?>

Assicurati di sostituire il parametro 'menu' con il nome del tuo menu Bootstrap.

Nota: Se questa è la prima volta che aggiungi snippet di codice in WordPress, consulta la nostra guida su come aggiungere correttamente snippet di codice in WordPress, in modo da non compromettere accidentalmente il tuo sito.

Se ti è piaciuto questo snippet di codice, prendi in considerazione la lettura dei nostri altri articoli sul sito come: I 50 migliori temi WordPress responsive per creare un sito mobile-ready e come creare un modulo di candidatura in WordPress.