Crie um menu de navegação personalizado no WordPress sem usar plugins

Não importa qual tema do WordPress você esteja usando, ele quase certamente fornecerá pelo menos um local de menu onde você pode exibir seu menu (normalmente no cabeçalho do seu site). Os menus podem ser facilmente criados dentro da área de administração e adicionados rapidamente a esses locais predefinidos. Mas o que você faz se precisar de outro menu para exibir em outro lugar do seu site? Neste tutorial, veremos como você pode criar seu próprio menu de navegação que pode ser exibido em um local de sua escolha sem precisar usar um plug-in.

Vamos indo!

Registre seu novo local de menu personalizado

A primeira coisa que precisamos fazer é registrar a localização do seu novo menu personalizado. Para fazer isso, abra o arquivo functions.php do seu tema ativo com o editor de texto de sua escolha (como Sublime) e adicione o seguinte código:

 function my_custom_menu() { register_nav_menu('my-custom-menu',__( 'My Custom Menu' )); } add_action( 'init', 'my_custom_menu' );

Neste pedaço de código, usamos o gancho add_action() para adicionar uma função de retorno de chamada my_custom_menu() . Isso significa que a função my_custom_menu() será executada junto com as funções principais padrão que são executadas toda vez que a ação init é chamada. A string “My Custom Menu” é a versão legível que você verá na página de administração.

Dentro da função, a função principal register_nav_menu é usada para registrar um local de menu de navegação para nosso tema. Caso você queira registrar vários menus, você pode usar o register_nav_menus() e definir os locais dos menus dentro de um array como este:

 function my_custom_menu() { register_nav_menus( array( 'my-custom-menu' => _( 'My Custom Menu' ), 'my-custom-menu-2' =>_('My Second Custom Menu') ) ); } add_action( 'init', 'my_custom_menu' );

Para confirmar os resultados, vá para sua área de administração em Aparência > Menus. Você notará que o local do menu personalizado está incluído nas Configurações do menu.

Nota: Se selecionarmos este local neste momento, o menu não exibirá nada no frontend.

Como exibir nosso menu personalizado

Digamos que queremos que o novo local do menu seja usado para um menu horizontal secundário que ficará localizado abaixo do “Menu Horizontal da Área de Trabalho” que já está presente em nosso tema.

Para conseguir isso vamos inserir algum código no template do tema onde queremos que o menu seja exibido. Neste exemplo usamos o tema Twenty Twenty e editamos seu arquivo header.php para exibir nosso menu. Você encontrará este arquivo na pasta do tema.

Abra o arquivo header.php com seu editor e encontre este elemento no código em torno da linha 33.

 <header class="header-footer-group" role="banner">

Logo abaixo desta seção, colocaremos nosso código para exibir nosso novo local de menu personalizado: 'my-custom-menu'.

 <header class="header-footer-group" role="banner"> <?php wp_nav_menu( array( 'theme_location' => 'my-custom-menu' ) ); ?>

O valor theme_location deve ser idêntico ao nome que você forneceu para seu menu no código functions.php que colamos anteriormente. No nosso caso: 'meu-menu-custom'.

Agora vamos criar um menu de teste para ver se está funcionando. Para fazer isso, vá para Aparência > Menus e comece a criar um novo menu.

Dê ao menu o título “Menu secundário”, selecione “Meu menu personalizado” para um local e, em seguida, pressione o botão “Criar menu”.

Finalmente, adicione alguns itens ao menu (por exemplo, item de menu 1, item de menu 2, item de menu 3) e salve o menu.

Vamos ver o que temos agora no frontend.

Conseguimos mostrar nosso novo cardápio, mas está meio bagunçado, não é?

Se visualizarmos nosso código-fonte, perceberemos que a função wp_nav_menu() criou este código HTML

 <div class="menu-secondary-menu-container"> <ul class="menu"> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-378"><a href="#">Menu item 1</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-381"><a href="#">Menu item 2</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-382"><a href="#">Menu item 3</a></li> </ul> </div>

Assim, podemos usar as classes descritas no código para embelezar nosso menu. Para fazer isso, usaremos algum CSS. Encontre style.css (normalmente no mesmo local que o arquivo header.php) e abra-o com seu editor para adicionar este código:

 ul#menu-secondary-menu { text-align: right; padding: 10px 30px; } ul#menu-secondary-menu li { list-style: none; display: inline-block; padding: 1px; } ul#menu-secondary-menu li:hover { border: 1px solid #c00202; padding: 0; border-radius: 3px; } ul#menu-secondary-menu li a { text-decoration: none; padding: 5px; font-size: 14px; }

O resultado será muito mais claro agora e muito mais de acordo com o estilo do nosso site de demonstração.

Personalização de Menu Adicional

A função wp_nav_menu() que o WordPress fornece para exibir menus vem com uma variedade de opções que permitem personalizá-lo ainda mais.

' tema_local '

Como descrevemos acima, este parâmetro corresponde às chaves passadas para a função register_nav_menus() em functions.php

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu' ) );

'menu_class'

Existe a opção ' menu_class ' que permite especificar sua própria classe para o menu.

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'menu_class' => 'my-custom-menu' ) );

Como você já deve ter notado, a classe não substitui nenhuma outra classe, mas é adicionada no elemento ul.

'menu_id'

Ao contrário da opção de classe, a opção menu_id substitui o id do menu atual. O HTML gerado para o elemento <ul> será algo assim.

 <ul class="menu">

Quando esta opção não for usada, o id será o slug do menu, que será incrementado ao usar várias instâncias.

'recipiente'

Este parâmetro define o tipo de elemento que envolve o menu. O padrão é 'div'. Se, por exemplo, você usar este código:

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'container' => 'nav', ) );

você terá este resultado:

'container_class'

Esta é uma classe que é aplicada ao elemento pai do menu:

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'container_class' => 'my-custom-menu-wrapper', ) );

Você também pode inserir conteúdo antes ou depois de cada link de item de menu usando os parâmetros 'antes' e 'depois'. Isso é muito útil se você deseja anexar um traço ou ícone ou envolver os itens de menu em uma tag span. Você pode tentar o exemplo abaixo para ver isso em ação:

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'before' => '<span class="menulink">', 'after' => '</span>', ) );

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'before' => '-', ) );

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'before' => '-', ) );

Você também pode adicionar ícones aos itens de menu. Tente, por exemplo, instalar o plugin Font Awesome para incluir sua biblioteca de ícones e use a opção de menu 'antes' para aplicar um ícone de fonte incrível aos itens de menu.

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'before' => '<i class="fas fa-caret-right"></i>', ) );

Você pode encontrar o código para cada ícone na lista de ícones do plugin.

O parâmetro Walker

Por último, mas não menos importante, forneceremos um exemplo de como o parâmetro walker ajuda a personalizar os menus. Se você não sabe o que é a classe de walker do WordPress, o seguinte provavelmente não fará muito sentido. Sugerimos ler primeiro 'Conhecendo a classe WordPress Walker'.

 wp_nav_menu( array( 'walker' => new Walker_Custom_Menu ) );

Para demonstrar a classe Walker, adicionaremos um “Sub item” em nosso menu.

Vamos substituir a classe Walker padrão que o WordPress fornece. Ele está localizado no arquivo wp-includes/class-walker-nav-menu.php. Para isso, vá até o seu arquivo function.php e insira o código abaixo:

 if ( !class_exists('My_Nav_Menu_Walker') ) { class My_Nav_Menu_Walker extends Walker { var $tree_type = array( 'post_type', 'taxonomy', 'custom' ); var $db_fields = array( 'parent' => 'menu_item_parent', 'id' => 'db_id' ); function start_lvl(&$output, $depth) { $indent = str_repeat("\t", $depth); $output .= "\n$indent"; $output .= "<i class=\"dropdown icon\"></i>\n"; $output .= "<div class=\"menu\">\n"; } function end_lvl(&$output, $depth) { $indent = str_repeat("\t", $depth); $output .= "$indent</div>\n"; } function start_el(&$output, $item, $depth, $args) { $value = ''; $classes = empty( $item->classes ) ? array() : (array) $item->classes; $classes = in_array( 'current-menu-item', $classes ) ? array( 'current-menu-item' ) : array(); $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) ); $class_names = strlen( trim( $class_names ) ) > 0 ? ' class="' . esc_attr( $class_names ) . '"' : ''; $id = apply_filters( 'nav_menu_item_id', '', $item, $args ); $id = strlen( $id ) ? '' : ''; $attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : ''; $attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : ''; $attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : ''; $attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : ''; $item_output = $args->before; $item_output .= '<a'. $attributes . $id . $value . $class_names . '>'; $item_output .= '<div class="item">'; $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after; $item_output .= '</div>'; $item_output .= "</a>\n"; $item_output .= $args->after; $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); } } }

Agora em seu headers.php substitua seu código de menu por este (nós iremos produzir ambas as versões de menu de propósito apenas para comparar os resultados):

 wp_nav_menu(); // Default 'walker' => new Walker_Nav_Menu() wp_nav_menu( array( 'walker' => new My_Nav_Menu_Walker() ) );

Comparando este código com a classe Walker_Nav_Menu original, você notará que $tree_type e $db_fields permaneceram intocados, mas o resto foi alterado. Não se apresse e compare as saídas de código e HTML nessas duas versões do mesmo menu e tente experimentar brincando com a classe My_Nav_Menu_Walker.

Conclusão

Menus em sites são claramente muito importantes! Ser capaz de ter controle total sobre o posicionamento e a saída de menus estende seus recursos como desenvolvedor de temas e abre uma gama de novas e interessantes possibilidades ao projetar sites sem ter que depender de plugins, o que é sempre ótimo poder fazer.