Às vezes você pode encontrar um tema fantástico apenas para perceber que seria ótimo se ele tivesse um menu de navegação extra com links importantes ou freqüentemente usados para aumentar a usabilidade do seu site WordPress.
Com apenas um pouco de codificação você poderia ter a base do seu novo menu configurada rapidamente, e pronta para você estilo para combinar com o seu tema.
Se você preferir não mexer no código, há muitos plugins que podem fazer o trabalho pesado para você, e também fornecer opções de estilo.
Não importa qual opção você escolha, o guia abaixo irá ajudá-lo a fazer isso acontecer.
Basic Housekeeping
Para criar um novo menu você precisa editar seus arquivos de temas. Antes de fazer alterações em qualquer um dos seus arquivos principais, é melhor fazer backup de todo o seu site, caso algo dê errado no caminho. Você será capaz de restaurar o seu site rapidamente e será como se nada tivesse acontecido.
Você pode fazer backup manualmente do seu site via FTP ou usando um plugin, como o nosso próprio Snapshot. Apenas certifique-se de salvar uma cópia tanto do seu banco de dados quanto dos arquivos em um local separado do seu site para minimizar o risco de perder seu backup.
Construindo um Tema Criança
Para criar novos menus com código, você precisa fazer alterações que seriam perdidas quando você atualizasse seu tema. Criar um tema infantil cuida desse problema.
Você pode encontrar os detalhes necessários para criar um tema infantil verificando alguns de nossos outros posts Como Criar um Tema Criança no WordPress e Como Criar Automaticamente Temas Criança no WordPress.
Você também pode optar por criar um tema totalmente novo ou experimentá-lo em um site local ou de teste.
Você pode conferir estes posts para mais detalhes sobre como criar uma instalação local do WordPress:
- Como desenvolver o WordPress localmente com MAMP
- Como instalar o XAMPP e o WordPress localmente no PC/Windows
- Como configurar o WordPress localmente em 5 minutos com DesktopServer
- O guia rápido e fácil para migrar uma instalação local do WordPress para um site ao vivo
- Como mover o WordPress para desenvolvimento local com XAMPP
Após ter configurado uma destas opções, você está livre para começar a criar seus menus de navegação extras. Embora, se você decidir usar um plugin ou uma estrutura de temas, você não precisa criar um tema infantil.
Criando Novos Menus
Para adicionar uma opção de localização de menu selecionável no seu painel de controle de administração em Aparência > Menus você precisa fazer o que é chamado de “registrar um menu”. Basta adicionar um trecho de código ao seu arquivo functions.php localizado no conteúdo do wp > temas > seu tema.
No cPanel, clique no ícone do Gerenciador de Arquivos na seção Arquivos da página inicial. Se você não definiu anteriormente o seu Gerenciador de Arquivos para carregar na raiz do documento do seu site, navegue lá agora.
Existe um arquivo functions.php na sua pasta /wp-includes/, mas esse não é o arquivo que você precisa editar. Certifique-se de encontrar o ficheiro functions.php que se encontra no tema que está a utilizar. Caso contrário, você acabaria com erros ao tentar adicionar o código encontrado mais tarde em.
Localize seu arquivo functions.php e clique nele uma vez seguido por um clique no botão Edit no topo da página.
Se uma janela pop-up se abrir, basta clicar no botão Edit na parte inferior, do lado direito. Você pode não ver um se você o tiver desabilitado anteriormente.
Rolar para a parte inferior do arquivo. Se você quiser adicionar apenas um menu, adicione o seguinte código em uma nova linha:
function register_my_menu() {register_nav_menu('new-menu',__( 'New Menu' ));}add_action( 'init', 'register_my_menu' );
Neste exemplo, New Menu é o nome que aparecerá na página de menu do seu painel de administração para torná-lo compreensível para os olhos humanos. O new-menu nome é o que o WordPress irá entender para executar seu código corretamente.
Você pode chamar seu menu como quiser, mas certifique-se de que apenas o nome legível por humanos contenha espaços e letras maiúsculas.
Se você quiser adicionar vários menus ao seu site, adicione este código em uma nova linha:
Você pode adicionar quantos menus novos você quiser com este método. As mesmas regras serão aplicadas ao nomeá-los.
Salve as alterações que você fez no arquivo. Agora só falta adicionar o novo menu ao seu site.
Adicionando Localizações de Menu ao seu Tema
É aqui que você precisa decidir onde gostaria de colocar o seu menu. Se você quiser que seu menu apareça no topo da sua página, você precisará editar o arquivo header.php. Você também pode colocá-lo em seu rodapé, o que significa que você editaria o arquivo footer.php.
Você pode até mesmo exibir um menu em uma página editando seu arquivo modelo ou em uma barra lateral, editando seu arquivo sidebar.php.
Você pode colocar seu novo menu onde você quiser. Aqui está a quantidade mínima de código que você precisa adicionar a qualquer um desses locais:
<?php wp_nav_menu( array( 'theme_location' => 'new-menu' ) ); ?>
Só substitui new-menu pelo nome WordPress-readable que você escolheu. Você provavelmente quer estilizar seu menu com CSS para que ele vá além da funcionalidade básica e também tenha um ótimo visual. Para fazer isso, você precisará criar uma classe e adicioná-la ao seu tema com o seguinte código.
<?php wp_nav_menu( array( 'theme_location' => 'new-menu', 'container_class' => 'new_menu_class' ) ); ?>
Apenas como antes, substitua new-menu pelo nome que você escolheu. Neste exemplo, eu nomeei a classe que eu criei new_menu_class. Você pode mudar isso, mas não se esqueça de atualizar esse código para refletir o ajuste.
Acione o botão Save e vá para Appearance > Menus no seu painel de instrumentos. Você notará que seus novos menus serão listados em Localizações Temáticas na seção Configurações do Menu.
Você agora poderá ver suas novas localizações de menu listadas. Quando você adicionar um menu, você pode selecionar uma ou todas as localizações.
Para ter links exibidos em suas novas localizações de menu, clique em criar um novo menu na parte superior da página.
Se ainda não tiver um menu, pode introduzir um nome para o seu menu no campo da página, depois clique em Criar Menu. Se você já tem um menu criado anteriormente, você pode clicar no link criar um novo menu no topo da página.
Após ter criado um novo menu, você também pode gerenciar os locais onde eles são exibidos na aba “Gerenciar Locais”.
Estilização, Plugins e Menus Responsivos
Seu novo menu agora está pronto para ser estilizado usando CSS. A codificação necessária é específica para o tema que você está usando, então não vou entrar nele neste post, mas temos outro post que você pode conferir para aquele chamado Como Criar um Incrível Menu Responsivo para o Seu Tema WordPress. Ele também mostra como criar menus responsivos que estão prontos para celular.
Se você quiser uma opção mais fácil, há muitos plugins que irão criar menus responsivos com base nos estilos do seu tema. Um dos melhores que encontrei é o Responsive Menu.
Algumas menções notáveis que você também pode achar úteis são ShiftNav, WP Responsive Menu e Max Mega Menu.
Resources for Going Further
Você agora tem a base sólida que você precisa para criar menus adicionais para o seu tema e recursos para ajudá-lo a ir além. Se você mesmo codificá-lo, usar um plugin ou um framework temático, você agora tem um novo menu no seu site WordPress.
Se você tiver problemas, vá em frente e peça aos nossos heróis de suporte. Eles podem lhe dar conselhos de especialistas e suporte para ajudar a resolver qualquer problema. Você pode abrir um ticket em nosso fórum de suporte e nós já estaremos indo para ajudá-lo.
Para mais informações sobre como estilizar seu novo tema, há muitos recursos que você pode conferir e você pode encontrá-los todos em nosso post A Mega Guide to Learning and Referencing CSS for WordPress: 150+ Recursos.
Você também pode conferir alguns de nossos outros posts 10 Dicas Simples para Aprendizagem de CSS para WordPress, 25 Dicas Especialistas para Codificação CSS mais Limpa para WordPress, 25 Dicas Pro para Melhorar seu Fluxo de Trabalho CSS e 5 Plugins CSS Grátis para Edição ao Vivo do seu Site WordPress para mais detalhes sobre a codificação de alguns CSS para o seu tema.
Tags:
- menus
- navigação