Como criar um menu responsivo para WordPress usando o Bootstrap Nav Walker

Está procurando uma maneira de começar com um menu de navegação responsivo usando o Bootstrap? Embora provavelmente exista um plug-in para isso, criamos um trecho de código rápido que você pode usar para criar completamente um menu responsivo do WordPress usando o Bootstrap nav walker no WordPress.

Instruções:

Primeiro, você precisa fazer o download do arquivo wp_bootstrap_navwalker.php daqui e carregá-lo na pasta wp-content/themes/your-theme.

Depois disso, você precisa adicionar esse código ao arquivo functions.php do seu tema ou em um plug-in específico do site:

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

Em seguida, você precisa criar um menu Bootstrap e adicionar o seguinte código ao arquivo header.php do seu 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 -->


?>

Certifique-se de substituir o parâmetro ‘menu’ pelo nome de seu menu Bootstrap.

Observação: Se esta é a primeira vez que você adiciona trechos de código no WordPress, consulte nosso guia sobre como adicionar corretamente trechos de código no WordPress para não danificar acidentalmente seu site.

Se você gostou desse snippet de código, considere dar uma olhada em nossos outros artigos no site, como: 50+ melhores temas responsivos do WordPress para criar um site pronto para dispositivos móveis e como criar um formulário de solicitação de emprego no WordPress.