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!

Ilustração por Cátia Kitahara

É bastante comum querer diferenciar os seus posts dos demais, dependendo da categoria ou mesmo da tag à qual eles pertencem. Agora que os posts fixos, ou sticky posts em inglês, são nativos no WordPress, também é comum querer diferenciá-los dos demais.

Na versão 2.7, essa tarefa tornou-se mais fácil com a introdução de uma nova função chamada post_class() que simplesmente adiciona classes ao post, facilitando a aplicação de estilos.

Para usá-la no seu tema, basta colocá-la no loop onde normalmente você colocaria suas classes. Por exemplo:

[sourcecode language='php']

http://wp-brasil.org/novo/?p=58

Ilustração por Cátia Kitahara

Muitas vezes, quando fazemos um tema ou um plugin, precisamos carregar folhas de estilo ou arquivos javascript adicionais. Neste post, vou mostrar a maneira mais legal, charmosa e elegante de se fazer isso.

Estrutura básica

Antes de mais nada, vamos criar a função que vai carregar nosso javascript e adicioná-la ao hook correto do WordPress:

[sourcecode language='php']
function meuPlugin_addJS() {
// aqui vou carregar meu javascript
}

add_action(‘wp_print_scripts’, ‘meuPlugin_addJS’);
[/sourcecode]

Agora, sempre que o WordPress imprimir as chamadas a arquivos javascript, vai rodar a sua função. Vamos ver como isso vai funcionar.

Usando a função wp_enqueue_script

A função “wp_enqueue_script()” serve para colocar o script em uma fila de carregamento. Ela é extremamente útil para evitar que um script seja carregado mais de uma vez e também para carregar todas as dependências na ordem certa. Vamos ver um exemplo que usa todos os parâmetros desta função:

[sourcecode language='php']
wp_enqueue_script(‘meu_script’, ‘http://meusite.com/wp-content/plugins/meuplugin/script.js’, array(‘jquery’), ’1.0′);
[/sourcecode]

Esta função está colocando o seu script na fila para ser carregado, dizendo o seguinte

• ele se chama ‘meu_script’
• ele está em http://meusite.com/wp-content/plugins/meuplugin/script.js
• ele depende do jquery
• esta é a versão 1.0 do ‘meu_script’

Você só precisa passar tantos parâmetros quando se trata de um script que o WordPress não conhece. Para carregar o jQuery, por exemplo, você pode simplesmente especificar:

[sourcecode language='php']
wp_enqueue_script(‘jquery’);
[/sourcecode]

Note que ‘jquery’ é apenas um “nome fantasia” para o script. Para saber quais são todos os scripts disponíveis por padrão no WordPress, dê uma olhada na documentação completa da função wp_enqueue_script().

Deixando seu caminho flexível

Para encerrar este post, só falta esclarecer um ponto: não é bonito colocar o caminho para seu arquivo assim na mão, como fizemos no exemplo acima. Isso pode trazer vários problemas, porque, a partir do WordPress 2.6, é possível trocar o diretório ‘wp-content’ de lugar. Seu plugin ou tema não vai funcionar corretamente em uma instalação em que alguém tenha movido este diretório. Além disso, não é raro as pessoas trocarem o nome da pasta do plugin, o que também quebraria o seu esquema.

Para contornar esse problema e deixar o seu código universal, vamos usar a constante WP_CONTENT_URL, que guarda o caminho da pasta wp-content, onde quer que ela esteja.

Vamos ver como ficaria nosso script completo:

[sourcecode language='php']
function meuPlugin_addJS() {
$meuPluginURL = WP_CONTENT_URL.’/plugins/’.plugin_basename( dirname(__FILE__)).’/';
wp_enqueue_script(‘meuJs’, $meuPluginURL . ‘meuJS.js’);
}

add_action(‘wp_print_scripts’, ‘meuPlugin_addJS’);
[/sourcecode]
Note que, se meu plugin não depende de ninguém, não preciso passar os dois últimos parâmetros.

Importante: A constante WP_CONTENT_URL só foi introduzida no WordPress 2.6, portanto, se você quiser que seu plugin ou tema funcione em versões anteriores a esta, adicione uma linha para criar a constante, caso ainda não exista:
[sourcecode language='php']
if ( !defined(‘WP_CONTENT_URL’) )
define( ‘WP_CONTENT_URL’, get_option(‘siteurl’) . ‘/wp-content’);
[/sourcecode]

Mas e nos temas?

Nos temas, você pode fazer assim:
[sourcecode language='php']
// para garantir compatibilidade com versões anteriores ao WordPress 2.6
if ( !defined(‘WP_CONTENT_URL’) )
define( ‘WP_CONTENT_URL’, get_option(‘siteurl’) . ‘/wp-content’);

function meuTema_addJS() {
wp_enqueue_script(‘meuJs’, WP_CONTENT_URL.’/themes/meuTema/’ . ‘meuJS.js’);
}

function meuTema_addCSS() {
echo ‘ ‘;
}

add_action(‘wp_print_scripts’, ‘meuPlugin_addJS’);
add_action(‘wp_head’, ‘meuTema_addCSS’);
[/sourcecode]

Próximos passos

Seu próximo passo é garantir que esses arquivos externos sejam carregados apenas quando realmente forem usados, para não sobrecarregar o site à toa. Existem várias maneiras de fazer isso, usando hooks específicos ou condições, mas é tema para outro post.

Abraços,

Leo