Deseja adicionar um estilo personalizado ao primeiro e ao último itens do menu do WordPress?
Uma opção é simplesmente adicionar uma classe CSS personalizada ao primeiro e ao último itens do menu. No entanto, se você reorganizar o menu em algum momento, esses itens poderão deixar de ser o primeiro e o último.
Neste artigo, mostraremos como adicionar uma classe .first e .last que estilizará o primeiro e o último itens, mesmo se você reordenar o menu posteriormente.
Por que estilizar o primeiro e o último itens de navegação de forma diferente?
Às vezes, pode ser necessário adicionar um estilo personalizado ao primeiro e ao último itens de um menu de navegação. Isso pode fazer com que links importantes se destaquem, como o link para o formulário de contato do seu site ou a página do carrinho do WooCommerce.
Nesse caso, você poderia simplesmente adicionar uma classe CSS personalizada ao primeiro e ao último itens do menu. No entanto, se você alterar a ordem do menu em qualquer ponto, isso poderá quebrar completamente o estilo personalizado.
Por esse motivo, recomendamos o uso de filtros.
Neste guia, mostraremos como estilizar o primeiro e o último itens do menu de navegação, para que você possa reorganizar o menu sem quebrar o estilo personalizado. Basta usar os links rápidos abaixo para ir direto ao método que você deseja usar:
Método 1: Adicionar a primeira e a última classe usando um filtro (recomendado)
Observação: Esse método só funciona com um tema clássico do WordPress. Se estiver usando um tema de bloco, vá para o Método 2.
A maneira mais fácil de estilizar os itens do menu de navegação é adicionar um filtro ao tema.
Muitas vezes, você encontrará trechos de código em tutoriais do WordPress com instruções para adicioná-los ao arquivo functions.php do seu tema.
O maior problema é que até mesmo um pequeno erro no snippet de código personalizado pode quebrar seu site do WordPress e torná-lo inacessível. Sem mencionar que, se você atualizar o tema do WordPress, perderá todas as suas personalizações.
É aí que entra o WPCode .
Esse plug-in gratuito facilita a adição de CSS, PHP, HTML e outros elementos personalizados ao WordPress sem colocar seu site em risco.
A primeira coisa que você precisa fazer é instalar e ativar o plug-in gratuito WPCode. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.
Após a ativação, vá para Code Snippets ” Add Snippet.
Aqui, basta passar o mouse sobre ‘Add Your Custom Code’.
Quando aparecer, clique em “Usar snippet”.
Para começar, digite um título para o snippet de código personalizado. Pode ser qualquer coisa que ajude você a identificar o snippet no painel do WordPress.
Depois disso, abra a lista suspensa “Code Type” (Tipo de código) e selecione “PHP Snippet”.
Em seguida, você pode adicionar o seguinte PHP à caixa de código:
function wpb_first_and_last_menu_class($items) {
$items[1]->classes[] = 'first';
$items[count($items)]->classes[] = 'last';
return $items;
}
add_filter('wp_nav_menu_objects', 'wpb_first_and_last_menu_class');
Depois disso, você está pronto para rolar até a parte superior da tela e clicar no botão de alternância “Inactive” (Inativo) para que ele mude para “Active” (Ativo).
Por fim, clique em “Save Snippet” (Salvar snippet) para ativar o snippet PHP.
Isso cria classes CSS .first e .last para o primeiro e o último itens do menu. Agora você pode usar essas classes para aplicar um estilo exclusivo a esses itens.
Para fazer isso, você precisará adicionar um segundo snippet ao seu site do WordPress. Para começar, crie um novo snippet de código personalizado seguindo o mesmo processo descrito acima.
Depois disso, digite um título para o snippet de código personalizado.
Em seguida, abra o menu suspenso “Code Type” (Tipo de código), mas, dessa vez, selecione “CSS Snippet”.
Para este guia, simplesmente colocaremos em negrito o primeiro e o último itens do menu adicionando a seguinte formatação CSS à caixa de código:
.first a {font-weight: bold;}
.last a {font-weight: bold;}
Feito isso, clique no botão de alternância “Inactive” (Inativo) para que ele mude para “Active” (Ativo).
Por fim, clique em “Save Snippet” para ativar o snippet de CSS.
Agora, se você visitar seu site, verá o menu atualizado ao vivo.
Método 2: Como estilizar o primeiro e o último itens usando seletores CSS (funciona com todos os temas)
Se não quiser usar um plug-in, você pode estilizar o primeiro e o último itens do menu usando seletores CSS. Entretanto, esse método pode não funcionar com alguns navegadores mais antigos, como o Internet Explorer.
Com isso em mente, é uma boa ideia testar seu site WordPress em diferentes navegadores.
Para seguir esse método, você precisará adicionar código à folha de estilo do seu tema ou à seção “CSS adicional” do personalizador de temas do WordPress.
Se você não tiver feito isso antes, consulte nosso guia sobre como adicionar facilmente CSS personalizado ao seu site WordPress.
A primeira etapa é editar o arquivo style.css do seu tema ou acessar Appearance ” Customize e clicar em “Additional CSS”.
Depois disso, vá em frente e adicione o seguinte trecho de código ao seu site:
ul#yourmenuid > li:first-child { }
ul#yourmenuid > li:last-child { }
Observe que você precisará substituir “yourmenuid” pelo ID do seu menu de navegação.
Os seletores ‘first-child’ e ‘last-child’ selecionam o primeiro e o último filho de seu pai, que são o primeiro e o último itens do menu de navegação.
Por exemplo, usamos esse código para colocar em negrito o primeiro e o último itens do menu de navegação em nosso blog do WordPress:
ul#primary-menu-list > li:first-child a {
font-weight: bold;
}
ul#primary-menu-list > li:last-child a {
font-weight: bold;
}
Se você usar um tema de bloco do WordPress, o personalizador de tema não estará presente em seu administrador do WordPress. É necessário inserir esta URL no navegador para acessar o Theme Customizer:
https://yourdomainname.com/wp-admin/customize.php
Certifique-se de substituir o domínio pelo nome de domínio de seu site.
Depois disso, abra a guia “Additional CSS” como antes e insira o código a seguir. Observe como o código parece um pouco diferente, pois não é necessário adicionar o ID do menu.
li:first-child a,
li:last-child a {
background-color: black;
border: none;
color: white !important; /* Ensures the color white is prioritized */
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 12px;
}
Sinta-se à vontade para personalizar o código de acordo com suas necessidades. No exemplo abaixo, transformamos o primeiro e o último links em botões.
Esta é a sua aparência:
Esperamos que este tutorial tenha ajudado você a aprender como adicionar as classes .first e .last aos menus de navegação do WordPress. Talvez você também queira ver nosso guia sobre como criar uma landing page com o WordPress ou conferir nossa lista dos melhores construtores de páginas do tipo arrastar e soltar.
Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Ahmed Mahdi says
i’ve changed the code slightly to work with child menus too:
function wpb_first_and_last_menu_class($items) {
foreach($items as $k => $v){
$parent[$v->menu_item_parent][] = $v;
}
foreach($parent as $k => $v){
$v[0]->classes[] = ‘first’;
$v[count($v)-1]->classes[] = ‘last’;
}
return $items;
}
add_filter(‘wp_nav_menu_objects’, ‘wpb_first_and_last_menu_class’);
Trevor Simonton says
exactly what i needed. thank you!
Georgios Panagiotakopoulos says
Thanks! This works great!
Munkhbayar says
Thanks for code. Works for me.
mad_doc says
Thank you for idea & help!
Charles says
Thanks for this nice code…
What about child menu first and last item?
It applied only for parent manu.
Do you have any idea about child last item?
jordi says
Anyone have any tip about use add_filter(”); for wp_nav_menu using STARKERS?
JS and CSS are fine to do that, it is just frustrating to don’t be able to fix it from the back…
can’t make it works
thanks to share anyway!!
Jake says
This does not work reliably if you have nested menus.
Editorial Staff says
Hmm, will look into a fix for this.
Administrador
Olivier says
It works when the menu item is the last, or the last child of a last menu item.
It does not work when the menu item is a last child of a menu item that is not the last.
Olivier says
Together with some other additions to functions.php that i’ve tried, this code fails to tag a menu item as first or last menu item when they are in a submenu. A fix for this would be great!
Elliott Richmond says
Nice! Would usually use CSS but this is a good tip
Mattia says
Great! This is particularly interesting because I have to class more than 2 menu items…
Now I got it!
Thanks
karen says
Thanks for this! Forgive me if I missed it – but – is there an example of the menu to see the difference in the nav created by this class? Thank you again!
Editorial Staff says
The site we designed for our client is not live yet. But the main reason was that we wanted to have a border left to the first menu item. All other items had border right element with a specific padding and margin. We used the last class to remove the margin right and the border right because there was no need for it. It was hitting the wrap container. Hope you can visualize it.
Administrador
Ivo Minchev says
I’ve tried this at the site http://aurorachalet-switzerland.com/ and I cannot see the effect. I’m using the “Twenty Eleven” theme for this site. Where is the problem?
Ivo Minchev says
Pobably because of the #yourmenuid tag. I tried some ID’s but none of them worked.
Editorial Staff says
This should work as long as you specify the correct id tags.
Administrador
Editorial Staff says
Don’t think that you are using the wp_nav_menu. From the looks of it, it seems that your site is using the fall_back menu by listing all pages. Can you confirm that you have gone into Appearance > Menu and created a menu there. Then specified that menu as a primary location??
Administrador