Deseja adicionar menus de navegação personalizados no seu tema WordPress? Os menus de navegação são a lista horizontal de links exibida no topo da maioria dos sites.
Por padrão, os temas do WordPress vêm com localizações e layouts de menu pré-definidos, mas e se você quiser adicionar seus próprios menus de navegação personalizados?
Neste artigo, vamos mostrar-lhe como criar e adicionar facilmente menus de navegação personalizados no WordPress, para que possa exibi-los em qualquer lugar do seu tema.
- Quando você precisa deste tutorial do Menu de Navegação do WordPress?
- Criar menus de navegação personalizados em temas WordPress
- Exibir Menus de Navegação Personalizados em Temas WordPress
- Adicionando um menu de navegação personalizado no WordPress usando o Page Builder
- Criar Menus de Resposta Amigável para Celular no WordPress
- Faça Mais Com Menus de Navegação WordPress
Os temas mais comuns do WordPress vêm com pelo menos um ponto onde você pode exibir os links de navegação do seu site em um menu.
Você pode gerenciar itens do menu a partir de uma interface fácil de usar dentro da sua área de administração do WordPress.
Se você está apenas procurando adicionar menus de navegação em seu site, então simplesmente siga o nosso guia para iniciantes sobre como adicionar um menu de navegação no WordPress.
O objetivo deste tutorial é ajudar os usuários DIY / intermediários a adicionar menus de navegação personalizados em seus temas do WordPress.
Vamos cobrir os seguintes tópicos neste artigo:
- Criar um menu de navegação personalizado em temas WordPress
- Exibir menu de navegação personalizado no tema WordPress
- Adicionar um menu de navegação personalizado no WordPress usando o construtor de páginas
- Criar menus de resposta amigável no WordPress
- Mais coisas que você pode fazer com menus de navegação no WordPress
Dizer isso, Vamos ver como adicionar menus de navegação personalizados do WordPress ao seu tema.
Menus de navegação são uma característica dos temas WordPress. Cada tema pode definir suas próprias localizações de menu e suporte a menus.
Para adicionar um menu de navegação personalizado, a primeira coisa que você precisa fazer é registrar seu novo menu de navegação, adicionando este código ao arquivo functions.php do seu tema.
function wpb_custom_new_menu() { register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));}add_action( 'init', 'wpb_custom_new_menu' );
Você pode agora ir para a página Appearance ” Menus no seu administrador WordPress e tentar criar ou editar um novo menu. Você verá ‘Meu menu personalizado’ como opção de localização do tema.
Se você quiser adicionar mais de uma nova localização do menu de navegação, entã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' );
Após ter adicionado a localização 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á passar para o próximo passo, que é exibir o menu em seu tema.
Próximo, precisamos exibir o novo menu de navegação no seu tema WordPress. O local mais comum onde os menus de navegação são normalmente colocados é na seção de cabeçalho de um site logo após o título ou logotipo do site.
No entanto, você pode adicionar seu menu de navegação em qualquer lugar que você quiser.
Você precisará adicionar este código no arquivo de template do seu tema onde você quer exibir seu menu.
<?phpwp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'container_class' => 'custom-menu-class' ) ); ?>
A localização do tema é o nome que seleccionámos no passo anterior.
A classe contentor é a classe CSS que será adicionada ao seu menu de navegação. O seu menu irá aparecer como uma lista de tópicos simples no seu website.
Você pode usar a classe CSS .custom_menu_class para dar estilo aos 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;}
Para saber mais sobre como estilizar um menu de navegação, veja nosso tutorial detalhado sobre como estilizar os menus de navegação do WordPress
Se você estiver criando uma página de aterrissagem personalizada ou um layout de página inicial, então usar um plugin de construção de página do WordPress tornaria tudo muito mais fácil.
Recomendamos usar o Beaver Builder, que é o melhor construtor de páginas para WordPress do mercado. Ele permite que você crie qualquer tipo de layout de página usando ferramentas simples de arrastar e soltar (não é necessário codificar).
Inclui também a adição de um menu de navegação personalizado ao layout da sua página.
Primeiro, você precisará instalar e ativar o plugin do Beaver Builder. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin WordPress.
Ativação do componente, você precisa criar uma nova página ou editar uma página existente onde você gostaria de adicionar o menu de navegação. Na tela do post editor, clique no botão ‘Launch Beaver Builder’.
Se for uma página nova, então você pode usar um dos modelos prontos que vêm com o Beaver Builder. Você também pode editar a sua página de saída imediatamente.
Next, você precisa adicionar o módulo Menus e arrastá-lo e soltá-lo na sua página para o local onde você deseja exibir o menu.
Isto irá trazer as configurações do módulo Menu em um popup. Primeiro, você precisa selecionar o menu de navegação que você deseja usar. Você sempre pode criar novos menus ou editar um menu existente visitando a página Appearance ” Menus na área de administração do WordPress.
Você pode rever outras configurações também. O Beaver Builder permite que você escolha cores personalizadas, fundo e outras propriedades de estilo para o seu menu.
Após você ter terminado, você pode clicar no botão Salvar e visualizar seu menu.
Criar Menus de Resposta Amigável para Celular no WordPress
Com o aumento no uso de dispositivos móveis, você pode querer tornar seus menus amigáveis para celular adicionando um dos muitos efeitos populares.
Você pode adicionar um efeito deslizante (acima), efeito dropdown e até mesmo um efeito de alternância para menus móveis.
Temos um guia detalhado passo a passo sobre como tornar os menus do WordPress prontos para celular.
Menus de Navegação são uma poderosa ferramenta de web design. Eles permitem que você aponte os usuários para as seções mais importantes do seu site.
WordPress permite que você faça muito mais do que apenas exibir links em seu menu. Experimente estes tutoriais úteis para ampliar a funcionalidade dos menus de navegação no seu site WordPress.
- Como adicionar ícones de imagem com menus de navegação no WordPress
- Como adicionar lógica condicional aos menus no WordPress
- Como adicionar descrições de menus no seu tema WordPress
- Como adicionar um menu de resposta em tela cheia no WordPress
- Como adicionar um mega menu ao seu site WordPress
É tudo, esperamos que este guia final o ajude a aprender como adicionar um menu de navegação no WordPress. Você também pode querer ver nossa lista dos 25 widgets WordPress mais úteis, e nossa lista dos plugins WordPress deve ter.
Se você gostou deste artigo, então inscreva-se no nosso Canal YouTube para obter tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e Facebook.