Skip to content

Tudo para WordPress, desenvolvimento web — e não só

📋 Classes CSS padrão do WordPress: uma folha de dicas completa para 2026
Temas WordPressWordPress
9 min1,790 palavras

📋 Classes CSS padrão do WordPress: uma folha de dicas completa para 2026

Abre o inspetor de código no seu site e vê dezenas de classes no <body>: .home .logged-in .single-postid-432. Não as escreveu, não há plugins envolvidos. De onde vêm?

O WordPress adicionou-as por si. O CMS anexa automaticamente classes ao <body>, envolve os artigos em post_class(), marca menus, widgets e comentários, tudo de raiz, sem uma única linha do seu código. O problema é que os principiantes ou não conhecem estas classes ou não percebem como usá-las. O resultado: quilómetros de CSS extra onde um único seletor padrão seria suficiente.

Esta folha de consulta é uma lista completa das classes CSS que o WordPress gera por defeito. Vai aprender a segmentar páginas específicas através das classes do body, a estilizar artigos por formato e a desenhar menus e widgets sem editar HTML. Apenas o que realmente é útil ao construir um tema ou personalizar um já existente.

Código HTML e CSS num ecrã de monitor

💡 Visão geral rápida:

  • Abra o inspetor de código em qualquer página do seu site, encontre as classes .home .single .logged-in no <body> e confirme que já estão no markup sem a sua intervenção.
  • Adicione a regra .search-results .sidebar { display: none; } ao style.css: a barra lateral desaparecerá apenas na página de pesquisa, deixando as outras páginas intactas.
  • Escreva post_class() no ciclo de artigos e estilize .format-video como um cartão largo enquanto .format-image recebe um layout quadrado: uma função, formatos diferentes, designs diferentes.
  • Agrupe seletores de widgets com vírgulas: .widget_categories ul, .widget_archive ul, .widget_pages ul { list-style: none; } e quatro widgets recebem um estilo idêntico numa só linha.

Como o WordPress gera classes CSS: body_class() e post_class()

O WordPress adiciona classes através de duas funções essenciais: body_class() e post_class(). Estão integradas no núcleo e são chamadas pelo tema ao renderizar a página. Não precisa de incluir nada: se o tema seguir os padrões do WordPress, estas funções já estão a funcionar.

body_class() produz uma lista de classes no atributo class da tag <body>. O conjunto de classes depende da página que o visitante está a ver: página inicial, categoria, pesquisa, artigo individual, arquivo. Estas classes permitem-lhe alterar seletivamente o fundo, o tipo de letra ou ocultar blocos em páginas específicas sem criar templates separados.

post_class() faz o mesmo para cada artigo no ciclo. Devolve classes como .format-image ou .sticky, que ajudam a distinguir um artigo fixo de uma galeria e a alterar o layout em conformidade.

Ambas as funções aceitam um parâmetro personalizado: pode adicionar a sua própria classe. Por exemplo:

1<body <?php body_class( 'my-custom-class' ); ?>>

Isto adiciona .my-custom-class a todas as páginas. Útil quando inclui um ficheiro CSS partilhado e quer um gancho único para o seu estilo.

Classes da tag body: lista completa

Este é o conjunto mais rico de classes no WordPress. Internamente, o body_class() analisa o URL atual, o tipo de página e o estado do utilizador, e depois produz dezenas de seletores. Abaixo está a lista completa do que pode encontrar no markup.

1.rtl {}
2.home {}
3.blog {}
4.archive {}
5.date {}
6.search {}
7.paged {}
8.attachment {}
9.error404 {}
10.single postid-(id) {}
11.attachmentid-(id) {}
12.attachment-(mime-type) {}
13.author {}
14.author-(user_nicename) {}
15.category {}
16.category-(slug) {}
17.tag {}
18.tag-(slug) {}
19.page-parent {}
20.page-child parent-pageid-(id) {}
21.page-template page-template-(template file name) {}
22.search-results {}
23.search-no-results {}
24.logged-in {}
25.paged-(page number) {}
26.single-paged-(page number) {}
27.page-paged-(page number) {}
28.category-paged-(page number) {}
29.tag-paged-(page number) {}
30.date-paged-(page number) {}
31.author-paged-(page number) {}
32.search-paged-(page number) {}

Na prática, o cenário mais comum é estilizar a página de pesquisa. Suponha que quer ocultar a barra lateral nos resultados de pesquisa. Em vez de editar o search.php, adicione isto ao style.css:

1.search-results .sidebar { display: none; }

A classe .search-results só está presente no <body> quando a página de pesquisa está ativa. Nas outras páginas, a barra lateral permanece no lugar. O mesmo princípio funciona para .error404 .archive .logged-in e qualquer outra classe da tabela.

Preste atenção às classes dinâmicas com sufixos: .category-(slug) .tag-(slug) .author-(user_nicename). Elas permitem-lhe estilizar uma página de categoria ou de autor específica. Por exemplo, .category-news .entry-title { color: red; } irá colorir os títulos apenas na categoria "Notícias".

Classes de artigos: post_class() e formatos de conteúdo

A função post_class() adiciona classes ao elemento <article> (ou qualquer que seja a tag que o seu tema usa para envolver os artigos). As classes são produzidas no atributo class e dependem do tipo de conteúdo.

1.post-id {}
2.post {}
3.page {}
4.attachment {}
5.sticky {}
6.hentry {}
7.category-misc {}
8.category-example {}
9.tag-news {}
10.tag-wordpress {}
11.tag-markup {}

Um grupo separado consiste nas classes de formato de artigo. O WordPress suporta formatos de raiz: imagem, galeria, chat, link, citação, estado, vídeo. O post_class() adiciona automaticamente .format-{type} a cada artigo.

1.format-image {}
2.format-gallery {}
3.format-chat {}
4.format-link {}
5.format-quote {}
6.format-status {}
7.format-video {}

Na prática, isto funciona da seguinte forma: exibe uma grelha de três colunas na página inicial, mas quer uma única coluna larga para o formato de vídeo. A solução é uma linha de CSS:

1.format-video { grid-column: span 3; }

A classe .sticky marca artigos fixos e .hentry serve como um marcador de microformato (usado por motores de busca e analisadores). O ponto principal: não remova o post_class() do template. Sem ele, o tema perde compatibilidade com plugins que dependem do markup padrão dos artigos.

Classes de menu de navegação: do contentor aos itens de submenu

Quando cria um menu no painel de administração do WordPress, ele é envolvido num contentor com uma classe que especificou ao registar o menu. No exemplo abaixo, esta é main-menu. Dentro está uma aninhagem padrão de <ul> → <li> → <a>, e cada nível recebe as suas próprias classes.

1#header .main-menu {}               /* menu container */
2#header .main-menu ul {}            /* first-level list */
3#header .main-menu ul ul {}         /* nested list (dropdown menu) */
4#header .main-menu li {}            /* menu item */
5#header .main-menu li a {}          /* item link */
6#header .main-menu li ul {}         /* dropdown items list */
7#header .main-menu li li {}         /* dropdown item */
8#header .main-menu li li a {}       /* dropdown item link */
9 
10.current_page_item {}               /* current page */
11.current-cat {}                     /* current category */
12.current-menu-item {}               /* any current item */
13.menu-item-type-taxonomy {}         /* type: category */
14.menu-item-type-post_type {}        /* type: page */
15.menu-item-type-custom {}           /* type: custom link */
16.menu-item-home {}                  /* link to home */

As classes .current_page_item, .current-cat e .current-menu-item são as mais úteis. Elas destacam automaticamente o item de menu ativo. Não precisa de escrever condições em PHP: basta definir um estilo para .current-menu-item a e o link ativo será realçado com cor ou sublinhado em qualquer página do site.

Classes do editor: imagens, galerias e legendas

O editor do WordPress (tanto o TinyMCE clássico como o Gutenberg baseado em blocos) adiciona classes padrão a <img>, galerias e legendas ao inserir ficheiros multimédia. Conhecendo estas classes, pode controlar o alinhamento de imagens e o estilo das galerias através do CSS do seu tema.

1.entry-content img {}
2.alignleft, img.alignleft {}
3.alignright, img.alignright {}
4.aligncenter, img.aligncenter {}
5.alignnone, img.alignnone {}
6 
7.wp-caption {}
8.wp-caption img {}
9.wp-caption p.wp-caption-text {}
10 
11.wp-smiley {}
12 
13blockquote.left {}
14blockquote.right {}
15 
16.gallery dl {}
17.gallery dt {}
18.gallery dd {}
19.gallery dl a {}
20.gallery dl img {}
21.gallery-caption {}
22 
23.size-full {}
24.size-large {}
25.size-medium {}
26.size-thumbnail {}

As classes .alignleft, .alignright e .aligncenter controlam a quebra de texto. O WordPress atribui-as automaticamente ao <img> quando o utilizador seleciona o alinhamento no editor. As classes .size-full, .size-large, .size-medium e .size-thumbnail correspondem aos tamanhos de miniaturas registados no tema, e pode usá-las para definir max-width ou border-radius para imagens de um tamanho específico.

.wp-caption e .wp-caption-text são o contentor e a legenda de uma imagem. Na maioria dos temas, a legenda tem um estilo mínimo: texto cinzento em itálico por baixo da fotografia. Conhecendo a classe, pode transformá-la num distintivo sobreposto elegante por cima da foto com uma única edição de CSS, sem necessidade de plugins.

Classes de widgets: pesquisa, categorias, calendário, nuvem de etiquetas

O WordPress inclui um conjunto de widgets padrão: Pesquisa, Categorias, Artigos Recentes, Nuvem de Etiquetas, Calendário, Meta, Arquivos, Páginas, Texto. Cada um tem o seu próprio invólucro CSS com classes previsíveis. Se não removeu os widgets padrão através de unregister_widget(), eles estão presentes na barra lateral.

1.widget {}
2 
3.widget_search {}
4#searchform {}
5.screen-reader-text {}
6 
7.widget_meta {}
8.widget_meta ul {}
9.widget_meta ul li {}
10.widget_meta ul li a {}
11 
12.widget_links {}
13.widget_links ul {}
14.widget_links ul li {}
15.widget_links ul li a {}
16 
17.widget_archive {}
18.widget_archive ul {}
19.widget_archive ul li {}
20.widget_archive ul li a {}
21.widget_archive select {}
22.widget_archive option {}
23 
24.widget_pages {}
25.widget_pages ul {}
26.widget_pages ul li {}
27.widget_pages ul li a {}
28 
29.widget_tag_cloud {}
30.widget_tag_cloud a {}
31.widget_tag_cloud a:after {}
32.widget_tag_cloud a:before {}
33 
34.widget_calendar {}
35#calendar_wrap {}
36#calendar_wrap th {}
37#calendar_wrap td {}
38#wp-calendar tr td {}
39#wp-calendar caption {}
40#wp-calendar a {}
41#wp-calendar #today {}
42#wp-calendar #prev {}
43#wp-calendar #next {}
44#wp-calendar #next a {}
45#wp-calendar #prev a {}
46 
47.widget_categories {}
48.widget_categories ul {}
49.widget_categories ul li {}
50.widget_categories ul ul.children {}
51.widget_categories a {}
52.widget_categories select {}
53.widget_categories select#cat {}
54.widget_categories select.postform {}
55.widget_categories option {}
56.widget_categories .level-0 {}
57.widget_categories .level-1 {}
58.widget_categories .level-2 {}
59.widget_categories .level-3 {}
60 
61.widget_recent_comments {}
62#recentcomments {}
63#recentcomments li {}
64#recentcomments li a {}
65 
66.widget_recent_entries {}
67.widget_recent_entries ul {}
68.widget_recent_entries ul li {}
69.widget_recent_entries ul li a {}
70 
71.widget_text {}
72.textwidget {}
73.textwidget p {}

Muitas classes partilham a mesma estrutura: Categorias, Arquivos, Páginas e Artigos Recentes têm todos um aninhamento idêntico de ul → li → a. Na prática, isto permite-lhe agrupar seletores com vírgulas e encurtar a sua folha de estilos:

1.widget_categories ul,
2.widget_archive ul,
3.widget_pages ul,
4.widget_recent_entries ul {
5    list-style: none;
6    padding-left: 0;
7}

Quatro widgets, uma linha de CSS. Sem conhecer as classes padrão, escreveria regras separadas para cada widget manualmente.

Classes de comentários: lista e formulário

Os comentários no WordPress têm o sistema de classes mais elaborado, especialmente se o tema suportar discussões em cadeia. Uma lista simples requer apenas três ou quatro seletores, mas o conjunto completo cobre aninhamento, paridade par/ímpar, autoria e profundidade.

1/* Comment list */
2.commentlist {}
3.commentlist li {}
4.commentlist li p {}
5.commentlist li ul {}
6.commentlist .reply {}
7.commentlist .reply a {}
8 
9.commentlist .alt {}
10.commentlist .odd {}
11.commentlist .even {}
12.commentlist .thread-alt {}
13.commentlist .thread-odd {}
14.commentlist .thread-even {}
15 
16.commentlist .vcard {}
17.commentlist .vcard cite.fn {}
18.commentlist .vcard span.says {}
19.commentlist .vcard img.photo {}
20.commentlist .vcard img.avatar {}
21.commentlist .vcard cite.fn a.url {}
22 
23.commentlist .comment-meta {}
24.commentlist .comment-meta a {}
25.commentlist .commentmetadata {}
26.commentlist .commentmetadata a {}
27 
28.commentlist .parent {}
29.commentlist .comment {}
30.commentlist .children {}
31.commentlist .pingback {}
32.commentlist .bypostauthor {}
33.commentlist .comment-author {}
34.commentlist .comment-author-admin {}
35 
36.commentlist li ul.children li {}
37.commentlist li ul.children li.alt {}
38.commentlist li ul.children li.byuser {}
39.commentlist li ul.children li.comment {}
40.commentlist li ul.children li.depth-{id} {}
41.commentlist li ul.children li.bypostauthor {}
42.commentlist li ul.children li.comment-author-admin {}
43 
44#cancel-comment-reply {}
45#cancel-comment-reply a {}
46 
47/* Comment form */
48#respond {}
49#reply-title {}
50#cancel-comment-reply-link {}
51#commentform {}
52#author {}
53#email {}
54#url {}
55#comment
56#submit
57.comment-notes {}
58.required {}
59.comment-form-author {}
60.comment-form-email {}
61.comment-form-url {}
62.comment-form-comment {}
63.form-allowed-tags {}
64.form-submit

As mais úteis na prática são .bypostauthor (destaca os comentários do autor do artigo com um distintivo colorido) e .depth-{id} (estilização por nível de aninhamento). As classes .odd/.even permitem alternar cores nos comentários para uma melhor legibilidade em discussões longas.

Vídeo: como usar as classes padrão do WordPress ao construir um tema

Uma demonstração prática é sempre mais clara do que uma cábula seca. Este vídeo mostra como encontrar e aplicar as classes padrão do WordPress ao personalizar um tema existente: desde o inspetor de código até às edições no style.css.

⁉️🤔 Perguntas frequentes

É obrigatório usar body_class() e post_class() no meu tema?

Sim, se estiver a desenvolver um tema para distribuição pública. É um requisito das normas de revisão de temas do WordPress: sem body_class() e post_class(), o tema não passará na revisão do diretório WordPress.org. Para um tema personalizado feito para si, não é obrigatório, mas estas funções poupam horas de trabalho ao estilizar páginas e tipos de conteúdo específicos.

Posso adicionar a minha própria classe ao body ou a um artigo?

Sim. Passe uma string com a classe na chamada da função: body_class('my-theme-body') adicionará .my-theme-body à tag <body>. Do mesmo modo, post_class('featured') funciona da mesma forma, e a classe .featured aparecerá nos artigos selecionados. Várias classes são passadas como um array: post_class( array( 'featured', 'no-sidebar' ) ).

As classes nesta folha de dicas ainda são válidas para o Gutenberg?

Sim. Embora o Gutenberg tenha mudado o editor, a marcação do front-end do WordPress permanece a mesma. body_class() e post_class() funcionam independentemente do editor, e o Gutenberg também usa as classes .align*, .wp-caption e as de galeria. As classes de widgets são válidas para widgets clássicos; para blocos na barra lateral, a estrutura difere, mas a classe base .widget é mantida.

Onde devo adicionar o meu CSS: no style.css do tema ou nas definições do personalizador?

Para edições que usam classes padrão do WordPress, o local mais seguro é o style.css de um tema filho. O CSS adicional no personalizador (Aparência → Personalizar → CSS adicional) também funciona, mas está vinculado ao tema ativo e é guardado na base de dados: quando mudar de tema, os estilos perdem-se. Se estiver a personalizar o tema de outra pessoa, crie um tema filho e faça as alterações aí.

O que devo fazer se o tema não gerar as classes padrão?

Verifique o header.php para confirmar a presença de body_class() dentro da tag <body>. Se a chamada estiver em falta, adicione-a. Do mesmo modo, nos templates de loop: post_class() deve estar no atributo class do elemento que envolve os artigos. Isto raramente acontece em temas comerciais, mas é comum em temas antigos ou feitos à medida.

O que retirar primeiro desta folha de dicas

Se já construiu um ou dois temas e não quer memorizar todas as classes, lembre-se de três pontos principais.

Primeiro. body_class() é a sua principal ferramenta para estilizar páginas específicas. .home, .single, .category-slug, .logged-in cobrem a maioria das tarefas de personalização sem editar templates.

Segundo. post_class() com formatos (.format-video, .format-gallery) permite-lhe construir uma grelha de artigos onde cada formato tem um aspeto diferente, sem plugins ou condições extra no loop.

Terceiro. As classes padrão de widgets (ul → li → a) são idênticas em todos os widgets. Agrupe os seletores com vírgulas e o seu style.css ficará com metade do tamanho.

Guarde esta folha de dicas nos favoritos. Da próxima vez que abrir o inspetor de código e vir uma classe desconhecida no <body>, saberá de onde veio e como usá-la.

Redação
RedaçãoEquipa editorial→ All publications

Uma equipa profissional de escritores e editores especializados na criação de conteúdo de qualidade.