fbpx

Bem vindo ao
Blog da FULL.

Aprenda, crie e cresça seu negócio na internet.

Encontre conteúdos, dicas, tutoriais e novidades sobre as principais ferramentas Wordpress

Siga a FULL.

Realce o link atual nos menus do WordPress

Você está em:

Realce o link atual nos menus do WordPress

Destacar o item de menu ativo no menu principal do seu site é muito bom para a usabilidade, para que a pessoa que visualiza seu site saiba exatamente qual página está visualizando e facilita a navegação no menu a partir da página atual. Antes do WordPress 3.0, destacar o item de menu atual com base na página em que um visitante estava era mais trabalhoso, porque você precisava executar instruções if em cada link para testar se era a página atual ou um ancestral da página atual, no entanto , com a introdução do novo sistema de menu de arrastar e soltar no WordPress versão 3, agora existem classes especiais atribuídas a cada link, facilitando o estilo deles.

Saída básica do menu WordPress

Primeiro, vamos dar uma olhada na saída básica do menu WordPress (baseada em um menu simples usando o Twenty Ten WordPress Theme ) para que você possa ver o tipo de classes adicionadas automaticamente aos links:

<ul id=”menu-my-menu” class=”menu”><li id=”menu-item-3″ class=”menu-item menu-item-type-custom menu-item-object-custom menu-item-3″><a href=”http://mysite.com”>Home</a></li>

<li id=”menu-item-4″ class=”menu-item menu-item-type-custom menu-item-object-custom menu-item-4″><a href=”http://mysite.com/sample-page”>Page 1</a></li>

<li id=”menu-item-5″ class=”menu-item menu-item-type-custom menu-item-object-custom menu-item-5″><a href=”http://mysite.com/sample-page-2″>Page 2</a></li>

<li id=”menu-item-6″ class=”menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-6″><a href=”http://mysite.com/drop-down”>Drop Down</a>

<ul class=”sub-menu”>

<li id=”menu-item-7″ class=”menu-item menu-item-type-custom menu-item-object-custom menu-item-7″><a href=”http://mysite.com/drop-down-1″>Drop Down 1</a></li>

<li id=”menu-item-8″ class=”menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-8″><a href=”http://mysite.com/drop-down-2″>Drop Down 2</a></li>

</ul>

</li>

</ul>

Destacando as páginas atuais/categoria/outros links de menu

Se você der uma olhada no código acima, poderá ver todas as diferentes classes que o WordPress adiciona aos links do menu, mas as que você deseja destacar para destacar são as seguintes:

  1. .item-menu atual
  2. .current-page-ancestor
  3. .atual-pós-ancestral

.current-menu-item: Classe adicionada ao item de menu para a página atual que está sendo visualizada pelo usuário.

~ Exemplo: se você estiver na página “sobre” e houver um link para a página “sobre”, ela herdará esta classe

.current-page-ancestor : Classe adicionada ao item de menu para a página pai se uma página filha estiver sendo visualizada no momento.

~ Exemplo: Se você tiver uma página chamada “Páginas” e uma página filha chamada “sobre”, se você estiver na página “sobre”, o link do menu chamado “Páginas” herdará essa classe.

.current-post-ancestor : Classe adicionada ao item de menu desde que a categoria seja um ancestral do post que está sendo visualizado.

~ Exemplo: a aula é adicionada à categoria “Filme” no menu se você estiver visualizando o post chamado “Harry Potter”, que está nessa categoria.

Destaque do Menu de Amostra Básico

Este é um método de destaque muito básico e geral, mas pode ajudá-lo a ter um bom começo. Basta copiar e editar o seguinte CSS em seu arquivo style.css para destacar os links do menu:

.current-menu-item a,

.current-page-ancestor a,

.current-post-ancestor a { background: #000; }

Claro que este CSS tem como alvo TODAS as classes atuais, o que significa que se você tiver vários menus no site ou mesmo menus em suas áreas de widget, eles serão direcionados. Portanto, certifique-se de ajustar o CSS para corresponder ao seu tema, para que ele segmente apenas o menu que você deseja segmentar especificamente.

Aprenda com a FULL.

Junte-se a mais de 50 mil pessoas que recebem em primeira mão as principais ferramentas e tecnologia para desenvolvimento web

Meu carrinho
🎁 Faltam R$300,00 para liberar o Cupom Secreto
Seu carrinho está vazio.

Parece que você não adicionou nada ao seu carrinho =(