Menu: Faça um menu com WP Bootstrap Navwalker

Para fazer uma menu de navegação com WP Bootstrap Navwalker será necessário importar em seu projeto o Bootstrap, neste artigo demonstro uma maneiras para isso.

WP Bootstrap Navwalker

Como o WP Bootstrap Navwalker não faz parte do core do WordPress vamos precisar importar a classe dele. Você pode baixar aqui ou então diretamente no repositório do desenvolvedor.

Coloque o arquivo class-wp-bootstrap-navwalker.php na pasta de seu tema. para então “importa-lo” ao WordPress via functions.php

functions.php

Além de importar a classe nova vamos aproveitar para registrar nosso

if ( ! file_exists( get_template_directory() . '/class-wp-bootstrap-navwalker.php' ) ) {
	// file does not exist... return an error.
	return new WP_Error( 'class-wp-bootstrap-navwalker-missing', __( 'It appears the class-wp-bootstrap-navwalker.php file may be missing.', 'wp-bootstrap-navwalker' ) );
} else {
	// file exists... require it.
	require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
}

register_nav_menus( array(
	'primary' => __( 'Menu especial', 'THEMENAME' ),
) );

Obs. se você estiver utilizando um tema filho verifique o caminho do local do arquivo.

Agora vamos incluir o menu no header.php, para que todas as páginas que possuam o header apresente nosso “Menu especial”.

header.php

<nav class="navbar navbar-expand-md navbar-light bg-light" role="navigation">
  <div class="container">
	<!-- Brand and toggle get grouped for better mobile display -->
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation">
		<span class="navbar-toggler-icon"></span>
	</button>
	<a class="navbar-brand" href="#">Navbar</a>
		<?php
		wp_nav_menu( array(
			'theme_location'    => 'primary',
			'depth'             => 2,
			'container'         => 'div',
			'container_class'   => 'collapse navbar-collapse',
			'container_id'      => 'bs-example-navbar-collapse-1',
			'menu_class'        => 'nav navbar-nav',
			'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
			'walker'            => new WP_Bootstrap_Navwalker(),
		) );
		?>
	</div>
</nav>

Criar o menu no painel

Agora vamos acessar o painel de adm do WordPress, e em “Aparência -> Menu” vamos criar um novo.

Aqui inclui um link personalizado para levar a página inicial e a página de contato, além de marcar o checkbox do “Menu especial”.

Fácil assim criamos um menu de navegação com WP Bootstrap Navwalker. Curtiu? Teve algum problema comenta aí.

A imagem deste post foi obtida em: Flyer vector created by rawpixel.com – www.freepik.com

Deixe um comentário