Descubra como destacar seu site com menus de navegação personalizados no WordPress!
Os menus de navegação são a lista horizontal de links exibidos no topo da maioria dos sites.
Imagine ter controle total sobre a aparência do seu menu, adequando-o perfeitamente à identidade da sua marca.
Em nosso artigo, vamos revelar o caminho mais fácil para criar menus de navegação personalizados e adicioná-los no WordPress, sem precisar de conhecimentos técnicos. Assim, você poderá exibi-los com estilo em qualquer lugar do seu tema.
Potencialize sua presença online com menus que cativam e guiam seus visitantes de forma única!
Para Que Serve Um Menu De Navegação Personalizado No WordPress?
Ao explorar temas do WordPress, você notará que a maioria já inclui uma opção para exibir links de navegação do seu site em um menu.
A melhor parte? Você pode facilmente gerenciar esses itens de menu através de uma interface amigável dentro da área de administração do WordPress.
Se você é um usuário intermediário ou gosta de fazer as coisas por conta própria, este tutorial foi especialmente elaborado para ajudá-lo a adicionar menus de navegação personalizados em seus temas WordPress.
Não perca tempo! Vamos aprender juntos como criar menus de navegação personalizados no WordPress e elevar o design do seu site a um novo patamar. Mãos à obra!
Criando Menus De Navegação Personalizados Em Temas WordPress
Cada tema possui seus próprios recursos e suporte de menu, permitindo a criação de experiências únicas para os visitantes do seu site.
Para dar um toque exclusivo, você pode adicionar um menu de navegação personalizado facilmente. Basta seguir alguns passos simples:
Registre o novo menu de navegação adicionando um código no arquivo functions.php do seu tema:
function wpb_custom_new_menu() {
register_nav_menu('my-custom-menu',__( 'Meu Menu Personalizado' ));
}
add_action( 'init', 'wpb_custom_new_menu' );Acesse a página Aparência » Menus em seu administrador do WordPress e crie ou edite um novo menu. Lá, você encontrará a opção “Meu Menu Personalizado” como uma localização de tema disponível.
Se quiser adicionar mais de um novo local ao menu de navegação, você precisará usar um código como este:
function wpb_custom_new_menu() {
register_nav_menus(
array(
'my-custom-menu' => __( 'My Custom Menu' ),
'extra-menu' => __( 'Extra Menu' )
)
);
}
add_action( 'init', 'wpb_custom_new_menu' );Depois de adicionar o local do menu, vá em frente e adicione alguns itens de menu no administrador do WordPress seguindo nosso tutorial sobre como adicionar menus de navegação para iniciantes.
Isso nos permitirá avançar para a próxima etapa, que é exibir o menu em seu tema.
Exibindo Menus De Navegação Personalizados Em Temas WordPress
Ótimo progresso! Agora, vamos seguir em frente com a exibição do novo menu de navegação em seu tema WordPress.
A localização mais comum para colocar os menus de navegação é na seção de cabeçalho do site, logo após o título ou logotipo. Essa posição torna a navegação mais acessível aos visitantes, facilitando a exploração do conteúdo do site.
No entanto, a flexibilidade é uma das grandes vantagens do WordPress. Portanto, você pode adicionar seu menu de navegação em qualquer lugar que melhor se adapte à proposta e design do seu site.
Para fazer isso, basta adicionar o código fornecido ao arquivo de modelo do seu tema, no local exato onde deseja que o menu seja exibido. Essa simples ação personalizará a navegação do seu site, oferecendo aos usuários uma experiência de qualidade e intuitiva.
<?php
wp_nav_menu( array(
'theme_location' => 'my-custom-menu',
'container_class' => 'custom-menu-class' ) );
?>O local do tema é o nome que selecionamos na etapa anterior.
A classe contêiner é a classe CSS que será adicionada ao menu de navegação. Seu menu aparecerá como uma lista simples com marcadores em seu site.
Você pode usar a classe CSS .custom_menu_class para definir o estilo de seus menus. Aqui está um exemplo de CSS para ajudá-lo a começar:
div.custom-menu-class ul {
margin:20px 0px 20px 0px;
list-style-type: none;
list-style: none;
list-style-image: none;
text-align:right;
}
div.custom-menu-class li {
padding: 0px 20px 0px 0px;
display: inline;
}
div.custom-menu-class a {
color:#FFFFFF;
}
Adicionando Um Menu De Navegação Personalizado Usando Plugin
Facilite a criação de páginas de destino ou layouts personalizados no WordPress usando um prático plugin de construção de páginas, como o Beaver Builder. Ele é considerado o melhor construtor de páginas no mercado, permitindo que você crie diversos layouts arrastando e soltando elementos, sem precisar de conhecimentos em codificação.
Uma das vantagens é a possibilidade de adicionar um menu de navegação personalizado ao seu layout de página. Para começar, basta instalar e ativar o plugin Beaver Builder. Em seguida, crie uma nova página ou edite uma existente onde deseja colocar o menu de navegação e clique no botão “Launch Beaver Builder” no editor de postagens.
Se for uma nova página, você pode usar um dos modelos prontos que vêm com o Beaver Builder. Você também pode editar sua página de saída imediatamente.
Em seguida, você precisa adicionar o módulo “Menu” e arrastá-lo e soltá-lo em sua página para o local onde deseja exibir o menu.
Isso abrirá as configurações do módulo de menu em um pop-up. Primeiro, você precisa selecionar o menu de navegação que deseja usar. Você sempre pode criar novos menus ou editar um menu existente visitando a página Aparência » Menus na área de administração do WordPress.
Você também pode revisar outras configurações. O Beaver Builder permite que você escolha cores personalizadas, plano de fundo e outras propriedades de estilo para o seu menu.
Quando terminar, você pode clicar no botão Salvar e visualizar o menu.
Criação De Menus Responsivos No WordPress
Com o aumento do uso de dispositivos móveis, talvez você queira tornar seus menus compatíveis com dispositivos móveis adicionando um dos muitos efeitos populares.
Você pode adicionar um efeito deslizante (como acima), um efeito suspenso e até mesmo um efeito de alternância para menus móveis.
Os menus de navegação são uma ferramenta poderosa de design da web. Eles permitem que você direcione os usuários para as seções mais importantes do seu site.
O WordPress permite que você faça muito mais do que apenas exibir links em seu menu.
Se este artigo foi útil para você, não deixe de se inscrever em nosso canal do YouTube. Lá você encontrará diversos tutoriais de WordPress para iniciantes.
Além disso, você pode nos seguir no Twitter, LinkedIn, Instagram ou Facebook para se manter atualizado com as nossas novidades. Estamos sempre prontos para ajudar!
