CSS Padrão do WordPress

CSS padrão do WordPress para Iniciantes

Alguma vez você já se perguntou como você poderia inserir um estilo diferentes aos elementos dos #TemasWordPress? Bem, isso varia de tema para tema, mas há certas classes CSS e IDs que são gerados pelo WordPress. Se você é alguém que está tentando estilizar um tema, ou tentando criar um tema para disponibilizá-lo ao público, então, estes são alguns elementos de estilo que você deve considerar adicionar ao seu tema.

O objetivo deste cheat sheet é ajudar os iniciantes que estão querendo saber mais sobre #CSS e estilização de temas WordPress. Vamos passar por alguns dos mais importantes estilos padrões do #WordPress, um por um.

Estilos de Classes Padrões do Body

Uma das melhores coisas sobre o WordPress é a possibilidade de personalização. Ele permite que você direcione aspectos muito específicos de seu site apenas com CSS. Uma das maneiras que ele faz isso é através da adição de classes personalizadas para vários elementos do seu blog. A mais importante delas é a tag <body>. Aqui estão alguns exemplos de classes comuns que o WordPress pode adicionar a este elemento:

[css]
.rtl {}
.home {}
.blog {}
.archive {}
.date {}
.search {}
.paged {}
.attachment {}
.error404 {}
.single postid-(id) {}
.attachmentid-(id) {}
.attachment-(mime-type) {}
.author {}
.author-(user_nicename) {}
.category {}
.category-(slug) {}
.tag {}
.tag-(slug) {}
.page-parent {}
.page-child parent-pageid-(id) {}
.page-template page-template-(template file name) {}
.search-results {}
.search-no-results {}
.logged-in {}
.paged-(page number) {}
.single-paged-(page number) {}
.page-paged-(page number) {}
.category-paged-(page number) {}
.tag-paged-(page number) {}
.date-paged-(page number) {}
.author-paged-(page number) {}
.search-paged-(page number) {}
[/css]

Se, por exemplo, você gostaria de estilizar sua página de resultados de pesquisa de uma maneira específica você pode usar a classe “search-results” para adicionar seu estilo. O WordPress só acrescenta esta classe para a tag body quando a página de resultados de pesquisa está ativa para que não afete quaisquer outras páginas.

Estilos Padrões de Post

Assim como com o elemento “body“, o WordPress acrescenta classes dinâmicas para os elementos de post também. Aqui está uma lista de alguns dos mais populares:

[css].post-id {}
.post {}
.page {}
.attachment {}
.sticky {}
.hentry {}
.category-misc {}
.category-example {}
.tag-news {}
.tag-wordpress {}
.tag-markup {}[/css]

Mais uma vez, o WordPress adiciona classes dinâmicas para o seu post com a função “post_class ()“, que irá permitir que você crie seus próprios estilos para cada formato. A função post_class () irá adicionar uma classe na forma de “.format-foo“, onde foo é o formato de post que você escolheu isto: galeria, imagem, etc.

[css].format-image {}
.format-gallery {}
.format-chat {}
.format-link {}
.format-quote {}
.format-status {}
.format-video {}[/css]

Estilos Padrões de Menu

Vamos supor que você tenha dado ao seu menu de navegação o seu próprio nome da classe de “main-menu”. Teríamos os seguintes estilos:

[css]#header .main-menu{} // classe container
#header .main-menu ul {} // primeira lista não ordenada
#header .main-menu ul ul {} //sub-lista não ordenada
#header .main-menu li {} // cada item de navegação
#header .main-menu li a {} // cada âncora de navegação
#header .main-menu li ul {} // lista não ordenada se tiver itens drop down
#header .main-menu li li {} // cada item drop down
#header .main-menu li li a {} // cada âncora de item drop down

.current_page_item{} // Classe para a página atual
.current-cat{} // Classe para a categoria atual
.current-menu-item{} // Classe para qualquer outro item de menu atual
.menu-item-type-taxonomy{} // Classe para uma categoria
.menu-item-type-post_type{} // Classe para páginas
.menu-item-type-custom{} // Classe para qualquer item personalizado que você adicionou
.menu-item-home{} // Classe para o link Home[/css]

Observe que sempre que você criar um menu no WordPress estará automaticamente empacotado em uma div. Esta div tem apenas um nome de classe, se você especificá-lo (escolhemos “main-menu”). A partir disso, você pode estilizar os vários elementos da lista.

Estilos Padrões de Editores WISIWYG

O editor WISWYG é um dos aspectos mais populares e mais usadas do WordPress. Por esta razão, é uma boa idéia ter estilos prontos para qualquer coisa que o usuário possa adicionar ao seu blog, como imagens ou blockquotes. O seguinte CSS mostra que classes o WordPress adiciona automaticamente a estes elementos:

[css].entry-content img {}
.alignleft, img.alignleft {}
.alignright, img.alignright {}
.aligncenter, img.aligncenter {}
.alignnone, img.alignnone {}

.wp-caption {}
.wp-caption img {}
.wp-caption p.wp-caption-text {}

.wp-smiley {}

blockquote.left {}
blockquote.right {}

.gallery dl {}
.gallery dt {}
.gallery dd {}
.gallery dl a {}
.gallery dl img {}
.gallery-caption {}

.size-full {}
.size-large {}
.size-medium {}
.size-thumbnail {}
[/css]

Você pode ver que existem várias classes referentes apenas às imagens. Se, por exemplo, o usuário decide incluir uma imagem alinhada à esquerda, então, o WordPress irá adicionar a classe “alignleft”.

Estilos Padrões de Widget

Widgets são outro aspecto popular do WordPress. Como desenvolvedor você tem controle sobre quais widgets serão exibidos, assim você vai saber que estilos exatamente deve acrescentar. O WordPress vem com um punhado de widgets padrões, no entanto, e se você não removê-los, é aconselhável adicionar estilos para suas classes.

[css].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 {}
[/css]

Ao estilizar widgets, você provavelmente vai acabar usando os mesmos estilos outras vezes. Por esta razão, é uma boa idéia combinar classes em sua folha de estilo usando vírgulas. Por exemplo, você pode combinar “.widget_pages ul” e “.widget_archive ul” fazendo algo assim:

[css].widget_pages ul, .widget_archive ul {}
[/css]

Estilos Padrões de Formulário de Comentário

Se você não está lidando com os comentários threaded, então, é possível ignorar muitos desses.

[css]/*Output do Comentário*/

.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 {}

/*Formulário de Contato */

#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
[/css]

Esta é apenas uma cheat sheet. Ainda há muitas outras classes e id que não cobrimos. Se você acha que algo é importante e que pertence a esta lista, por favor, sinta-se livre para deixar um comentário abaixo.

Espero que estas dicas ajudem todos que estão começando a estilizar Temas WordPress.

Então é isso e até o próximo post,

Asllan Maciel

Psiu! Quer dominar completamente o WordPress?

Assinatura Premium é tudo que você precisa!

Obtenha acesso à Conteúdos Exclusivos, Séries e Cursos Completos, além de muito conteúdo para aprender sobre os Recursos Mais Tops do WorPress… Mesmo que seja um iniciante, do zero e sem saber programar!

Venha fazer parte dessa comunidade!

Não perca mais nenhuma atualização aqui!

Posts Relacionados

2 respostas

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Não perca mais nenhuma atualização aqui!

Tabela de Conteúdo
PUBLICIDADE
Últimos Posts