Você está procurando uma folha de dicas de CSS padrão gerada pelo WordPress?
O WordPress adiciona automaticamente algumas classes CSS a diferentes elementos na maioria dos temas. Essas classes CSS padrão podem ser usadas para estilizar esses elementos em seu tema do WordPress.
Neste artigo, mostraremos a folha de dicas de CSS padrão gerada pelo WordPress. Também falaremos sobre como encontrar facilmente as classes CSS e como adicionar classes CSS personalizadas sempre que você 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 em seu site WordPress.
Os desenvolvedores de temas do WordPress podem então usar essas classes CSS para estilizar áreas comuns de todos os sites do WordPress. Isso pode incluir a área de conteúdo, as barras laterais, os widgets, os menus de navegação e muito mais.
Conhecer essas classes CSS é muito útil se você estiver aprendendo a desenvolver temas para o WordPress ou simplesmente tentando criar um tema filho para o seu próprio site.
Ele também ajuda a estilizar rapidamente determinados elementos em seu tema do WordPress, adicionando CSS personalizado sem criar seu próprio tema.
Observação: Não é necessário aprender CSS para alterar os estilos do tema ou criar um tema personalizado. Se preferir não aprender a programar, você pode usar um construtor do tipo arrastar e soltar, como o SeedProd. Falaremos mais sobre ele mais adiante neste artigo.
Dito isso, vamos dar uma olhada nas classes CSS padrão geradas pelo WordPress.
Estilos de classe de corpo padrão
A tag body <body> em HTML contém toda a estrutura de layout de qualquer página da Web, o que a torna muito importante em qualquer design de tema do WordPress.
O WordPress adiciona várias classes CSS à área do corpo que os designers de temas podem usar para estilizar o contêiner do corpo.
// 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 grande variedade de condições que podem ser usadas nos estilos CSS.
Por exemplo, se você quiser que a página da categoria “Notícias” tenha uma cor de fundo diferente, poderá adicionar o seguinte CSS personalizado.
.category-news {
background-color:#f7f7f7;
}
Precisa de uma maneira fácil de adicionar CSS e trechos de código no WordPress? Experimente o plug-in gratuito WPCode para preparar seus trechos de código para o futuro.
Classes de estilo de postagem padrão
Assim como o elemento body, o WordPress também adiciona classes dinâmicas aos elementos post.
Esse elemento geralmente é a tag <article> em seu modelo de tema. No entanto, pode ser qualquer outra tag, dependendo do seu tema. As classes CSS da postagem são exibidas em seu tema adicionando a tag de modelo 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 posts permitem que você estilize posts e páginas de blog de acordo com diferentes condições. Por exemplo, você pode estilizar de forma diferente os posts de blog arquivados em uma categoria específica usando o seguinte CSS personalizado:
.category-news {
background-color:#EFEFEF;
}
Se você não vir o editor CSS no painel do WordPress, siga nosso tutorial sobre como corrigir a falta do personalizador de temas do WordPress.
Classes de menu de navegação padrão
O WordPress também adiciona classes CSS aos seus menus de navegação. Veja a seguir as classes padrão adicionadas aos menus de navegação por padrã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 do menu de navegação.
Digamos que seu tema atribua a classe primary-menu a um local de menu dentro da área do cabeçalho, então você pode direcioná-la 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 obter mais detalhes, consulte nosso guia sobre como estilizar menus de navegação no WordPress.
Classes de widgets padrão do WordPress
Os widgets são uma maneira fácil de exibir blocos que não sejam de conteúdo em seu tema do WordPress. Normalmente, eles são exibidos em áreas dedicadas prontas para widgets ou em barras laterais em seu tema do WordPress.
O WordPress adiciona as seguintes classes aos widgets herdados.
.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, como o WordPress mudou para áreas de widgets baseadas em blocos, agora você pode adicionar diferentes blocos às suas áreas de widgets e cada um deles gera classes CSS dinamicamente.
Mostraremos a você como encontrar essas classes CSS mais adiante neste artigo.
Classes de formulário de comentário padrão
Os comentários são o centro de engajamento de muitos sites WordPress. A estilização deles ajuda a proporcionar 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 a área 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 obter mais detalhes, consulte nosso guia sobre como estilizar comentários no WordPress.
Como encontrar classes de blocos do WordPress
O editor de blocos do WordPress gera dinamicamente classes CSS para blocos.
Para encontrar essas classes CSS, você precisará adicionar esse bloco específico a um post ou página. Depois disso, você precisa clicar no botão Preview (Visualizar) para ver o bloco em ação.
Na guia de visualização, leve o mouse até o bloco que acabou de adicionar e selecione a ferramenta Inspecionar clicando com o botão direito do mouse.
No console do desenvolvedor, você verá o HTML gerado pelo bloco. A partir daí, você pode ver as classes CSS adicionadas pelo bloco.
Na captura de tela acima, estamos vendo as classes CSS do bloco Gallery. Você pode usar essas classes CSS para estilizar o bloco Gallery em seu tema do WordPress.
Como adicionar suas próprias classes CSS personalizadas no WordPress
Agora, as classes CSS padrão do WordPress são bastante abrangentes. No entanto, seu objetivo é principalmente fornecer aos desenvolvedores de temas uma estrutura padronizada com a qual construir.
Para o seu site individual, talvez seja necessário adicionar CSS personalizado para áreas em que talvez não seja possível encontrar uma classe CSS padrão para direcionar.
Da mesma forma, às vezes você pode querer fazer apenas uma pequena alteração em um post ou página específica sem aplicá-la a todo o tema.
Felizmente, o WordPress oferece a você várias maneiras fáceis de adicionar classes CSS em diferentes áreas.
Adicionar classes CSS personalizadas a um bloco dentro do Block Editor
Se você quiser adicionar rapidamente uma classe CSS personalizada a um post ou página específica, a maneira mais fácil de fazer isso é usar o editor de blocos.
Basta editar o post ou a página e selecionar o bloco em que deseja adicionar a classe CSS personalizada. Nas configurações do bloco, clique no painel avançado e adicione o nome de sua classe CSS.
Não se esqueça de salvar suas alterações clicando no botão Update (Atualizar).
Agora você pode usar essa classe para adicionar código CSS personalizado que afetará somente esse bloco específico nesse post ou página específica.
Em Menus de navegação do WordPress
Você também pode adicionar CSS personalizado aos itens do menu de navegação do WordPress. Digamos que você queira converter um item de menu em botão, então esse método é útil.
Basta acessar a página Appearance ” Menus e clicar no botão Screen Options (Opções de tela) no canto superior direito da tela.
A partir daí, você precisa marcar a caixa ao lado da opção Classes CSS.
Em seguida, você precisa rolar a tela para baixo e clicar para expandir o item de menu no qual deseja adicionar a classe CSS personalizada.
Você verá um campo chamado Classes CSS. Vá em frente e adicione sua classe CSS personalizada aqui.
Não se esqueça de clicar no botão Save Menu para armazenar suas alterações.
Agora você pode usar essa classe CSS personalizada para dar um estilo diferente a esse item de menu específico.
Bônus: Crie facilmente um tema para WordPress sem escrever código CSS
Aprender a estilizar seu tema do WordPress com CSS personalizado é uma habilidade muito útil. No entanto, alguns usuários podem simplesmente querer uma solução para criar seu tema do WordPress sem precisar escrever código CSS.
Para isso, você precisará do SeedProd. Ele é a melhor ferramenta de criação de páginas do WordPress no mercado que permite criar facilmente temas personalizados sem escrever nenhum código.
O SeedProd vem com temas prontos para uso que você pode usar como ponto de partida.
Você também pode criar um tema do zero, criando modelos manualmente.
Em seguida, você pode editar seu tema personalizado usando uma interface intuitiva de criação de sites do tipo arrastar e soltar.
Basta inserir blocos em seu design para criar seus próprios layouts.
Você também pode alterar facilmente qualquer item com um simples apontar e clicar. Você pode usar suas próprias cores, plano de fundo, fontes e muito mais.
Para obter mais detalhes, consulte nosso tutorial passo a passo sobre como criar facilmente um tema personalizado do WordPress sem escrever nenhum código.
Esperamos que este artigo tenha ajudado você a encontrar a folha de dicas CSS padrão gerada pelo WordPress. Talvez você também queira ver nosso guia para corrigir os erros mais comuns do WordPress ou ver nossa comparação especializada do melhor software de bate-papo ao vivo para pequenas empresas.
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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Rodrigo Vieira Eufrasio da Silva says
You are to be congratulated for this wonderful content. I would only recommend updating this article, and letting us know which classes are generated by guttenberg and the latest version of WordPress because this post is out of date. But it helped me a lot.
Hugs to you all.
WPBeginner Support says
Thank you for letting us know, we’ll be sure to take a look
Administrador
Alison Westall says
Is there a CSS class for changing the padding of an element? Thanks!
WPBeginner Support says
Once you find the object you want to add padding to, you would use:
padding, padding-top, padding-right, padding-bottom, padding-left
depending on what type of padding you want added
Administrador
Matt Cauley says
Thanks for the info. I just bookmarked page even though its a few years old!
WPBeginner Support says
Thank you, while the article is older, it should still be useful
Administrador
MS Shohan says
Awesome work bro. Thanks for making a list of all the default WP classes
Hannah Steele says
Hello, I am really struggling to format the automatically generated events page.
Please help me?
Arunjith RS says
Realy useful..Tank you.
Shai says
Can you (if not already elsewhere) list the admin dashboard and admin widgets classes.
it look like the admin is using a loader (wp-admin/load-styles.php) to include it CSS but that CSS is compress and hard to read. it will be nice to see a list of the items in use. for example if you want to create your own widget with tabs ; I inspected the CSS and can see large list of the class .nav-tab related CSS.
.
Ari Susanto says
and the “entry-content” itself!
Ari Susanto says
I want to add this one:
“status-publish”
luroch says
A question: when creating a bootstrap theme from underscores, should I keep the classes and ids that come with this framework, just adding the Bootstrap ones, or can I use only Bootstrap classes and Ids?
Ari Susanto says
How did you found them? Is there an automated way like using php function, may be?
Stephen Clark says
Fantastic post and highly informative. Curious if you could append this post with similar details about the WP footer. I have been struggling with styling and formatting the footer with the theme I’m using, and with some other sites I’ve built.
Would also be helpful to have a downloadable CSS stylesheet file containing all of these styles. Thanks!
Kevin Pryce says
When I inspect element only my wordpress theme, I do not see these styles, especially the ones applied to the body class. Do you have to put them into the template?
Joel Bladt says
Nice compilation of all the standard WordPress classes. Was that really all classes that are added automatically by WordPress? If classes are obsolete and disappeared, or new ones have come to this, I look forward to updating the list.
– German Blogger and translated with Google Translator.
WPBeginner Support says
It is up to date to the best of our knowledge, if you find any class obsolete, please let us know.
Administrador
loreto says
time saver! now let me mess those styles
Amba Junior says
Very useful tutorial. Just like the Genesis visual hook guide, this summarizes Genesis real well
MalcolmOwen says
Do you know what would be useful? A printable PDF version of this guide…
Pete says
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 says
Thank you Pete!
wpbeginner says
@smashingmag Thank you for retweeting our article
really appreciate the love.
favstar50 says
@smashingmag Congrats on your 50★ tweet! http://t.co/r78Ao3Sm
bobHankin says
@photoassassin No I hadn’t. That’s sweet! Handy too!
eugenebicyclist says
Just learning to work with WP and this is really handy. Thank you.