Como estilizar facilmente as tags no WordPress (com exemplos)

Deseja estilizar as tags no WordPress para torná-las mais proeminentes?

As tags ajudam você a organizar seu conteúdo em tópicos. Elas são como hashtags para suas publicações no blog do WordPress e ajudam os usuários a descobrir mais conteúdo.

Neste artigo, mostraremos como estilizar facilmente as tags no WordPress para obter mais engajamento do usuário e visualizações de página em seu site.

Como exibir tags no WordPress

O WordPress vem com duas taxonomias principais chamadas categorias e tags. Enquanto as categorias são usadas para as principais áreas do seu conteúdo, as tags permitem que você classifique o conteúdo em tópicos mais específicos.

Muitos temas populares do WordPress exibem tags na parte superior ou inferior de suas postagens por padrão.

No entanto, você também pode exibir tags em páginas de arquivo, rodapé, barras laterais e em praticamente qualquer lugar que desejar no WordPress.

Para inserir uma nuvem de tags em seus posts, páginas e widgets da barra lateral, basta adicionar o bloco “Nuvem de tags”.

Uma nuvem de tags dá a cada tag um tamanho de fonte diferente com base no número de publicações. Você também pode optar por exibir o número de publicações ao lado de cada tag.

Essas são apenas as opções padrão disponíveis no WordPress, mas e se você quisesse personalizar ainda mais suas tags? Nós lhe mostraremos como.

Vamos dar uma olhada em como estilizar facilmente as tags no WordPress.

Como estilizar a nuvem de tags padrão no WordPress

Depois de adicionar o bloco Tag Cloud a um post ou página, você pode personalizá-lo adicionando CSS personalizado.

O bloco de nuvem de tags inclui automaticamente classes CSS padrão geradas pelo WordPress que podem ser usadas para estilizá-las.

Para adicionar CSS personalizado ao seu site WordPress, basta acessar a página Appearance ” Customize (Aparência ” Personalizar ) e alternar para a guia Additional CSS (CSS adicional).

Você pode começar adicionando este código CSS personalizado como ponto de partida.

.tag-link-position-1 { font-size:40px!important;}
.tag-link-position-2 {  font-size:35px!important;}
.tag-link-position-3 { font-size:30px!important; }
.tag-link-position-4 { font-size:35px!important; }
.tag-link-position-5 {  font-size:30px!important; }
 
 
.tag-cloud-link {
    text-decoration:none;
    background-color:#fff;
}
.tag-link-count {
    background-color: #d6d6d6;
}

Como você pode ver, é possível usar a classe .tag-link-position para ajustar o estilo com base na posição dos links. As tags com mais publicações estão em uma posição mais alta e as tags com menos publicações estão em uma posição mais baixa.

Se você quiser que todas as tags do bloco da nuvem de tags tenham o mesmo tamanho, poderá usar o CSS a seguir:

.tag-cloud-link { 
font-size:16px !important;
border:1px solid #d6d6d6;
}
.tag-cloud-link {
    text-decoration:none;
    background-color:#fff;
}
.tag-link-count {
    background-color: #d6d6d6;
 
}

Esta é a aparência em nosso site de teste:

Estilo das tags de postagem no WordPress

Além de estilizar suas nuvens de tags, você também pode querer estilizar as tags de publicação que são exibidas nas publicações individuais do blog. Normalmente, o tema do WordPress as exibe na parte superior ou inferior do título ou do conteúdo da postagem.

Você pode passar o mouse sobre as tags e clicar com o botão direito do mouse para usar a ferramenta Inspecionar e visualizar as classes CSS usadas pelo seu tema do WordPress.

Depois disso, você pode usar essas classes CSS em seu CSS personalizado. Veja a seguir um exemplo de código baseado em classes CSS em nosso tema de teste:

.entry-tag { 
padding: 5px 8px;
border-radius: 12px;
text-transform: lowercase;
background-color: #e91e63;
color:#fff;
}
.entry-tags a { 
color:#fff;
font-size:small;
font-weight:bold;
}

Esta é a aparência em nosso site de teste.

Criação de uma nuvem de tags personalizada no WordPress

O bloco de nuvem de tags padrão é fácil de usar, mas alguns usuários avançados podem querer personalizá-lo para ter mais flexibilidade.

Esse método permite que você adicione suas próprias classes HTML e CSS ao redor da nuvem de tags. Você pode usá-lo para personalizar a aparência da nuvem de tags de acordo com seus próprios requisitos.

A primeira coisa que você precisa fazer é copiar e colar esse código no arquivo functions.php do seu tema ou em um plug-in de snippets de código:

function wpb_tags() { 
$wpbtags =  get_tags();
foreach ($wpbtags as $tag) { 
$string .= '<span class="tagbox"><a class="taglink" href="'. get_tag_link($tag->term_id) .'">'. $tag->name . '</a><span class="tagcount">'. $tag->count .'</span></span>' . "\n"   ;
} 
return $string;
} 
add_shortcode('wpbtags' , 'wpb_tags' );

Recomendamos adicionar esse código com o WPCode, o melhor plug-in de snippets de código para WordPress. Ele permite que você adicione facilmente códigos personalizados no WordPress sem editar o arquivo functions.php do seu tema, para não danificar seu site.

Para começar, instale e ative o plug-in gratuito WPCode. Se precisar de ajuda, consulte nosso tutorial sobre como instalar um plug-in do WordPress.

Depois que o plug-in for ativado, vá para Code Snippets ” Add Snippet no painel do WordPress.

Em seguida, passe o mouse sobre a opção “Add Your Custom Code (New Snippet)” (Adicionar seu código personalizado (novo snippet)) e clique no botão “Use snippet” (Usar snippet).

A partir daqui, você pode adicionar um título para o snippet na parte superior da página. Isso pode ser qualquer coisa que o ajude a lembrar para que serve o código.

Em seguida, cole o código acima na caixa “Code Preview” (Visualização de código) e selecione “PHP Snippet” como o tipo de código no menu suspenso.

Depois disso, basta alternar a chave de “Inativo” para “Ativo” e clicar no botão “Salvar snippet”.

Esse código adiciona um shortcode que exibe todas as suas tags com a contagem de postagens ao lado delas.

Para exibi-lo em sua página de arquivos ou em um widget, é necessário usar este shortcode:

[wpbtags]

O uso desse código sozinho mostrará apenas links de tags e a contagem de posts ao lado deles. Vamos adicionar um pouco de CSS para melhorar a aparência. Basta copiar e colar esse CSS personalizado em seu site.

.tagbox { 
background-color:#eee;
border: 1px solid #ccc;
margin:0px 10px 10px 0px;
line-height: 200%;
padding:2px 0 2px 2px;
  
}
.taglink  { 
padding:2px;
}
  
.tagbox a, .tagbox a:visited, .tagbox a:active { 
text-decoration:none;
}
  
.tagcount { 
background-color:green;
color:white;
position: relative;
padding:2px;
}

Sinta-se à vontade para modificar o CSS para atender às suas necessidades. Esta é a aparência em nosso site de demonstração:

Esperamos que este artigo tenha ajudado você a aprender como estilizar facilmente as tags no WordPress. Talvez você também queira ver nosso guia sobre como criar páginas de destino personalizadas no WordPress ou ver esta lista de dicas, truques e hacks úteis do WordPress.

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.