Ao longo dos anos, o WPBeginner recebeu muitas perguntas sobre tags, uma delas sendo se vale a pena o esforço para estilizar as tags do WordPress para que se destaquem em uma página.
As tags ajudam você a organizar seu conteúdo em tópicos. Elas são como hashtags para suas postagens de blog do WordPress e ajudam os usuários a descobrir mais conteúdo. Mas, em nossa experiência, se elas não se destacarem visualmente, podem ser ignoradas.
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ê organize o conteúdo em tópicos mais específicos.
Muitos temas populares do WordPress exibem tags no topo ou no final de suas postagens por padrão.
No entanto, você também pode exibir tags em páginas de arquivo, rodapé, barras laterais e quase em qualquer lugar que você desejar no WordPress.
Para inserir uma nuvem de tags em suas postagens, páginas e widgets de barra lateral, você pode simplesmente 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 postagens. Você também pode optar por exibir o número de postagens 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? Mostraremos como.
Vamos dar uma olhada em como estilizar facilmente as tags no WordPress.
Estilizando a Nuvem de Tags Padrão no WordPress
Depois de adicionar o bloco Nuvem de Tags a uma postagem ou página, você pode personalizá-lo adicionando CSS personalizado.
O bloco de nuvem de tags inclui automaticamente classes CSS geradas pelo WordPress que podem ser usadas para estilizar.
Para adicionar CSS personalizado ao seu site WordPress, basta ir para a página Aparência » Personalizar e mudar para a aba 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, você pode usar a classe .tag-link-position para ajustar o estilo com base na posição dos links. Tags com mais postagens ficam mais altas na posição, e tags com menos postagens ficam mais baixas.
Se você gostaria que todas as tags em seu bloco de nuvem de tags tivessem o mesmo tamanho, então você pode usar o seguinte CSS em vez disso:
.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;
}
É assim que ficou em nosso site de teste:
Estilizando Tags de Postagem no WordPress
Além de estilizar suas nuvens de tags, você também pode querer estilizar as tags de postagem exibidas em suas postagens de blog individuais. Geralmente, seu tema WordPress as exibirá no topo ou no final do título da postagem ou do conteúdo da postagem.
Você pode passar o mouse sobre as tags e clicar com o botão direito para usar a ferramenta Inspecionar para visualizar as classes CSS usadas pelo seu tema WordPress.
Depois disso, você pode usar essas classes CSS em seu CSS personalizado. Abaixo está 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;
}
É assim que ficou em nosso site de teste.
Criando 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.
Este método permite que você adicione suas próprias classes HTML e CSS envolvendo a nuvem de tags. Você pode então 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 este código no arquivo functions.php do seu tema ou em um plugin 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 este código com WPCode, o melhor plugin de snippets de código para WordPress. Ele permite que você adicione facilmente código personalizado no WordPress sem editar o arquivo functions.php do seu tema, para que você não quebre seu site.
Para começar, instale e ative o plugin gratuito WPCode. Se precisar de ajuda, veja nosso tutorial sobre como instalar um plugin do WordPress.
Assim que o plugin for ativado, vá para Snippets de Código » Adicionar Snippet no painel do WordPress.
Em seguida, passe o mouse sobre a opção ‘Adicionar seu código personalizado (Novo Snippet)’ e clique no botão ‘Usar snippet’.
A partir daqui, você precisa selecionar ‘Snippet PHP’ como tipo de código na lista de opções que aparecem na tela.
Em seguida, você pode adicionar um título para o snippet na parte superior da página. Pode ser qualquer coisa para ajudá-lo a lembrar para que serve o código.
Em seguida, simplesmente cole o código acima na caixa ‘Pré-visualização do Código’.
Depois disso, tudo o que você precisa fazer é alternar o interruptor de ‘Inativo’ para ‘Ativo’ e clicar no botão ‘Salvar Snippet’.
Este código adiciona um shortcode que exibe todas as suas tags com a contagem de posts ao lado delas.
Para exibi-lo na sua página de arquivos ou em um widget, você precisa usar este shortcode:
[wpbtags]
Usar apenas este código mostrará apenas links de tags e a contagem de posts ao lado deles. Vamos adicionar um pouco de CSS para deixá-lo com uma aparência melhor. Simplesmente copie e cole este 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. É assim que ficou em nosso site de demonstração:
Esperamos que este artigo tenha ajudado você a aprender como estilizar facilmente tags no WordPress. Você também pode querer ver nosso guia sobre como ocultar ou estilizar suas subcategorias no WordPress ou ver esta lista de dicas, truques e hacks úteis do 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.
kzain
Estilizar tags no WordPress pode fazer uma grande diferença na aparência geral de um blog. Adoro que você tenha detalhado o processo em etapas simples; os exemplos de CSS são muito úteis. Sua dica de usar um tema filho para evitar perder personalizações também é muito apreciada. Agora, posso finalmente dar às minhas tags a reformulação que elas merecem! Obrigado por compartilhar sua experiência e tornar a personalização do WordPress mais acessível para todos nós.
Jiří Vaněk
Quando li este artigo, tive vontade de criar minha própria nuvem de tags. Usei seu trecho, mas modifiquei as cores e arredondei ligeiramente os cantos. Funcionou como mágica. É bom ter tags na mesma cor do tema do site inteiro. Pode ser um pequeno detalhe, mas é muito agradável.
Dennis Muthomi
o guia passo a passo e os trechos de código são muito úteis
PERGUNTA RÁPIDA: Se eu aplicar esses trechos de código para estilizar minhas tags e, mais tarde, decidir mudar meu tema do WordPress, a estilização das tags mudará de acordo com os estilos padrão do novo tema, ou permanecerá com as personalizações que fiz usando esses trechos de código?
Comentários WPBeginner
O CSS que você adicionou deve permanecer, mas você ainda pode ter que editar o CSS dependendo de como o CSS do novo tema afeta a estilização e se houver conflitos.
Dennis Muthomi
Olá, obrigado pela esclarecedora ajuda!
Desde que eu possa manter as personalizações com alguns ajustes menores, isso é muito útil de saber.
Uma pergunta de acompanhamento – ao trocar de temas, qual seria a melhor maneira de verificar e resolver quaisquer conflitos de CSS que afetem a estilização das tags?
WPBeginner Support
Não temos uma melhor maneira específica que recomendaríamos. Seria algo que você precisaria verificar manualmente.
Jiří Vaněk
Apenas dando seguimento à pergunta do Dennis. É melhor adicionar CSS usando o WP Code ou colocá-lo diretamente no template? Assumo que se eu colocá-lo no template, perderei as configurações ao mudar de tema, mas se eu usar o WP Code, os estilos permanecerão mesmo após a mudança de tema. Isso está correto?
Comentários WPBeginner
Correto. Isso é semelhante a usar a seção CSS Adicional no Personalizador do tema.
Dito isso, o CSS necessário será diferente de tema para tema, então a utilidade variará.
Nikola
Ótimo guia, obrigado!
Seria possível ordenar as tags por mais usadas e limitar o número de tags exibidas?
WPBeginner Support
No momento, você precisaria usar um plugin para isso ou código personalizado, não temos um método recomendado para isso no momento.
Admin
Jemma Pollari
Incrível, obrigado. Isso realmente ajudou.
WPBeginner Support
Glad our guide could help
Admin
Joe Smith
Isso é ótimo! Exatamente o que eu estava procurando e muito elegante. Apenas uma pergunta: Se eu quisesse adicionar mais espaço entre as tags, como eu modificaria o CSS? Tentei mudar várias das configurações no CSS acima, mas nenhuma delas simplesmente adiciona espaço em branco entre as tags.
WPBeginner Support
You would want to increase the padding for what you’re wanting
Admin
Ibiye Ambille
Olá, eu adoraria mover a tag do meu post para baixo da imagem destacada
WPBeginner Support
Para isso, você deve entrar em contato com o suporte do seu tema específico para obter assistência, pois cada tema tem sua própria localização para a imagem destacada.
Admin
Trishah
Estou tentando adicionar uma classe CSS "current" às tags de um post individual. As poucas soluções que encontrei não parecem mais funcionar. Como eu faria isso?
WPBeginner Support
Isso variaria com base no seu tema específico, se você entrar em contato com o suporte do seu tema, eles devem ser capazes de informar onde você pode adicionar essa classe para suas tags.
Admin
uche Peter
Minhas tags estão listadas em série.. Sem Borda nada nada,,, apenas um texto ... por favor, como faço para dar uma borda com cor de fundo?
Kingsolomon
Como aplico o CSS, por favor?
Hugo
Minha nuvem de tags não aparece como uma nuvem, mas como uma lista, pois após cada span é inserida uma quebra de linha. Como posso remover essas quebras de linha?
WPBeginner Support
Olá Hugo,
Este artigo discute como estilizar tags de diferentes maneiras. Se você quiser uma nuvem de tags, pode usar o widget padrão de nuvem de tags do WordPress. Você também pode usar a tag de modelo
1-click Use in WordPress
Admin
bob
Entendi que você mostrou outra página sobre como limitar tags a um certo número, mas como posso fazer isso com este exemplo incluído? Não parece funcionar usando o método vinculado em combinação com este.
Amy Croson
Estou com dificuldades para adicionar isso e acredito que seja devido às limitações do meu tema 'Chosen'. Copiei e colei tudo no meu php e está me dando erros por todos os lados. Atualmente estou sendo informado que há um '.' desconhecido neste detalhe. Existe alguma maneira de formatar isso sem usar os '.' antes de .taglink, .tagbox e .tagcount?
Val Archer
Olá – Estou procurando uma maneira de listar tags em uma página category-slug.php. Você por acaso sabe onde posso encontrar esse tutorial?
Até agora, criei uma categoria [sitename]/category/recipes e um category-recipes.php.
Estou marcando as receitas, por exemplo, Café da Manhã, Jantar, etc.
Gostaria que as Tags fossem exibidas em category-recipes.php assim. Não sei o que estou fazendo. Estou copiando do meu arquivo category.php.
Arquivos da Categoria:
Café da manhã
agora lista todas as postagens marcadas com Café da manhã algo como isto:
<a href="”>
por / / postado em nome_categoria . ‘ ‘;} ?>
Jantar
agora lista todas as postagens marcadas com Jantar algo como isto:
<a href="”>
por / / postado em nome_categoria . ‘ ‘;} ?>
[Então no final de todas as Tags:]
</div
Por favor, você sabe onde posso obter ajuda com isso?
obrigado! – Val
WPBeginner Support
Você tentou adicionar:
<?php the_tags('postado em:', '' ,'' ); ?>Admin
Magistar
O código funciona bem para uma nuvem de tags. No entanto, eu gostaria de aplicar isso às tags de postagem (significando as tags associadas a uma postagem e sua contagem, em vez da lista grande).
Eu tentei algo com wp_get_post_tags, mas não consegui fazer funcionar. Alguma sugestão?
Equipe WPBeginner
Você pode usar get_terms em vez de get_tags, veja esta página do codex:
http://codex.wordpress.org/Function_Reference/get_terms
DER KUNSTBLOG
Isso é ótimo, adicionei seu código a um plugin específico do site – mas há alguma possibilidade de alterá-lo de forma que o tamanho da fonte varie de acordo com a frequência com que a tag é usada? Alguma ideia, por favor? Obrigado!
Equipe WPBeginner
Sim, é possível. Na primeira parte do código, você precisaria substituir get_tags pela função wp_tag_cloud. Assim:
$wpbtags = wp_tag_cloud('smallest=15&largest=40&number=50&orderby=count&format=array');
Convidado
Como fazer o mesmo com a nuvem de tags personalizada para Categorias e Taxonomias Personalizadas?
Terence O'Neill
Olá amigo; Como faço exatamente o mesmo (exibir com shortcode) para Categorias e Taxonomias Personalizadas? Obrigado pelo tutorial, aliás. Funciona perfeitamente.