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.
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.
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]
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.
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”.
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]
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
Clique aqui e, em seguida, clique em Permitir na caixa que aparecerá na parte superior da janela, próximo à barra de endereços.
Se você está aproveitando nosso conteúdo gratuito, vai adorar os benefícios exclusivos que oferecemos aos nossos assinantes!
Não perca a oportunidade de maximizar seu potencial no WordPress. Clique no botão abaixo para se tornar um assinante e leve suas habilidades ao próximo nível!
