Aplicando estilos aos posts com a função post_class()
quinta-feira, 26/03/2009 às 14:20
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!
Publicado por Cátia Kitahara em Dicas • Dicas e Tutoriais
Tags: classes • css • estilos
Avalie esse post:
(1 votos, média: 3,00 de 5)
Loading ...
30 de março de 2009 às 17:55
Interessante essa função mas ainda estou na dúvida de como um post de determinada categoria ficaria com estilo diferente das demais. Poderia explicar por favor?
Obrigado
30 de março de 2009 às 18:11
Diego,
No arquivo style.css do seu tema você precisa adicionar a classe criada pelo WP para categorias, no caso
category-xe adicionar os estilos que você quiser. Supondo que sua categoria se chame “bananas” e vc quer que o texto tenha cor preta. O WP criará a classe category-bananas. Aí no style.css vc acrescenta a classe:.category-bananas { color: #000 }6 de abril de 2009 às 18:51
muito mal explicado isso ai em cima!!!
acesse:
http://www.nathanrice.net/blog/definitive-sticky-posts-guide-for-wordpress-27/
http://justagirlintheworld.com/take-advantage-of-the-new-sticky-post-feature-in-wordpress-27/
7 de abril de 2009 às 9:21
Rafael,
Você poderia desenvolver mais sua crítica e torná-la mais construtiva para que eu possa explicar o que você não entendeu? Também pode ser que o seu nível de conhecimento não seja suficiente ou a sua expectativa não corresponda ao objetivo do post. Não sei se você percebeu que a dica acima (que não pretende ser um tutorial passo-a-passo) não se refere apenas à sticky posts, mas à função post_class() como um todo. Sobre sticky posts, o Eduardo escreveu este post “Fazendo melhor uso dos sticky posts“, parecido com o Definitive Sticky Posts Guide que você compartilhou, mas melhor, porque está em bom português. Aliás, obrigada, pelos links, são bons, mas nenhum dos dois tem o mesmo objetivo do post acima: explicar a função post_class. O post da Lisa explica por cima como usá-lo, mas é bastante incompleto pois não detalha todas as classes criadas pela função, também não fala que você pode criar sua própria classe e não explica que você pode adicionar o parâmetro post_id. Comparando, do ponto de vista da documentação da função, acho meu post mais útil.
21 de abril de 2009 às 17:36
Não quero ser chato, muito menos levantar uma confusão aqui, mas realmente o texto fico um pouco confuso. Porém temos que agradecer o autor por disponibilizar seu tempo e escrevê-lo.
Emfim, é uma critica construtiva se olharmos que o texto poderia ser mais didático.
Sei que quando escrevemos estamos nos disponibilizando para criticas, entao este e um toque. por favor nao me levem a mau.
Abzs
21 de abril de 2009 às 18:15
Beto,
Não me ofendo com críticas, mas para ser construtiva a crítica precisa apontar objetivamente qual o ponto negativo. Dizer apenas: “o texto ficou um pouco confuso” ou “poderia ser mais didático” é pouco para eu melhorar. O que ficou confuso? Qual parte você não entendeu? Porém, reitero que isso também depende do seu nível de conhecimento. Não vejo como ser mais didática, foi demonstrada a sintaxe da função, onde inseri-la (leia-se ctrl+c/ctrl+v) e quais classes ela cria. A não ser que você não saiba como criar e usar folhas de estilo ou criar temas, mas esse não é o objetivo desse post. Ele pretende apenas explicar a função.
22 de abril de 2009 às 16:14
Tenho a impressão q meu comentário não foi bem aceito por vc, acho q não vale a pena se extender quanto a isso aqui, como já foi citado, este não é o objetivo do post.
[]s
22 de abril de 2009 às 17:01
Impressão sua, Beto. Não entendo também como o post poderia ficar mais explicado, mas o meu é só mais um ponto de vista. Cê consegue dar um exemplo? Ajudaria bastante saber exatamente qual a dificuldade que o pessoal tá encontrando.
28 de abril de 2009 às 9:41
Não achei nada de complicado no post. Talvez os que estão problemas para entendê-lo não tenham tanta vivência com o WordPress, e possivelmente com o PHP.
De qualquer forma, também acho interessante que expressem suas dúvidas de forma mais clara, de preferẽncia, com argumentos, e com um pouco de respeito ao autor e aos leitores também. Acho que a intenção do site é ajudar, e a iniciativa merece ser considerada.
4 de maio de 2009 às 14:34
Não creio q tenha ficado mal explicado, aliás, se eu tivesse um conhecimento mais aprofundado, certamente teria achado mais simples, porque a Cátia escreve muito bem e tenta facilitar ao máximo.
Mas vale lembrar q isso n é um turorial passo a passo.. portanto, é bom ter um conhecimento prévio.
7 de maio de 2009 às 14:14
Quero mundar o meu wordpress mundar versão, e colocar novos temas o que eu faço?
Assis
7 de maio de 2009 às 21:49
Assis,
procure ajuda em nosso fórum de suporte aqui: br.forums.wordpress.org
11 de julho de 2009 às 17:10
Creio eu que mais explicado é você pedir a senha de acesso ao FTP de cada um e colocar a função post_class() no tema da galera… Só pode!
O mau dos usuários WP.org é a quantidade de plugins. Basta subí-lo – o que a maioria nem sabe como se faz, ativar e pronto. Quer dizer… Pronto quando não tem que se fazer quaisquer outras coisas, como no caso do WP-Email…
Cátia, excelente artigo! Quem não achou é por ter se acostumado a receber tudo mastigado; sendo que o mais interessante é que não mastigam suas críticas, antes de TENTAR fazê-las.
Se querem tudo explicadinho – ao conhecimento deles, por que não aprendem a se expressar melhor? Algo como “Eu não entendi a parte em que você disse que”… Simples!
Focando no teu post; eu não conhecia essa função. Quando eu precisava de algo semelhante usava post_name; } ?><?php if (is_home('')) { echo "home"; } ? com ID, no body.
Então, bastava eu estilizar tudo… Isto servindo para todas as páginas…
Não sei se falei só besteira, pois ainda sou nível básico. Mas vai aí a dica!
11 de julho de 2009 às 19:37
Belo post, informativo e interessante.
13 de julho de 2009 às 12:00
Yuri, acho que qualquer pessoa peca quando generaliza
[]´s
13 de julho de 2009 às 12:03
Beto, és um crítico pecador, seu moço!
Mas ainda há tempo para tua salvação, mas se arrepender de teus erros, rs.
13 de julho de 2009 às 12:21
Huhauhauha!
Me arrependo! Mas me arrependeria ainda mais se desse continuidade a uma discussão que não leva a canto algum.
[]´s
23 de dezembro de 2009 às 23:17
Uma ótima dica e não vejo nenhuma dificuldade em entender, valeu pela ajuda e já até imagino como usar em meus projetos.
Muito obrigado.
13 de agosto de 2010 às 12:22
Eu não tenho conhecimentos em PHP, então onde eu colocaria esse ?
14 de setembro de 2010 às 21:42
Coloca um exemplo ae purfaa!! *-*
22 de julho de 2011 às 14:06
Tambem achei muito mal explicado…