O WordPress adiciona suas próprias classes CSS a diferentes elementos na maioria dos temas. Essas classes padrão ajudam a estilizar várias partes do seu site automaticamente.
Conhecer essas classes CSS padrão pode ser muito útil. Elas facilitam a personalização da aparência do seu site sem começar do zero.
Por exemplo, depois que começamos a usar CSS em nossos sites, achamos muito mais fácil estilizar o conteúdo do nosso blog para destacá-lo.
Neste artigo, você encontrará uma folha de consulta (cheat sheet) dessas classes CSS geradas pelo WordPress. Também mostraremos como encontrar mais classes CSS e adicionar as suas quando precisar delas.
Por que aprender sobre o CSS padrão gerado pelo WordPress?
O WordPress gera e adiciona automaticamente classes CSS padrão a diferentes elementos no seu site WordPress.
Desenvolvedores de temas podem brincar com essas classes CSS padrão para estilizar áreas comuns de sites WordPress, como áreas de conteúdo, barras laterais, widgets, menus de navegação e mais.
Portanto, conhecer essas classes CSS é útil se você está aprendendo desenvolvimento de temas WordPress ou simplesmente tentando criar um tema filho para o seu próprio site.
Ele também ajuda você a estilizar rapidamente certos elementos no seu tema WordPress adicionando CSS personalizado sem criar seu próprio tema.
Observação: Você não precisa aprender CSS para alterar os estilos do seu tema ou criar um tema personalizado. Se você prefere não aprender a codificar, pode usar um construtor de arrastar e soltar como o SeedProd. Falaremos mais sobre isso mais tarde no artigo.
Nas seções a seguir, compartilharemos as classes CSS padrão geradas pelo WordPress. Aqui está uma visão geral rápida de todas as coisas que abordaremos neste artigo:
- Estilos de Classe de Corpo Padrão
- Classes de Estilo de Postagem Padrão
- Classes de Menu de Navegação Padrão
- Classes de Widget Padrão do WordPress
- Classes de Formulário de Comentário Padrão
- Encontrando Classes de Bloco do WordPress
- Adicionando Suas Próprias Classes CSS Personalizadas no WordPress
- Bônus: Projete Facilmente um Tema WordPress Sem Escrever Código CSS
Sem mais delongas, vamos mergulhar e aprender como fazer seu site WordPress ficar exatamente como você deseja!
Estilos de Classe de Corpo Padrão
Em HTML, a tag <body> contém a estrutura de layout de qualquer página da web, tornando-a muito importante no design de temas WordPress.
O WordPress adiciona várias classes CSS à tag body. Os designers de temas podem usar essas classes para estilizar o contêiner do corpo de forma eficaz.
// Added when a website is using a right-to-left language e.g. Arabic, Hebrew
.rtl {}
// Added when home page is being displayed
.home {}
// Added when blog page is being displayed
.blog {}
// Added when an Archive page is being displayed
.archive {}
// Added when a date based archive is displayed
.date {}
// Added on search pages
.search {}
// Added when pagination is enabled
.paged {}
// Added when an attachment page is displayed
.attachment {}
// Added when a 404 error page is displayed
.error404 {}
// Added when a single post is dispayed includes post ID
.single postid-(id) {}
// Added when a single attachment is displayed. Includes attachment ID
.attachmentid-(id) {}
// Added when a single attachment is displayed. Includes attachment mime-type
.attachment-(mime-type) {}
// Added when an author page is displayed
.author {}
// Added when an author page is displayed. Includes author name.
.author-(user_nicename) {}
// Added when a category page is displayed
.category {}
//Added when a category page is displayed. Includes category slug.
.category-(slug) {}
// Added when a tag page is displayed.
.tag {}
// Added when a tag page is displayed. Includes tag slug.
.tag-(slug) {}
// Added when a parent page is displayed.
.page-parent {}
// Added when a child page is displayed. Includes parent page ID.
.page-child parent-pageid-(id) {}
// Added when a page is displayed using page template. Includes page template file name.
.page-template page-template-(template file name) {}
// Added when search results are displayed.
.search-results {}
// Added when search returns no results.
.search-no-results {}
// Added when a logged in user is detected.
.logged-in {}
// Added when a paginated page is displayed. Includes page number.
.paged-(page number) {}
// Added when a paginated single item is displayed. Includes page number.
.single-paged-(page number) {}
// Added when a paged page type is displayed. Includes page number.
.page-paged-(page number) {}
// Added when a paged category page is displayed. Includes page number.
.category-paged-(page number) {}
// Added when a paged tag page is displayed. Includes page number.
.tag-paged-(page number) {}
//Added when a paged date based archive page is displayed. Includes page number.
.date-paged-(page number) {}
// Added when a paged author page is displayed. Includes page number.
.author-paged-(page number) {}
// Added when a paaged search page is displayed. Includes page number.
.search-paged-(page number) {}
Como você pode ver, essas classes incluem uma ampla variedade de condições que você pode segmentar em seus estilos CSS.
Por exemplo, se você quisesse que a página da categoria 'Notícias' tivesse uma cor de fundo diferente, você pode adicionar o seguinte CSS personalizado.
.category-news {
background-color:#f7f7f7;
}
Dica de especialista: Precisa de uma maneira fácil de adicionar trechos de CSS e código no WordPress? Experimente o plugin gratuito WPCode para tornar seus trechos de código à prova de futuro.
Classes de Estilo de Postagem Padrão
Assim como com o elemento body, o WordPress também adiciona classes dinâmicas aos elementos de postagem.
Este elemento geralmente é a tag <article> no template do seu tema. No entanto, pode ser qualquer outra tag, dependendo do seu tema do WordPress. As classes CSS de postagem são exibidas no seu tema adicionando a tag de template post_class().
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
Aqui está uma lista de algumas das classes CSS mais comuns geradas pela função post_class():
// Adds a class with ID for single items
.post-(ID) {}
// Generic post claass added for single blog posts.
.post {}
// Generic page class added when a single page is displayed.
.page {}
// Generic attachment class added to attachment pages.
.attachment {}
// Adds a post type class e.g. type-post
.type(post-type){}
// Adds a class for post format if theme supports posts formats. E.g. format-standard
.format-(post-format){}
// Added when an item has a featured image
.has-post-thumbnail{}
// Added when a sticky post is displayed
.sticky {}
// Generic class to display an entry
.hentry {}
// Classes with categories assigned to a post. E.g. category-news category-movies
.category-(slug) {}
// Classes with tags assigned to a post. e.g. tag-photofriday tag-tgif
.tag-(slug) {}
As classes de postagem permitem que você estilize postagens e páginas de blog que correspondam a diferentes condições. Por exemplo, você pode estilizar postagens de blog arquivadas em uma categoria específica de forma diferente usando o seguinte CSS personalizado:
.category-news {
background-color:#EFEFEF;
}
Se você não vir o editor de CSS no seu painel do WordPress, siga nosso tutorial sobre como corrigir o Personalizador de Tema ausente do WordPress.
Classes de Menu de Navegação Padrão
O WordPress também adiciona classes CSS aos menus de navegação. As seguintes são as classes padrão adicionadas aos menus de navegação.
// Class for Current Page
.current_page_item{}
// Class for Current Category
.current-cat{}
// Class for any other current Menu Item
.current-menu-item{}
// Class for a taxonomies
.menu-item-type-(taxonomy){}
// class to distinguish post types.
.menu-item-type-(post_type){}
// Class for any custom item that you added
.menu-item-type-custom{}
// Class for the Home Link
.menu-item-home{}
Seu tema do WordPress também adicionará uma classe CSS a cada local de menu de navegação.
Vamos supor que seu tema atribua a classe de menu principal a um local de menu dentro da área do cabeçalho, e então você pode direcioná-lo em seu CSS usando as seguintes classes CSS.
// container class
#header .primary-menu{}
// container class first unordered list
#header .primary-menu ul {}
//unordered list within an unordered list
#header .primary-menu ul ul {}
// each navigation item
#header .primary-menu li {}
// each navigation item anchor
#header .primary-menu li a {}
// unordered list if there is drop down items
#header .primary-menu li ul {}
// each drop down navigation item
#header .primary-menu li li {}
// each drap down navigation item anchor
#header .primary-menu li li a {}
Para mais detalhes, você pode ver nosso guia sobre como estilizar menus de navegação no WordPress.
Classes de Widget Padrão do WordPress
Widgets são uma maneira fácil de exibir blocos que não são de conteúdo em seu tema do WordPress. Eles são tipicamente exibidos em áreas prontas para widgets dedicadas ou barras laterais.
O WordPress adiciona as seguintes classes aos widgets legados.
.widget {}
#searchform {}
.widget_search {}
.screen-reader-text {}
.widget_meta {}
.widget_meta ul {}
.widget_meta ul li {}
.widget_meta ul li a {}
.widget_links {}
.widget_links ul {}
.widget_links ul li {}
.widget_links ul li a {}
.widget_archive {}
.widget_archive ul {}
.widget_archive ul li {}
.widget_archive ul li a {}
.widget_archive select {}
.widget_archive option {}
.widget_pages {}
.widget_pages ul {}
.widget_pages ul li {}
.widget_pages ul li a {}
.widget_links {}
.widget_links li:after {}
.widget_links li:before {}
.widget_tag_cloud {}
.widget_tag_cloud a {}
.widget_tag_cloud a:after {}
.widget_tag_cloud a:before {}
.widget_calendar {}
#calendar_wrap {}
#calendar_wrap th {}
#calendar_wrap td {}
#wp-calendar tr td {}
#wp-calendar caption {}
#wp-calendar a {}
#wp-calendar #today {}
#wp-calendar #prev {}
#wp-calendar #next {}
#wp-calendar #next a {}
#wp-calendar #prev a {}
.widget_categories {}
.widget_categories ul {}
.widget_categories ul li {}
.widget_categories ul ul.children {}
.widget_categories a {}
.widget_categories select{}
.widget_categories select#cat {}
.widget_categories select.postform {}
.widget_categories option {}
.widget_categories .level-0 {}
.widget_categories .level-1 {}
.widget_categories .level-2 {}
.widget_categories .level-3 {}
.recentcomments {}
#recentcomments {}
#recentcomments li {}
#recentcomments li a {}
.widget_recent_comments {}
.widget_recent_entries {}
.widget_recent_entries ul {}
.widget_recent_entries ul li {}
.widget_recent_entries ul li a {}
.textwidget {}
.widget_text {}
.textwidget p {}
No entanto, à medida que o WordPress avança para áreas de widgets baseadas em blocos, você agora pode adicionar diferentes blocos às suas áreas de widgets, e cada um gera classes CSS dinamicamente.
Mostraremos como encontrar essas classes CSS mais adiante neste artigo.
Classes de Formulário de Comentário Padrão
Comentários são o centro de engajamento para muitos sites WordPress. Estilizá-los ajuda você a fornecer aos usuários uma experiência mais limpa e envolvente.
O WordPress adiciona as seguintes classes CSS padrão para ajudar os desenvolvedores de temas a estilizar áreas de comentários.
/*Comment Output*/
.commentlist .reply {}
.commentlist .reply a {}
.commentlist .alt {}
.commentlist .odd {}
.commentlist .even {}
.commentlist .thread-alt {}
.commentlist .thread-odd {}
.commentlist .thread-even {}
.commentlist li ul.children .alt {}
.commentlist li ul.children .odd {}
.commentlist li ul.children .even {}
.commentlist .vcard {}
.commentlist .vcard cite.fn {}
.commentlist .vcard span.says {}
.commentlist .vcard img.photo {}
.commentlist .vcard img.avatar {}
.commentlist .vcard cite.fn a.url {}
.commentlist .comment-meta {}
.commentlist .comment-meta a {}
.commentlist .commentmetadata {}
.commentlist .commentmetadata a {}
.commentlist .parent {}
.commentlist .comment {}
.commentlist .children {}
.commentlist .pingback {}
.commentlist .bypostauthor {}
.commentlist .comment-author {}
.commentlist .comment-author-admin {}
.commentlist {}
.commentlist li {}
.commentlist li p {}
.commentlist li ul {}
.commentlist li ul.children li {}
.commentlist li ul.children li.alt {}
.commentlist li ul.children li.byuser {}
.commentlist li ul.children li.comment {}
.commentlist li ul.children li.depth-{id} {}
.commentlist li ul.children li.bypostauthor {}
.commentlist li ul.children li.comment-author-admin {}
#cancel-comment-reply {}
#cancel-comment-reply a {}
/*Comment Form */
#respond { }
#reply-title { }
#cancel-comment-reply-link { }
#commentform { }
#author { }
#email { }
#url { }
#comment
#submit
.comment-notes { }
.required { }
.comment-form-author { }
.comment-form-email { }
.comment-form-url { }
.comment-form-comment { }
.form-allowed-tags { }
.form-submit
Para mais detalhes, veja nosso guia sobre como estilizar comentários no WordPress.
Encontrando Classes de Bloco do WordPress
O editor de blocos do WordPress gera dinamicamente classes CSS para os blocos.
Para encontrar essas classes CSS, você primeiro precisará adicionar um bloco específico a uma postagem ou página. Em seguida, você desejará clicar no botão 'Visualizar' para ver o bloco em ação.
Na aba de visualização, simplesmente mova o mouse para o bloco que você acabou de adicionar e clique com o botão direito para selecionar a ferramenta Inspecionar.
No console do desenvolvedor, você verá o HTML gerado pelo bloco e as classes CSS que ele adicionou.
Na captura de tela acima, estamos olhando para as classes CSS do bloco Galeria. Você pode então usar essas classes CSS para estilizar o bloco de galeria em seu tema do WordPress.
Adicionando Suas Próprias Classes CSS Personalizadas no WordPress
Agora, as classes CSS padrão do WordPress são bastante abrangentes. No entanto, seu propósito é principalmente fornecer aos desenvolvedores de temas uma estrutura padronizada para construir.
Para o seu site, você pode precisar adicionar CSS personalizado em áreas onde as classes CSS padrão não estão disponíveis.
Da mesma forma, você pode querer fazer pequenas alterações em uma postagem ou página específica sem afetar todo o seu tema.
Felizmente, o WordPress oferece várias maneiras fáceis de adicionar classes CSS a diferentes áreas. Aqui estão vários métodos:
Adicionar Classes CSS Personalizadas a um Bloco Dentro do Editor de Blocos
Se você quiser adicionar rapidamente uma classe CSS personalizada a uma postagem ou página específica, a maneira mais fácil de fazer isso é usando o editor de blocos.
Simplesmente edite a postagem ou página e selecione o bloco onde você deseja adicionar uma classe CSS personalizada. Em configurações do bloco, clique no painel 'Avançado' e adicione o nome para sua classe CSS.
Não se esqueça de salvar suas alterações clicando no botão 'Atualizar'.
Agora você pode usar esta classe para adicionar código CSS personalizado que afetará apenas este bloco específico neste post ou página.
Em Menus de Navegação do WordPress
Você também pode adicionar CSS personalizado aos seus itens de menu de navegação do WordPress. Digamos que você queira converter um item de menu em um botão, então este método é útil.
Simplesmente vá para a página Aparência » Menus e clique no botão ‘Opções de Tela’ no canto superior direito da tela.
A partir daqui, você vai querer marcar a caixa ao lado da opção ‘Classes CSS’.
Em seguida, role para baixo e expanda o item do menu onde você deseja adicionar a classe CSS personalizada.
Você notará um campo rotulado como Classes CSS. Adicione sua classe CSS personalizada aqui.
Não se esqueça de clicar no botão ‘Salvar Menu’ para manter suas alterações.
Agora você pode usar essa classe CSS personalizada para estilizar esse item de menu específico de forma diferente.
Bônus: Projete Facilmente um Tema WordPress Sem Escrever Código CSS
Aprender a estilizar seu tema WordPress com CSS personalizado é uma habilidade muito útil. No entanto, alguns usuários podem simplesmente querer uma solução para projetar seu tema WordPress sem escrever nenhum código CSS.
Para isso, você precisará do SeedProd. É a melhor ferramenta de construtor de páginas WordPress do mercado para criar facilmente temas personalizados sem escrever nenhum código.
O SeedProd vem com temas prontos para usar que você pode usar como ponto de partida.
Se desejar, você também pode criar um tema do zero.
Após escolher um modelo, você estará pronto para editar seu tema personalizado usando um editor intuitivo de arrastar e soltar.
Simplesmente arraste e solte blocos em seu design para criar seus próprios layouts.
Você também pode alterar facilmente qualquer item com um simples clique. Além disso, você pode usar suas próprias cores, plano de fundo, fontes e muito mais.
Para mais detalhes, veja nosso tutorial passo a passo sobre como criar um tema WordPress personalizado facilmente sem escrever nenhum código.
Esperamos que este artigo tenha ajudado você a encontrar a folha de dicas de CSS gerada pelo WordPress. Em seguida, você também pode querer ver nosso guia sobre como minificar arquivos CSS ou JavaScript no WordPress e como remover CSS não utilizado no 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.
Gwyneth Llewelyn
Uma referência realmente, realmente útil — especialmente quando você deseja adicionar algum estilo 'extra', e a maneira mais fácil de fazer isso é simplesmente usar um dos estilos integrados (já que todos os blocos permitem adicionar classes extras — mas nem todos os temas permitem adicionar CSS extra, a menos que você crie seu próprio tema filho, etc.)
Será que, entre as classes CSS 'mais novas', a Automattic forneceu algo para estilizar os separadores. Eu adoro notas de rodapé e as uso *muito* (mesmo antes de serem 'padrão' no WP, lá nos tempos de 6.3!), mas não gosto do estilo minimalista que elas têm. O WordPress admite totalmente que este é um 'trabalho em andamento' e há pouca coisa a mais que pode ser alterada do que alguns atributos de fonte: https://wordpress.org/documentation/article/footnotes-block/
Portanto — CSS para o resgate! Eu só preciso de uma classe básica que lhe dê uma `width=30%`. Eu esperava conseguir algo assim da sua lista extensa, mas receio que não — pelo menos não até o outono de 2025.
Obrigado de qualquer forma. Sua lista é, no entanto, bastante útil!
Moinuddin Waheed
Folha de consulta muito útil para aqueles que têm um pouco de experiência em desenvolvimento e experiência prática com CSS.
Isso será muito útil para fazer alterações na aparência visual e torná-la bonita.
Obrigado por fazer esta folha de consulta.
Mrteesurez
Bom trabalho, você criou folhas de dicas de CSS úteis. Elas facilitarão o tratamento adequado do estilo, uma vez dominadas. Obrigado por dedicar seu tempo para combinar essas folhas de dicas de CSS para nós.
Rodrigo Vieira Eufrasio da Silva
Vocês merecem parabéns por este conteúdo maravilhoso. Eu apenas recomendaria atualizar este artigo e nos informar quais classes são geradas pelo Gutenberg e pela versão mais recente do WordPress, pois esta postagem está desatualizada. Mas me ajudou muito.
Abraços a todos vocês.
WPBeginner Support
Thank you for letting us know, we’ll be sure to take a look
Admin
Alison Westall
Existe uma classe CSS para alterar o preenchimento de um elemento? Obrigado!
WPBeginner Support
Uma vez que você encontrar o objeto ao qual deseja adicionar preenchimento, você usaria:
padding, padding-top, padding-right, padding-bottom, padding-left
dependendo do tipo de preenchimento que você deseja adicionar
Admin
Matt Cauley
Obrigado pelas informações. Acabei de salvar a página nos favoritos, mesmo que já tenha alguns anos!
WPBeginner Support
Thank you, while the article is older, it should still be useful
Admin
MS Shohan
Ótimo trabalho, irmão. Obrigado por fazer uma lista de todas as classes padrão do WP
Hannah Steele
Olá, estou com muita dificuldade para formatar a página de eventos gerada automaticamente.
Pode me ajudar?
Arunjith RS
Muito útil.. Obrigado.
Shai
Você pode (se ainda não estiver em outro lugar) listar as classes do painel de administração e dos widgets de administração.
Parece que o admin está usando um loader (wp-admin/load-styles.php) para incluir seu CSS, mas esse CSS está compactado e é difícil de ler. Seria bom ver uma lista dos itens em uso. por exemplo, se você quiser criar seu próprio widget com abas; Inspecionei o CSS e posso ver uma longa lista de classes relacionadas a .nav-tab.
Ari Susanto
e o próprio “entry-content”!
Ari Susanto
Eu quero adicionar este:
“status-publish”
luroch
Uma pergunta: ao criar um tema bootstrap a partir de underscores, devo manter as classes e ids que vêm com este framework, apenas adicionando os do Bootstrap, ou posso usar apenas classes e ids do Bootstrap?
Ari Susanto
Como você as encontrou? Existe uma maneira automatizada como usar uma função php, talvez?
Stephen Clark
Post fantástico e muito informativo. Curioso se você poderia complementar este post com detalhes semelhantes sobre o rodapé do WP. Tenho lutado com a estilização e formatação do rodapé com o tema que estou usando e com alguns outros sites que construí.
Também seria útil ter um arquivo de folha de estilos CSS para download contendo todos esses estilos. Obrigado!
Kevin Pryce
Quando eu inspeciono o elemento apenas do meu tema do WordPress, não vejo esses estilos, especialmente os aplicados à classe do corpo. Você precisa colocá-los no template?
Joel Bladt
Boa compilação de todas as classes padrão do WordPress. Foram realmente todas as classes que são adicionadas automaticamente pelo WordPress? Se as classes estiverem obsoletas e desaparecerem, ou se novas surgirem, aguardo a atualização da lista.
– Blogger Alemão e traduzido com Google Translator.
WPBeginner Support
Está atualizado ao melhor do nosso conhecimento, se você encontrar alguma classe obsoleta, por favor, nos avise.
Admin
loreto
time saver! now let me mess those styles
Amba Junior
Tutorial muito útil. Assim como o guia de hooks visuais do Genesis, este resume bem o Genesis
Malcolm Owen
Você sabe o que seria útil? Uma versão em PDF imprimível deste guia…
Pete
http://www.printfriendly.com/print/v2?url=http%3A%2F%2Fwww.wpbeginner.com%2Fwp-themes%2Fdefault-wordpress-generated-css-cheat-sheet-for-beginners%2F#
Adriane
Obrigado Pete!
wpbeginner
@smashingmag Thank you for retweeting our article
really appreciate the love.
favstar50
@smashingmag Parabéns pelo seu tweet de 50★! http://t.co/r78Ao3Sm
bobHankin
@photoassassin Não, eu não tinha. Que legal! Útil também!
eugenebicyclist
Estou apenas aprendendo a trabalhar com WP e isso é muito útil. Obrigado.