Agora sabemos como criar um tema WordPress básico do zero, vamos dar uma olhada em como criar um menu de navegação personalizado para o nosso tema. Este menu deve ter a capacidade de ser controlado a partir do Painel de Controle do WordPress. Em outras palavras, você deve ser capaz de entrar no Painel de Controle e adicionar ou remover links para quaisquer páginas, posts, ou categorias que você goste. No final deste tutorial, isso é exatamente o que teremos. Vamos cavar e ver como atingir esse objetivo.
Abrir cabeçalho.php
Vá em frente e abra o arquivo header.php do tema em que estivemos trabalhando. Nosso objetivo será adicionar um menu que viva acima do conteúdo principal do site, mas abaixo do nome do site e da área de tagline. Para fazer isso, podemos adicionar o seguinte código abaixo:
<!DOCTYPE html><html <?php language_attributes(); ?>><head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <title><?php bloginfo( 'name' ); ?></title><?php wp_head() ?></head><body <?php body_class(); ?>><div class="container"> <header class="site-header"> <h1><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1> <h4><?php bloginfo( 'description' ); ?></h4> <nav class="navigation-menu"><?php wp_nav_menu() ?> </nav> </header>Nota que fazemos uso de uma função especial fornecida por WordPress do wp_nav_menu(). Esta função cuida de todo o trabalho de perna para você na construção de um menu personalizado. Você não precisa digitar todo o html manualmente, então isto é bastante útil. Agora nós não temos muito no caminho das páginas ainda, mas se visitarmos nosso site de testes, a função já está emitindo um link para a página de exemplo que existe em nossa instalação.
Passando Argumentos para a função wp_nav_menu()
Como a maioria das funções no WordPress, você pode passar argumentos opcionais para a função wp_nav_menu(). Aqui nós configuraremos um array e configuraremos apenas uma opção. Nós usamos um array no caso de querermos passar várias opções no futuro. Aqui é como podemos adicionar esse bit de code.
<!DOCTYPE html><html <?php language_attributes(); ?>><head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <title><?php bloginfo( 'name' ); ?></title><?php wp_head() ?></head><body <?php body_class(); ?>><div class="container"> <header class="site-header"> <h1><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1> <h4><?php bloginfo( 'description' ); ?></h4> <nav class="navigation-menu"><?php $args = ; ?><?php wp_nav_menu( $args ) ?> </nav> </header>Esta opção nos dá uma maneira de nomear certos menus em nosso tema. Podemos querer ter mais de um menu, e este é o método pelo qual você pode diferenciar entre múltiplos menus.
Register Menu Location in functions.php
A fim de fazer uso do menu que acabamos de criar em nosso arquivo header.php, a partir do painel de administração do WordPress, devemos registrar a localização do menu no arquivo functions.php do tema. Então como podemos registrar o nosso novo menu com o WordPress? Nós podemos fazer isso com a função register_nav_menus() integrada ao WordPress. Vamos registrar nosso menu como so.
<?phpfunction custom_theme_assets() {wp_enqueue_style( 'style', get_stylesheet_uri() );}add_action( 'wp_enqueue_scripts', 'custom_theme_assets' );register_nav_menus( );Configurar nosso menu personalizado no Painel de Controle do WordPress
Nosso novo menu deve agora ser registrado com o núcleo do WordPress. WordPress agora está ciente do nosso menu, e sua localização no tema. Agora podemos entrar no dashboard, criar um novo menu, e gerenciar a localização do mesmo. Especificamente, queremos fazer com que apareça onde fizemos uso dessa função wp_nav_menu(). Vamos visitar Appearance->Menus e depois clicar em ‘criar um novo menu’.
Podemos nomear este menu o que quisermos. Escolheremos apenas o Menu Principal para o manter fácil, e depois clicaremos em ‘Criar Menu’.
Neste próximo passo, criaremos um link para todas as nossas Categorias. Assim, podemos escolher Categorias, selecionar Todas, atualizar o local de exibição para ‘Menu Principal’, e então clicar em ‘Salvar Menu’. Vamos experimentar.
Visitar nosso site nos mostra que agora estamos obtendo um link para cada categoria no novo menu que criamos. É apenas uma lista não ordenada no momento, e não é a mais bonita ainda – mas está funcionando!
Qual é o benefício de registrar seu menu personalizado?
Eu sei, eu sei. Você está pensando que nem sequer faz sentido passar por toda essa hoopla só para obter alguns hyperlinks para algumas categorias para exibir no seu site. Em alguns aspectos, você está certo. Porque não construir algumas destas coisas manualmente. Claro, isso pode ser feito, mas quando construímos nosso menu como fizemos aqui, agora temos o poder do Painel de Controle do WordPress para controlar o código que incluímos em nosso tema. Agora podemos facilmente arrastar e soltar pedidos de links entre outras coisas diretamente do Painel de Controle. Vamos mudar a encomenda de WordPress, PHP, JavaScript para JavaScript, WordPress, e depois PHP. Muito fácil!
Agora quando você visita o site, a ordem dos links no menu é atualizada. Não é necessário mexer no código subjacente com esta abordagem.
Estilo que menu personalizado
Que lista não-ordenada não vai cortá-lo! Nós precisamos fazer as coisas um pouco mais escorregadias do que isso. Vamos gastar um pouco de tempo aplicando algum CSS personalizado para limpar um pouco esse menu. Primeiro, queremos transformar a lista não-ordenada orientada verticalmente em um menu orientado horizontalmente. Gostaríamos também de remover os pontos de cada elemento da lista, adicionar algum acolchoamento e margem, assim como remover o sublinhado dos links. Aqui está uma facada na criação desse efeito em nosso arquivo style.css.
/* Nav Menu */.navigation-menu ul { margin: 0; padding: 0;}.navigation-menu ul:before, .navigation-menu ul:after { content: ""; display: table;}.navigation-menu ul:after { clear: both;}.navigation-menu ul { *zoom: 1}.navigation-menu ul li { list-style: none; float: left; margin-right: 3px;}.navigation-menu ul li a:link,.navigation-menu ul li a:visited { display: block; padding: 12px 17px; border: 2px solid #ecf0f1; border-bottom: none; text-decoration: none;}Existe uma espécie de muita coisa acontecendo no CSS listado acima. Vamos analisar isso. No primeiro seletor .navigation-menu ul, estamos removendo todo o acolchoamento e margem da lista não ordenada. Em seguida, estamos assegurando que a lista não-ordenada irá limpar as flutuações do item da lista filhos. No seletor .navigation-menu ul li, removemos as balas da lista, flutuamos os itens da lista para a esquerda e adicionamos um pouco de margem à direita. No fim, temos como alvo os links. Primeiro transformamo-los em elementos de nível de bloco com uma almofada de 12px vertical e 17px horizontal. Adicionamos um belo efeito de borda e removemos o sublinhado nos links. Vamos verificar no browser agora.
Nice! Esse menu está muito melhor do que inicialmente.
Como adicionar uma cor personalizada no hover ao menu
O estilo básico no lugar. Pode ser bom ter um pouco de efeito de pausa quando se move o mouse sobre cada link. Isso é muito fácil de configurar usando o seguinte trecho:
.navigation-menu ul li a:hover { background-color: #ebf5fb;}
Isso parece muito bom!
Como segmentar o estado ativo de um item do menu
Outra coisa que podemos gostar de adicionar é a habilidade de personalizar a cor de um link ativo. Isto é diferente do simples efeito de pairar. Neste caso, quando visitamos um determinado link do menu, queremos que o WordPress esteja ciente de que esta é agora a página ativa sendo visualizada e que atualize a representação visual para refletir o link ativo. Para fazer isso, podemos fazer uso de uma classe especial que está embutida no WordPress para endereçar essa mesma coisa. Esta é a classe de menu-item atual. Aqui está como podemos incorporá-la em nosso menu personalizado.
.navigation-menu ul li.current-menu-item a:link,.navigation-menu ul li.current-menu-item a:visited { background-color: #4285f4; color: #ffffff;}Se visitarmos nosso site agora e testarmos visitando os vários links no menu personalizado, podemos vê-la muito bonita. Agora temos um olhar particular para o estado de pausa, e um olhar diferente para o estado ativo dos links em nosso menu. Esta é uma ótima maneira de garantir que os visitantes do seu site saibam onde eles estão atualmente, mantendo o menu ativo iluminado por assim dizer.
Como criar um menu personalizado no WordPress Summary
Neste tutorial, demos uma boa olhada em como adicionar um menu personalizado ao nosso tema personalizado no WordPress. Fizemos uso de algumas funções do WordPress para nos ajudar. A primeira que fizemos uso foi wp_nav_menu(). Esta função pode construir automaticamente uma lista não ordenada e elementos infantis para criar a estrutura para um bom menu ao qual você pode aplicar o estilo. Há muitos argumentos que você pode passar para esta função, mas nós focamos apenas no básico aqui. A próxima função que fizemos uso foi a função register_nav_menus(). Esta função nos permite informar o WordPress sobre nosso novo menu e se conectar a ele no Painel de Controle do WordPress. Uma vez que nosso novo menu foi registrado no WordPress, descobrimos que era fácil adicionar ou remover qualquer coisa que gostássemos desse menu, diretamente do painel do WordPress e sem a necessidade de editar qualquer código em nossos arquivos de temas. Finalmente, levamos algum tempo para melhorar o visual do nosso menu, usando algum estilo CSS personalizado.