Como Adicionar a Primeira e a Última Classe CSS aos Itens do Menu do WordPress

Você já notou sites com itens de menu de primeiro e último nome com estilo exclusivo? Isso não é por acaso – é CSS inteligente em ação. Essa técnica pode destacar links importantes, como sua página de contato ou uma oferta especial.

Muitos de nossos leitores tentaram adicionar classes personalizadas aos seus itens de menu, apenas para descobrir que, quando reorganizam o menu, a estilização quebra. Os itens marcados como 'primeiro' e 'último' não estão mais nessas posições, deixando o menu com uma aparência inconsistente.

É por isso que este guia mostrará como adicionar uma classe .first e .last que ficará com seus itens de menu, mesmo que você os reorganize mais tarde. Cobriremos dois métodos: um filtro para temas clássicos e seletores CSS para todos os temas, incluindo temas de blocos.

Por que estilizar os primeiros e últimos itens de navegação de forma diferente?

Às vezes, você pode precisar adicionar estilização personalizada aos primeiros e últimos 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 WooCommerce.

Nesse caso, você poderia simplesmente adicionar uma classe CSS personalizada aos primeiros e últimos itens do menu. No entanto, se você alterar a ordem do menu a qualquer momento, isso poderá quebrar completamente a estilização personalizada.

Por esse motivo, recomendamos o uso de filtros em vez disso.

Neste guia, mostraremos como estilizar o primeiro e o último item do seu menu de navegação, para que você possa reorganizar o menu sem quebrar a estilização personalizada. Simplesmente use os links rápidos abaixo para pular diretamente para o método que você deseja usar:

• Método 1: Adicionando Classe de Primeiro e Último Usando um Filtro (Recomendado)
• Método 2: Estilizando os Primeiros e Últimos Itens Usando Seletores CSS (Funciona Com Todos os Temas)

Método 1: Adicionando Classe de Primeiro e Último Usando um Filtro (Recomendado)

Observação: Este método só funciona com um tema WordPress clássico. Se você estiver usando um tema de blocos, vá para Método 2.

A maneira mais fácil de estilizar os itens do seu menu de navegação é adicionar um filtro ao seu tema.

Frequentemente, 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 trecho de código personalizado pode quebrar seu site WordPress e torná-lo inacessível. Sem mencionar que, se você atualizar seu tema WordPress, perderá todas as suas personalizações.

É aí que entra o WPCode .

Este plugin gratuito facilita a adição de CSS, PHP, HTML personalizados e muito mais ao WordPress sem colocar seu site em risco.

A primeira coisa que você precisa fazer é instalar e ativar o plugin gratuito WPCode. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.

Ao ativar, acesse Snippets de Código » Adicionar Snippet.

Aqui, basta passar o mouse sobre ‘Adicionar seu código personalizado’.

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 o menu suspenso ‘Tipo de Código’ e selecione ‘Trecho PHP’.

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é o topo da tela e clicar no botão ‘Inativo’ para que ele mude para ‘Ativo’.

Finalmente, clique em ‘Salvar Snippet’ para tornar o snippet PHP ativo.

Isso cria as classes CSS .first e .last para seus primeiro e último itens de menu. Agora você pode usar essas classes para aplicar estilos exclusivos a esses itens em seu menu de navegação personalizado.

Para fazer isso, você precisará adicionar um segundo snippet ao seu site 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 trecho de código personalizado.

Em seguida, abra o menu suspenso ‘Tipo de Código’, mas desta vez selecione ‘Snippet CSS’.

Para este guia, simplesmente deixaremos em negrito o primeiro e o último item do menu adicionando a seguinte formatação CSS à caixa de código:

.first a {font-weight: bold;}

.last a {font-weight: bold;}

Com isso feito, clique no alternador ‘Inativo’ para que ele mude para ‘Ativo’.

Finalmente, clique em 'Salvar Snippet' para tornar o snippet CSS ativo.

Agora, se você visitar seu site, verá o menu recém-estilizado em funcionamento.

Método 2: Estilizando os Primeiros e Últimos Itens Usando Seletores CSS (Funciona Com Todos os Temas)

Se você não quiser usar um plugin de snippet de código, poderá estilizar o primeiro e o último item do menu usando seletores CSS. No entanto, este 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 este método, você precisará adicionar código à folha de estilo do seu tema ou à seção ‘CSS Adicional’ do Personalizador de Tema do WordPress.

Se você nunca fez isso antes, consulte nosso guia sobre como adicionar facilmente CSS personalizado ao seu site WordPress.

O primeiro passo é editar o arquivo style.css do seu tema ou ir para Aparência » Personalizar e depois clicar em ‘CSS Adicional’.

Depois disso, prossiga e adicione o seguinte snippet de código ao seu site:

ul#yourmenuid > li:first-child { }
ul#yourmenuid > li:last-child { }

Observe que você precisará substituir ‘seuidmenu’ 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 os primeiros e os últimos itens no menu de navegação.

Por exemplo, usamos este código para colocar em negrito os primeiros e últimos itens do menu de navegação em nosso blog 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ê usa um tema de blocos do WordPress, o Personalizador de Tema estará ausente no seu painel do WordPress. Você precisa inserir este URL no seu navegador para acessar o Personalizador de Tema:

https://yourdomainname.com/wp-admin/customize.php

Certifique-se de substituir o domínio pelo nome de domínio do seu site.

Depois disso, abra a aba ‘CSS Adicional’ como antes e insira o seguinte código. Observe como o código parece um pouco diferente, pois você não precisa adicionar o ID do seu 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 os primeiros e últimos links em botões.

Veja como fica:

Esperamos que este tutorial tenha ajudado você a aprender como adicionar as classes .first e .last aos menus de navegação do WordPress. Você também pode querer ver nosso artigo sobre como criar um menu de navegação vertical no WordPress e nosso guia para iniciantes sobre como criar um menu suspenso em um site WordPress.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.