Como usar um Estilo diferente para cada Post no WordPress

Alguma vez você já se deparou com um site que usa o estilo de seus posts de forma diferente? Alguns sites têm diferentes posts em destaque, enquanto outros têm cada categoria de post estilizado com uma cor diferente, etc. Então, isso é exatamente o que vamos abordar neste artigo. Vamos compartilhar como você pode usar um estilo diferente para cada post no WordPress, de maneiras diferentes. Então, o que vamos usar? Nós vamos usar uma função chamada post_class. A função Post Class imprime diferentes classes de container de posts, que podem ser adicionados, normalmente, no index.php, single.php e outros arquivos d o tempalte destacando o conteúdo do post.

Nota: Este tutorial requer que você esteja um pouco familiarizado com a criação de temas do WordPress e um pouco com HTML / CSS.

Quando você abrir o arquivo index.php, ou outro arquivo com um loop, normalmente você vai ver algum div com post-id, mas estaremos adicionando uma nova variável post_class a ele como mostrado no exemplo abaixo:

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

Ao adicionar essa função no div, cada um de seus posts vai ter classes css específicas adicionadas a eles, o que permitirá que você modifique a aparência de seus posts do WordPress via CSS. As seguintes classes são adicionadas por padrão:

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

Uma saída (output) de exemplo ficaria assim:

<div id="post-4564" class="post post-4564 category-48 category-movie logged-in">

Então, se você abrir o seu arquivo style.css e adicionar a classe .category-movie você vai ser capaz de fazer os posts da sua categoria movie tenham uma aparência diferente.

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

Isso fará com que seus posts da categoria movie tenha um fundo azul com uma borda azul escura. Você pode em continuação a isso, adicionar uma classe diferente de links para .category-movie, etc. Você pode usar a mesma técnica para fazer com que posts com uma tag específica tenham uma aparência diferente.

Mas para alguém que está realmente querendo personalizar a aparência do seu site, poderá precisar de controles adicionais em termos de classes. Bem, você pode especificar as classes assim, se quiser:

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

Mas, como isso vai funcionar em uma plataforma dinâmica como o WordPress? Então, vamos olhar para alguns exemplos de como você pode adicionar classes para fazer seus posts terem uma aparência diferente.

Estilo dos Posts baseado em Autores

Muitas vezes você vai ver que o blog destaca o comentário do autor de forma diferente. Bem, para blogs multi-autor, pode ser uma boa ideia dar ao post de cada autor um estilo completamente diferente. Portanto, neste exemplo, vamos dar a cada post um estilo próprio, baseado no primeiro nome do autor. Assim, no seu index.php ou outro arquivo (archive.php / category.php etc), vamos obter o valor do primeiro nome do autor, adicionando este código ANTES do loop:

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

O código acima está obtendo o display_name do autor, que pode ser selecionado na área de perfil do usuário, e está atribuindo o valor com a variável $author. Agora que temos um valor de classe dinâmica criada, podemos adicioná-lo em nosso código post_class assim:

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

Nota: Você não tem que manter a class-1 e class-2. Isso é apenas se você quiser adicionar classes estáticas. Portanto, o seu código deve ter uma saída de algo como isto:

<div id="post-4564" class="post post-4564 category-48 category-dancing logged-in class-1 class-2 Asllan">

Observe que Asllan é adicionado no final da saída (output). O nome será diferente em cada post com base no display_name do autor. Você pode, então, estilizar cada classe em seu CSS assim:

.Asllan{border: 1px solid #000;}
.Aline{border: 1px solid #d88b3d;}
.Luiz{border: 1px solid #4781a8;}

Em seguida, cada post no loop com esses autores vão ser estilizados de forma diferente. Você pode adicionar um estilo individual, utilizando a técnica acima, para outros autores em seu site.

Estilo dos Posts baseado na Popularidade usando o número de Comentários

Você já viu sites com widgets de posts populares, que são, em sua maioria, baseadas na quantidade de comentários. Pois bem, neste exemplo, vamos mostrar-lhe como estilizar posts de formas diferentes usando a quantidade de comentário. A primeira coisa que você precisa fazer é começar a contagem de comentários e associar uma classe à ela. Para obter a contagem de comentários, é preciso colar o seguinte código dentro do 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 = 'interessante';
	} elseif ($my_comment_count >= 20) {
		$my_comment_count = 'popular';
	}
?>

No código acima, estamos adicionando classes com base em uma escala. Se o post tiver menos de 10 comentários, será adicionado à classe “novo“. Se o post tiver mais de 10 e menos de 20 comentários, então será adicionado a classe “interessante“. Se o post tiver mais de 20 comentários, então, será adicionado à classe “popular“. Você pode mudar essa escala com base na taxa média de comentários do seu site.

Portanto, o seu código post_class será parecido com este:

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

Em seguida, você pode criar as seguintes classes no seu arquivo style.css:

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

Observe que estamos apenas mudando as cores da borda, mas você pode ir muito mais profundo com isso, incluindo a adição de uma imagem de fundo personalizada, cor de fundo, etc. Isto irá apimentar o seu tema e fazer a página do blog se destacar.

Quer mais controle sobre as classes CSS? Certo! Então podemos analisar uma maneira de atribuir classes através de campos personalizados.

Estilo dos Posts baseado em Campos Personalizados

Você pode adicionar classes específicas através de campos personalizados do post. Assim, por exemplo, pode ser no aniversário do seu blog e você querer que o post de aniversário tenha uma aparência diferente. Você pode criar um campo personalizado e dar a ele o nome de “post-class” e, em seguida, adicionar o valor de ‘aniversario’. Uma vez que você adicione esse campo personalizado e salve o post, este valor será armazenado no banco de dados. Agora podemos retirá-lo do nosso loop usando o código abaixo:

<?php $custom_values = get_post_meta($post->ID, 'post-class'); ?>

Certifique-se de que você colou o código acima dentro do loop. Em seguida, adicione a variável $custom_values ​​para a função post_class.

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

Agora você pode ir no seu arquivo style.css e adicionar a classe, da seguinte forma:

.aniversario{Seu Estilo vai Aqui}

Este é de longe o maior controle que você vai obter com a função post_class em termos de estilo CSS. Mas, às vezes, você quer ainda mais controle. As Classes CSS permitem alterar o plano de fundo e outros elementos de estilo, mas você não pode mudar toda a estrutura desta maneira. Então, vamos ver algo, um pouco mais avançado, que nós gostamos de chamar de O SUPER LOOP.

<?php if (have_posts()) : ?>
<?php $count = 0; ?>
<?php while (have_posts()) : the_post(); ?>
<?php $count++; ?>
<?php if ($count == 1) : ?>
          
 Adicione seus Divs de Posts Personalizados Aqui para o primeiro post.. 

<?php elseif ($count == 2) : ?>      
  
 Adicione seus Divs de Posts Personalizados Aqui para o segundo post.          
          
<?php elseif ($count == 3) : ?> 

 Adicione seus Divs de Posts Personalizados Aqui para o terceiro post.      

<?php elseif ($count == 4) : ?>  

 Adicione seus Divs de Posts Personalizados Aqui para o quarto post.    
          
<?php else : ?>
   
 Adicione seus Divs de Posts Personalizados Aqui para o resto dos posts. 

  <?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>

Perceba que acabamos de criar um loop acima que permite estilizar cada post com base na contagem. Isto é muito útil quando você quer que seus três primeiros posts tenham uma aparência diferente do resto. Por exemplo, os três primeiros posts podem ser uma coluna de posts enquanto o resto será menor e em duas colunas. Você pode fazer quase tudo com o super loop. Você pode adicionar suas próprias consultas e muito mais. Se você é um desenvolvedor, então vai valer a pena gastar um tempo para esgotar opções até o limite.

Fontes:

• EpicAlex da ProblogDesign
• WordPress Codex
• Super Loop de Perishable