Comunidade WordPress-BR » classes http://wp-brasil.org Site da Comunidade Brasileira de WordPress Wed, 09 May 2012 21:15:18 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Classes geradas pelo WordPress http://wp-brasil.org/dicas-e-tutoriais/classes-geradas-pelo-wordpress http://wp-brasil.org/dicas-e-tutoriais/classes-geradas-pelo-wordpress#comments Sun, 23 Aug 2009 22:59:50 +0000 Cátia Kitahara http://wp-brasil.org/?p=1446 Para auxiliar os designers, o WordPress gera automaticamente várias classes de CSS (cascade styling sheet) e algumas id’s 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 :P )
  • 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!

]]> http://wp-brasil.org/dicas-e-tutoriais/classes-geradas-pelo-wordpress/feed 7 Aplicando estilos aos posts com a função post_class() http://wp-brasil.org/dicas-e-tutoriais/aplicando-estilos-aos-posts-com-a-funcao-post_class http://wp-brasil.org/dicas-e-tutoriais/aplicando-estilos-aos-posts-com-a-funcao-post_class#comments Thu, 26 Mar 2009 17:20:52 +0000 Cátia Kitahara http://wp-brasil.org/novo/?p=34 Ilustração por Cátia Kitahara

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:

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

Essa função adiciona as classes: post, hentry (para páginas hAtom), category-x (onde x é o nome da categoria à qual o post pertence), tag-x (idem, mas para tags) e sticky (para posts marcados como fixos). A função também aceita acrescentar classes criadas por você mesmo:

<?php post_class('suaclasse'); ?>

Você ainda pode acrescentar uma ou mais classes separadas por espaço:

<?php post_class('suaclasse outraclasse'); ?>

No caso de posts fora do loop ou em um loop adicional, a função aceita o parâmetro post_id:

<?php post_class('',$post_id); ?>

Depois, é só criar os estilos para suas classes. Simples assim!

]]> http://wp-brasil.org/dicas-e-tutoriais/aplicando-estilos-aos-posts-com-a-funcao-post_class/feed 20