Classes geradas pelo WordPress

domingo, 23/08/2009 às 19:59

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

<body <?php body_class();?>>

Código gerado (output)

Exemplo, caso a página atual seja a home:

<body class="home">

(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:

<img class="avatar avatar-50 photo" src="caminho" alt="" />

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)

<div class="gallery">

<dl class="gallery-item">

<dt class="gallery-icon">

<a title="titulo" href="caminho">

<img class="attachment-thumbnail" src="caminho" alt="" />

</a>

</dt>

</dl>

<!--assim por diante-->

</div>

Por enquanto são essas classes. Vocês se lembram de mais algumas? Comentem por favor!

Publicado por Cátia Kitahara em Dicas • Dicas e Tutoriais