Alguma vez visitou um blog WordPress em que cada postagem tem um estilo diferente? Muitos blogs têm artigos destacados, enquanto outros têm cada postagem de cada categoria numa cor diferente, e existem ainda aqueles que têm cada postagem num estilo completamente diferente. Basicamente isso é o que vamos abordar em nossa postagem de ajuda, tendo como auxílio o artigo dos colegas do wpbeginner. Iremos abordar a forma como você poderá estilizar diferentes postagens no WordPress de diferentes formas. Então, e o que necessitaremos para conseguir atingir isso? Iremos usar a função post_class. A função Post Class basicamente puxa e mostra diferentes classes de CSS que podem ser adicionadas, tipicamente, nos ficheiros index.php, single.php, e outros ficheiros relacionados com postagens.

Nota: Este tutorial requer que você já esteja familiarizado com o WordPress e com os templates WordPress, e também com edição HTML / CSS.

Quando você abre o seu ficheiro index.php, ou outro ficheiro com um ciclo (loop), você normalmente irá visualizar uma div com post-id, mas iremos adicionar uma nova variável post_class conforme no exemplo seguinte:

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

Adicionando esta função na div, cada uma das suas postagens terá classes de CSS adicionadas a elas, as quais lhe irão permitir estilizar seus posts do WordPress via CSS. As seguintes classes são adicionadas por defeito:

  • .post-id
  • .post
  • .attachment
  • .sticky
  • .hentry (hAtom microformat pages)
  • .category-ID
  • .category-name
  • .tag-name

Se você abrir seu ficheiro style.css e adicionar a classe .category-musica, você poderá estilizar suas postagens da categoria musica de uma forma diferente das outras.

.category-musica{background: #97c3e1; border: 1px solid #84aac4;}

Isto fará com que suas postagens da categoria música tenham um fundo azul com uma border em azul escuro no valor de 1 pixel. Você poderá usar essa estratégia para todas as suas categorias, adicionado diferentes classes, como por exemplo .category-musica, category-bandas, etc. Você poderá fazer o mesmo para que determinadas postagens, com determinadas tags, tenham uma estilização diferente das outras.

No entanto, para alguém que está procurando uma forma efectiva de mudar o design de seu site, serão necessários novos controlos e classes. Se desejar, você poderá definir determinadas classes:

<?php post_class('class-1 class-2'); ?>

Mas, como será que isso vai funcionar numa plataforma dinâmica como o WordPress? Vejamos como você pode adicionar classes de CSS para tornar suas postagens mais atrativas.

ESTILIZANDO POSTAGENS POR AUTOR

Certamente você já reparou que muitos blogs tornam os comentários dos seus autores destacados com uma cor diferente. Para blogs multi-autores, talvez seja bom você atribuir um estilo e uma cor diferente às postagens de cada um deles. Portanto, neste exemplo, iremos estilizar cada postagem baseando-nos no primeiro nome do autor. Portanto, no seu ficheiro index.php ou outro ficheiro (archive.php / category.php etc), vamos puxar o valor do primeiro nome do autor adicionando o seguinte código antes do ciclo the loop:

<?php $author = get_the_author_meta('display_name'); ?>

O código em cima está puxando o display_name que pode ser seleccionado na área de perfil do usuário, e está assumindo a variável $author. Agora que temos um valor de classe dinâmica criado, poderemos acrescentar o código post_class:

<?php post_class('class-1 class-2 ' . $author); ?>

Nota: Você não precisa manter o class-1 e class-2. Isso só interessa se você pretender usar classes estáticas.

Tenha atenção que o nome do autor (ex.: Paulo) é adicionado ao código de saída final. O nome será diferente em cada postagem, baseado no display_name do autor. Se desejar, você poderá posteriormente estilizar cada classe no CSS. Algo do género:

.Paulo{border: 1px solid #000;}
.Miguel{border: 1px solid #d88b3d;}
.Wesley{border: 1px solid #4781a8;}

Depois disso, cada postagem no ciclo com esses autores, será estilizada de forma diferente. Se desejar, poderá usar essa técnica para todos os autores de seu blog.

ESTILIZANDO POSTAGENS POPULARES

Você provavelmente já viu blogs onde as postagens populares são baseadas no número de comentários. Neste exemplo, iremos mostrar-lhe como estilizar cada postagem de forma diferente usando a contagem de comentários. A primeira coisa que necessitamos fazer é puxar o número de comentários e associar-lhe uma classe. Para conseguir puxar o número de comentários, devemos utilizar o seguinte código dentro do clico (loop):

<?php
	$postid = get_the_ID();
	$total_comment_count = wp_count_comments($postid);
		$my_comment_count = $total_comment_count->approved;
	if ($my_comment_count <10) {
		$my_comment_count = 'novo';
	} elseif ($my_comment_count >= 10 && $my_comment_count <20) {
		$my_comment_count = 'emergente';
	} elseif ($my_comment_count >= 20) {
		$my_comment_count = 'popular';
	}
?>

No código anterior estamos estilizando as postagens por contagem. Se o post tiver menos de 10 comentários, então a classe ‘novo’ será adicionada. Se a postagem tiver mais de 10 comentários e menos de 20 comentários, então a classe será ‘emergente’. Se a postagem tiver mais de 20 comentários, então será adicionada a classe ‘popular’. Você poderá mudar esta escala baseando-se na média de seus comentários.

Desta forma, o código post_class será algo do género:

<?php post_class('class-1 class-2 ' . $my_comment_count); ?>

E a estilização das suas diferentes classes no seu ficheiro style.css poderá ser:

.novo {border: 1px solid #FFFF00;}
.emergente {border: 1px dashed #FF9933;}
.popular {border: 1px dashed #CC0000;}

Denote que apenas estamos mudando a cor das borders, mas você poderá ir muito mais longe, adicionando diferentes cores de fundo, dimensões, tipos de letra, etc. Quanto mais você apimentar, mais destaque seu blog terá!

Bons truques!