Para auxiliar os designers, o WordPress gera automaticamente várias classes de CSS (cascade styling sheet) e algumas ids facilitando o controle da aparência do blog ou site. Procuro utilizá-las sempre que possível, evitando assim criar classes redundantes. Porém não conheço todas, pois são muitas. Busquei no Codex uma documentação a respeito para me servir de referência. Encontrei apenas esta página CSS, mas que relaciona apenas algumas delas. Algumas classes aparecem na documentação da função que as origina, mas infelizmente, nem todas as classes são documentadas e algumas surgem em novas versões e acho que muita gente nem fica sabendo.
Por esse motivo tive a idéia de escrever este post e relacionar algumas das classes que eu conheço e que não estão no Codex ou estão espalhadas nas documentações das funções. Também gostaria de pedir a vocês que me auxiliem na construção dessa lista citando aqui nos comentários quais são as classes que vocês conhecem e qual a função que gera estas classes. Depois de um período, gostaria de acrescentá-las ao codex, fazendo uma contribuição para toda a comunidade.
Função post_class()
Veja este post Aplicando estilos aos posts com a função post_class().
Template tag body_class()
A função body_class() introduzida no 2.8 gera as seguintes classes dependendo do tipo de página em que se está:
- 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-(nome do arquivo template)
- search-results
- search-no-results
- logged-in
- paged-(número da página)
- single-paged-(número da página)
- page-paged-(número da página)
- category-paged-(número da página)
- tag-paged-(número da página)
- date-paged-(número da página)
- author-paged-(número da página)
- search-paged-(número da página)
Uso
[sourcecode language='php']>[/sourcecode]
Código gerado (output)
Exemplo, caso a página atual seja a home:
[sourcecode language='html'][/sourcecode]
(fonte: wpengineer.com, post: WordPress 2.8 body_class, automatic_feed_links)
Função get_avatar()
Esta função utilizada para exibir o avatar ou gravatar gera as seguintes classes na tag <img>:
- avatar
- avatar-(tamanho)
- avatar-default (caso o usuário não tenha avatar/gravatar)
- photo
Código gerado (output)
Exemplo, caso seu avatar tenha medidas de 50x50px:
[sourcecode language='html'][/sourcecode]
Função wp_list_comments
O WordPress gera as seguintes classes:
- commentlist
- comment
- even/odd (para criar estilos cor-sim/cor-não
) - alt
- thread-alt
- thread-even/thread-odd
- depth-(número)
- byuser
- bypostauthor
- parent
- comment-author
- vcard
- url
- says
- comment-meta
- commentmetadata
- reply
- cancel-comment-reply
- cancel-comment-reply-link
- commentform
- children
Ele também gera as classes do avatar acima mencionadas.
Código gerado (output)
Veja esse post de Andrew Rickmann onde ele montou um gráfico com a estrutura do html gerado.
Galeria
Quando inserimos uma galeria em um post via shortcode ou diretamente no código com a função do_shortcode() o WordPress gera as seguintes classes:
- gallery
- gallery-item
- gallery-icon
- attachment-thumbnail
Código gerado (output)
[sourcecode language='html']
[/sourcecode]
Por enquanto são essas classes. Vocês se lembram de mais algumas? Comentem por favor!
