Um site WordPress não seria muito sem seus menus e submenus. Personalizar esses menus de acordo com o seu gosto com o WordPress também é simples. Como tal, seu menu WordPress é uma ferramenta de ‘linha de frente’ para obter uma alta classificação de busca e manter os visitantes no site.
As telas dedicadas dentro do WordPress desmentem o quão complexos podem ser os seus menus. Você também é capaz de exibir menus em vários locais do seu site. Se você tem a capacidade de codificação, você pode personalizar o seu menu WordPress com possibilidades quase infinitas.
Para este artigo, vamos lhe dar um guia detalhado para criar um menu WordPress. Também lhe mostraremos como aproveitar a funcionalidade e melhorá-la de algumas maneiras diferentes.
A anatomia de um menu WordPress
Para os não iniciados, um menu WordPress é frequentemente uma coleção de links (incluindo dropdowns). É uma peça de funcionalidade simples que é apenas uma “vértebra” na espinha dorsal do seu site.
Na próxima seção, veremos os menus em um site com mais detalhes. Por enquanto, saiba que eles podem caber em qualquer lugar que você gostaria de exibi-los. Você pode ter apenas algumas opções pré-selecionadas (baseadas em áreas widget). Em um sentido técnico, no entanto, um menu pode ir a qualquer lugar.
Naturalmente, um menu WordPress é fundamental para navegar em um site. Se você tiver um menu de navegação claro e definido, isso ajudará os usuários a contornar o seu site, e manterá a sua taxa de retorno baixa.
Eles também servem para outro propósito: os seus menus ajudam na Otimização para Mecanismos de Pesquisa (SEO). Otimizar um menu WordPress para SEO é mais sobre o que deixar de fora do que colocar dentro. Para começar, você pode eliminar elementos – tais como tag clouds – e manter o número de links que você inclui baixo.
Embora o Google lhe permita adicionar até 250 links em uma página, manter o seu “valor de link” alto é essencial. Como tal, cortar o número de links externos irá servi-lo bem a longo prazo.
Os diferentes tipos de estruturas de menu do WordPress
Como você já deve entender, dependendo das necessidades do seu aplicativo, você pode optar por diferentes estruturas de menu do WordPress.
Os menus de cabeçalho, por exemplo, são os mais comuns porque lidam com a navegação primária do site. Você verá frequentemente menus menores acima da navegação principal também, pois este é um excelente lugar para ícones de mídias sociais, barras de busca, e muito mais.
O site parceiro da Kinsta SAU/CAL tem um menu “fly-in” que inclui navegação e links sociais:
Este menu mostra que há mais casos de uso para um menu WordPress do que navegar em um site. Usando a funcionalidade incorporada do WordPress (falaremos sobre isso mais tarde), você pode criar um menu para quase tudo o que você precisa.
Tão popular quanto a navegação de cabeçalho é o rodapé. Você usará frequentemente esta área para repetir sua navegação primária para usuários que se deslocam para baixo. Além disso, é um excelente lugar para oferecer mais links baseados no contexto para os seus produtos e serviços:
Você também verá menus dentro de uma barra lateral se o site o usar:
Embora você não veja a navegação primária aqui em muitos casos, é um lugar tradicional para links sociais, arquivos de artigos de blogs e muito mais.
Como criar um menu WordPress personalizado (3 Métodos)
A criação de um menu WordPress é um processo sem absurdos, independentemente do seu nível de especialização. Há três maneiras de fazer o trabalho: use a funcionalidade incorporada do WordPress; instale um plugin adequado ou suje suas mãos com código.
A seguir, vamos mostrar-lhe como criar um menu WordPress usando as três abordagens.
1. Use a funcionalidade incorporada do WordPress para criar seu menu
O WordPress tem ferramentas embutidas para ajudá-lo a criar um menu. Uma tela dedicada dentro do administrador do WordPress será familiar a todos, exceto aos usuários mais novos.
Naturalmente, usar a funcionalidade nativa para criar o seu menu WordPress tem inúmeros benefícios. Para começar, você tem total compatibilidade com o seu site. Além disso, você pode construir seus menus usando uma interface familiar e ferramentas nativas.
Para chegar lá, vá para a página Aparência > Menus dentro do WordPress:
Esta tela se divide em algumas seções diferentes. No topo, você encontrará a opção de selecionar um menu atual ou criar um novo menu:
Se decidir construir um novo menu, dê-lhe um nome e consulte a seção Definições do Menu:
Há muitas caixas de seleção aqui, mas você tem duas decisões principais a tomar:
- Adicione páginas “Top-level” (de nível superior) ao menu automaticamente. Adicione páginas “Top-level” ao menu automaticamente. “Top-level” aqui significa páginas que você criaria dentro do WordPress que não são filhos de outras páginas.Por exemplo, um artigo no blog não é uma página top-level porque terá uma página de arquivo principal em muitos casos (por exemplo, /blog). Por outro lado, uma página de contato é freqüentemente top-level porque normalmente não terá uma página principal.
- A localização do menu. Cada tema terá a sua localização de menu. A menos que você altere os arquivos centrais do seu tema, os desenvolvedores do tema têm estes locais de menu codificados. Alguns temas podem permitir que você os personalize através de suas configurações.
Quando estiver pronto, clique no botão Criar Menu. A tela irá se atualizar e mostrará que você está no seu novo menu. A seguir, dê uma olhada no lado esquerdo da tela:
Esta tela lista todos os artigos, páginas, taxonomias e outros ativos vinculáveis em seu site. Você constrói seu menu marcando as caixas à esquerda, depois clique no botão Adicionar ao Menu.
Isso irá movê-los para a seção central da tela Menus:
Aqui, você pode arrastar e soltar itens do menu para o lugar desejado. Se você clicar na seta de expansão ao lado de cada item, você também pode definir uma etiqueta para o seu item de menu ou removê-lo:
Depois de clicar em Salvar Menu, você está pronto para ir. Se você expandir o menu Opções de Tela na parte superior da tela, no entanto, há mais que você pode fazer com seu menu do WordPress:
O grupo Elementos da tela permite mostrar as meta box do menu na barra lateral esquerda. Em contraste, o grupo de propriedades avançadas do menu exibe metas de links, descrições e classes CSS para os itens da lista.
Há mais um aspecto da tela dos Menus que vale a pena notar. A meta box de Links personalizados permite-lhe definir um link à sua escolha, em vez de uma página pré-definida no seu site:
Esta opção é como você pode adicionar links de mídias sociais ao seu menu do WordPress. A plataforma irá puxar o ícone correto para você com base no site que você selecionar, dando a você a oportunidade de exibir logotipos bem reproduzidos para os sites que você escolher.
2. Use um plugin para criar seu menu WordPress personalizado
A solução imediata para adicionar funcionalidade ao WordPress é através de plugins. A seção anterior abordou o motivo pelo qual a opção nativa do WordPress é quase tudo que você precisa, mas os plugins podem expandir essa funcionalidade.
Há uma questão de se você precisa de um plugin dedicado (e adicional) para criar um menu WordPress, embora haja muitas boas razões para isso. Para começar, você muitas vezes fará um menu baseado em um estilo que você não pode acessar sob a configuração padrão. Projetos específicos, “mega menus” e muito mais estão disponíveis para você através de plugins.
Além disso, você pode construir menus usando um editor dedicado e escolher entre modelos pré-definidos em muitos casos. Juntamente com extensas opções de personalização, você tem uma solução “sem código” que irá fornecer um menu WordPress que funciona para o seu site.
Por exemplo, o plugin Max MegaMenu não oferece surpresas que você pode encontrar:
Uma vez instalado e ativado, você encontrará um novo painel do Mega Menu dentro do WordPress:
Se você olhar para a tela Localizações de Menu, você notará que há mais customizações disponíveis para você:
Você também pode aplicar temas de menu e editá-los com um escopo similar a alguns dos melhores construtores de páginas do mercado:
Há muito mais em que poderíamos cavar aqui, embora estaríamos nos repetindo. Encorajamos você a conferir nosso artigo anterior nos Melhores Plugins de Menu do WordPress. Vamos entrar em detalhes sobre como escolher o plugin certo para você e como usá-lo.
3. Escreva o código para criar o seu menu WordPress personalizado
Codificar seu próprio menu WordPress é uma maneira confiável de atingir seu objetivo para os corajosos (ou se você é um desenvolvedor criando um novo tema WordPress). É claro que você não vai abrir um editor de código no dia-a-dia para adicionar um menu. Para isso, você vai usar as ferramentas nativas do WordPress (ou talvez um plugin).
Dito isto, aprender como codificar um menu WordPress é um requisito vital se você quiser desenvolver temas. Há quatro partes para o sucesso:
- Registre o seu menu.
- Exibir o menu do WordPress no front-end.
- Mostre o conteúdo adicional dentro do seu menu ou dos seus itens.
- Defina um callback.
Vamos supor que você é útil com um editor de código, que tem um ambiente de teste para trabalhar e que suas habilidades são afiadas. Se você ainda não tem um tema para trabalhar, você pode usar as opções padrão do WordPress ou escolher um de nossa lista de temas mais rápidos de WordPress.
Quando você estiver pronto, você vai querer abrir o arquivo functions.php do tema. Note que isto é diferente do arquivo WordPress geral com o mesmo nome. Aqui, você precisa registrar o seu menu. Em outras palavras, você tem que dizer ao WordPress o que exibir na página Appearance > Menus. Para fazer isso, você utiliza a função register_nav_menus():
function register_my_menus() {
register_nav_menus(
array(
'header' => __( 'Header Menu' ),
'other' => __( 'Other Menu' )
)
);
}
add_action( 'init', 'register_my_menus' );
Este código diz à aba Gerenciar locais dentro do WordPress para exibir dois menus: Menu de Cabeçalho e Outro Menu:
A seguir, você tem que exibir seu menu usando a função wp_nav_menu(). Você adicionará isso no arquivo de modelo que corresponde ao local onde você gostaria de exibir o menu. No nosso caso, vamos com o cabeçalho, então vamos adicionar o seguinte código ao arquivo header.php do nosso tema:
wp_nav_menu( array( 'theme_location' => 'header' ) );
Pode ser que este código esteja embrulhado em uma declaração if, juntamente com alguns dos seus outros menus, então você vai querer seguir as convenções que você encontrar.
Neste ponto, você poderia trabalhar com o menu no WordPress como qualquer outro. No entanto, você também pode querer considerar adicionar conteúdo adicional aos itens do seu menu. Por exemplo, você pode expandir o array definido para incluir tags HTML que irão renderizar na saída:
wp_nav_menu(
array(
'menu' => 'primary',
'link_before' => '',
'link_after' => '',
)
);
A sua última tarefa aqui é definir um callback. Por padrão, o WordPress exibe um menu populado quando o especificado não é encontrado. Como alternativa, o WordPress exibirá um menu de páginas quando nenhum menu personalizado for selecionado. Se esta não for sua ação desejada, você pode definir um parâmetro diferente para o argumento de theme-location e também adicionar um argumento fallback_cb:
wp_nav_menu(
array(
'menu' => 'primary',
// do not fall back to first non-empty menu
'theme_location' => '__no_such_location',
// do not fall back to wp_page_menu()
'fallback_cb' => false
)
);
Assim que você entender como criar um menu WordPress, você pode começar a melhorar a funcionalidade. Veremos isso em nossa seção final para criar uma meta box de menu personalizada para WordPress.
Como melhorar o seu menu WordPress
Como esta seção está avançada, vamos fazer algumas suposições antes de continuarmos:
- Você sabe como criar um menu WordPress usando PHP.
- Suas habilidades em PHP são boas o suficiente para acompanhar alguns tópicos avançados.
- Você sabe como se registrar e inicializar um plugin do WordPress.
Está além do escopo deste artigo, mas você pode usar o Plugin Boilerplate Generator WordPress para criar um novo modelo de plugin padronizado.
Quando estiver pronto, crie e carregue o seu plugin para o WordPress:
A seguir, navegue até a pasta do plugin e abra o arquivo principal. Aqui, adicione o seguinte código:
/**
* Add menu meta box
*
* @param object $object The meta box object
* @link https://developer.wordpress.org/reference/functions/add_meta_box/
*/
function custom_add_menu_meta_box( $object ) {
add_meta_box( 'custom-menu-metabox', __( 'Authors' ), 'custom_menu_meta_box', 'nav-menus', 'side', 'default' );
return $object;
}
add_filter( 'nav_menu_meta_box_object', 'custom_add_menu_meta_box', 10, 1);
A função add_meta_box() do WordPress irá registrar uma meta box dentro do administrador do WordPress. Há alguns argumentos que você vai querer referir dentro da documentação oficial. Também usamos o filtro nav_menu_meta_box_object() porque não há nenhuma ação dentro do arquivo nav-menus.php para se conectar. Esta instrução determina se a função adiciona uma meta box de item de menu para um tipo de objeto. Quando o filtro é executado, add_meta_box registra a meta box personalizada.
Definição de uma função callback
A seguir, podemos definir uma função de callback para produzir o conteúdo HTML para a meta box:
/**
* Displays a metabox for an author menu item.
*
* @global int|string $nav_menu_selected_id (id, name or slug) of the currently-selected menu
*/
function custom_menu_meta_box(){
global $nav_menu_selected_id;
$walker = new Walker_Nav_Menu_Checklist();
...
}
A variável global lembra o ID do menu atual, enquanto $walker armazena uma nova instância do objeto Walker_Nav_Menu_Checklist. Isso irá construir a lista HTML dos itens de menu.
A partir daqui, temos de determinar o separador activo na meta box personalizada. Para fazer isso, definimos o valor de $current_tab, trabalhando dentro da elipse definida no bloco de código anterior.
Estamos usando duas abas aqui, mas você pode adicionar quantas você precisar:
$current_tab = 'all';
if ( isset( $_REQUEST['authorarchive-tab'] ) && 'admins' == $_REQUEST['authorarchive-tab'] ) {
$current_tab = 'admins';
} elseif ( isset( $_REQUEST['authorarchive-tab'] ) && 'all' == $_REQUEST['authorarchive-tab'] ) {
$current_tab = 'all';
}
A seguinte linha irá obter todos os usuários com privilégios de escrita e adicionar muitas propriedades ao objeto $authors:
$authors = get_users( array( 'orderby' => 'nicename', 'order' => 'ASC', 'who' => 'authors' ) );
$admins = array();
/* set values to required item properties */
foreach ( $authors as &$author ) {
$author->classes = array();
$author->type = 'custom';
$author->object_id = $author->nickname;
$author->title = $author->nickname . ' - ' . implode(', ', $author->roles);
$author->object = 'custom';
$author->url = get_author_posts_url( $author->ID );
$author->attr_title = $author->displayname;
if( $author->has_cap( 'edit_users' ) ){
$admins[] = $author;
}
}
$removed_args = array( 'action', 'customlink-tab', 'edit-menu-item', 'menu-item', 'page-tab', '_wpnonce' );
?>
Aqui, get_users retorna um array de objetos $user selecionados pelos parâmetros especificados. O parâmetro who irá forçar o WordPress a consultar o banco de dados para usuários que têm privilégios de escrita.
Além disso, o array $admins irá armazenar um array de autores, enquanto $removed_args irá armazenar uma lista de variáveis de consulta a serem removidas.
Agora você pode imprimir a marcação meta box. Para fazer isso, vamos construir as etiquetas e links.
<div id="authorarchive" class="categorydiv">
<ul id="authorarchive-tabs" class="authorarchive-tabs add-menu-item-tabs">
<li <?php echo ( 'all' == $current_tab ? ' class="tabs"' : '' ); ?>>
<a class="nav-tab-link" data-type="tabs-panel-authorarchive-all" href="<?php if ( $nav_menu_selected_id ) echo esc_url( add_query_arg( 'authorarchive-tab', 'all', remove_query_arg( $removed_args ) ) ); ?>#tabs-panel-authorarchive-all">
<?php _e( 'View All' ); ?>
</a>
</li>
<li <?php echo ( 'admins' == $current_tab ? ' class="tabs"' : '' ); ?>>
<a class="nav-tab-link" data-type="tabs-panel-authorarchive-admins" href="<?php if ( $nav_menu_selected_id ) echo esc_url( add_query_arg( 'authorarchive-tab', 'admins', remove_query_arg( $removed_args ) ) ); ?>#tabs-panel-authorarchive-admins">
<?php _e( 'Admins' ); ?>
</a>
</li>
</ul>Lembre-se de atribuir os nomes de classe, IDs e atributos de dados corretos aos elementos da meta box; caso contrário, o menu não funcionará como esperado.
Tanto as funções add_query_arg como remove_query_arg definem valores específicos de tabulação para a variável authorarchive-tabs e removem variáveis desnecessárias.
Neste ponto, temos uma meta box com abas definidas:
O nosso próximo passo é construir o conteúdo HTML das abas.
Construindo o conteúdo HTML para as abas meta box
Você vai querer seguir o código da seção anterior dentro da função custom_menu_meta_box(). Para construir o conteúdo, use o seguinte dentro da tag <div> que você escreveu na última seção:
<div id="tabs-panel-authorarchive-all" class="tabs-panel tabs-panel-view-all <?php echo ( 'all' == $current_tab ? 'tabs-panel-active' : 'tabs-panel-inactive' ); ?>">
<ul id="authorarchive-checklist-all" class="categorychecklist form-no-clear">
<?php
echo walk_nav_menu_tree( array_map('wp_setup_nav_menu_item', $authors), 0, (object) array( 'walker' => $walker) );
?>
</ul>
</div>
<div id="tabs-panel-authorarchive-admins" class="tabs-panel tabs-panel-view-admins <?php echo ( 'admins' == $current_tab ? 'tabs-panel-active' : 'tabs-panel-inactive' ); ?>">
<ul id="authorarchive-checklist-admins" class="categorychecklist form-no-clear">
<?php
echo walk_nav_menu_tree( array_map('wp_setup_nav_menu_item', $admins), 0, (object) array( 'walker' => $walker) );
?>
</ul>
</div>Em resumo, cada separador contém uma lista de caixas de verificação. A função walk_nav_menu_tree() imprime a lista usando três argumentos: $items, $depth, e $r – todos necessários.
O array $items armazena um array de usuários administrativos. A função array_map() aplica a função wp_setup_nav_menu_item() a $admins e adiciona propriedades de item de menu aos elementos do array.
A partir daqui, podemos dar os retoques finais.
Adicionando um Botão Submeter
A maior parte da meta box personalizada está completa, embora ainda precisemos adicionar um botão Submeter e um ícone de processamento “spinner”.
Aqui está um pequeno pedaço de código que você pode colocar logo após o bloco anterior:
<p class="button-controls wp-clearfix">
<span class="list-controls">
<a href="<?php echo esc_url( add_query_arg( array( 'authorarchive-tab' => 'all', 'selectall' => 1, ), remove_query_arg( $removed_args ) )); ?>#authorarchive" class="select-all"><?php _e('Select All'); ?></a>
</span>
<span class="add-to-menu">
<input type="submit"<?php wp_nav_menu_disabled_check( $nav_menu_selected_id ); ?> class="button-secondary submit-add-to-menu right" value="<?php esc_attr_e('Add to Menu'); ?>" name="add-authorarchive-menu-item" id="submit-authorarchive" />
<span class="spinner"></span>
</span>
</p>
</div>
<?php
}
Com este conhecimento, você pode adicionar quase todas as funcionalidades aos seus menus! Note que há também um public Gist do plugin no GitHub que está disponível para download gratuito.
Resumo
Um menu WordPress é um aspecto crucial do seu site. Por causa disso, a plataforma oferece um painel nativo e poderoso que lhe permitirá personalizar cada menu do seu site. No entanto, ele não irá fornecer tudo o que você precisa por padrão.
Várias opções de tela ajudam-no a adicionar etiquetas CSS e muito mais. Além disso, a instalação de um plugin lhe permitirá transformar seus menus nativos em mega menus e trabalhar com funcionalidades aprimoradas para tornar os seus mais ágeis (entre outras facetas). A codificação também é uma possibilidade, e embora seja uma tarefa desafiadora para um programador novato, é algo que você pode montar no espaço de uma tarde.
Quer personalizar o seu menu WordPress e, em caso afirmativo, qual é a sua abordagem? Compartilhe os seus pensamentos e opiniões na seção de comentários abaixo!
Salman Ravoof é um desenvolvedor web autodidata, escritor, criador e grande admirador de Software Livre e de Código Aberto (FOSS). Além de tecnologia, ele se entusiasma com ciência, filosofia, fotografia, artes, gatos e comida. Saiba mais sobre ele em seu site e conecte-se com Salman no X.
Deixe um comentário