Como Criar um Menu Responsivo do WordPress Usando Bootstrap Nav Walker

Você está procurando uma maneira de começar com um menu de navegação responsivo usando o Bootstrap? Embora provavelmente exista um plugin 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 baixar o arquivo wp_bootstrap_navwalker.php de aqui e enviá-lo para a pasta wp-content/themes/seu-tema.

Depois disso, você precisa adicionar este código ao arquivo functions.php do seu tema ou a um plugin 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 do seu menu Bootstrap.

Observação: Se esta é a sua primeira vez adicionando snippets de código no WordPress, consulte nosso guia sobre como adicionar snippets de código corretamente no WordPress, para não quebrar acidentalmente seu site.

Se você gostou deste snippet de código, considere conferir nossos outros artigos no site, como: Mais de 50 melhores temas responsivos do WordPress para criar um site pronto para dispositivos móveis e como criar um formulário de candidatura de emprego no WordPress.