Cómo dar un estilo diferente a cada entrada de WordPress

¿Te has encontrado alguna vez con un sitio que da un estilo diferente a las entradas de su blog? Algunos sitios tienen posts fijos resaltados con un fondo personalizado, mientras que otros pueden tener cada post de categoría con un estilo único. Si alguna vez has querido aprender a dar un estilo diferente a cada una de las entradas de WordPress, estás en el lugar adecuado. En este artículo, te mostraremos cómo dar un estilo diferente a cada entrada de WordPress

Nota: Este tutorial requiere que añadas CSS personalizado en WordPress. También necesitarás saber utilizar la herramienta Inspect. Se requieren algunos conocimientos básicos de CSS y HTML.

Estilizar entradas individuales en WordPress

WordPress añade clases CSS por defecto a varios elementos de tu sitio web. Un tema de WordPress compatible con el estándar debe tener el código requerido por WordPress para añadir clases CSS para el cuerpo, las entradas, las páginas, los widgets, los menús, etc

Una función central de WordPress llamada post_class() es utilizada por los temas para indicar a WordPress dónde añadir esas clases CSS por defecto para las entradas

Si visitas tu sitio web y utilizas la herramienta de inspección en tu navegador, podrás ver esas clases añadidas para cada entrada

A continuación se muestran las clases CSS añadidas por defecto en función de la página que esté viendo el usuario

• .post-id
• .post
• .adjunto
• .pegajoso
• .hentry (páginas de microformato hAtom)
• .category-ID
• .category-name
• .tag-name
• .formato-{nombre-del-formato}
• .type-{post-type-name}
• .has-post-thumbnail
• .post-password-required
• .post-contraseña-protegida

Un ejemplo de salida sería así:

<article id="post-412" class="post-412 post type-post status-publish format-standard hentry category-news">

Puedes aplicar un estilo diferente a cada entrada de WordPress utilizando las respectivas clases CSS

Por ejemplo, si quieres dar estilo a una entrada individual, puedes utilizar la clase post-id en tu CSS personalizado

.post-412 { 
background-color: #FF0303;
color:#FFFFFF; 
} 

No olvides cambiar el ID de la entrada para que coincida con el tuyo

Veamos otro ejemplo

Esta vez vamos a dar estilo a todas las entradas archivadas en una categoría específica llamada noticias

Podemos hacerlo añadiendo el siguiente CSS personalizado a nuestro tema"

.category-news { 
    font-size: 18px;
    font-style: italic;
} 

Este CSS afectará a todas las entradas archivadas en la categoría de noticias

La función de la clase Post

Los desarrolladores de temas utilizan la función post_class para indicar a WordPress dónde añadir las clases de las entradas. Normalmente está en la sección <article> etiqueta

La función de clase de la entrada no sólo carga las clases CSS generadas por defecto por WordPress, sino que también te permite añadir tus propias clases

Dependiendo de tu tema, encontrarás la función post_class en tu archivo single.php o en los archivos de la plantilla de contenido. Normalmente, el código será algo así

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

Puedes añadir tu propia clase CSS personalizada con un atributo como este

<article id="post-<?php the_ID(); ?>" <?php post_class('longform-article'); ?>>

El post_class imprimirá las respectivas clases CSS por defecto junto con tu clase CSS personalizada

Si quieres añadir varias clases CSS, puedes definirlas como una matriz y luego llamarlas en la función post_class

<?php 
$custom_classes = array(
		'longform-article',
		'featured-story',
		'interactive',
	);
?>
<article id="post-<?php the_ID(); ?>" <?php post_class( $custom_classes ); ?>>

Estilizar las entradas de forma diferente en función de los autores

Las clases CSS por defecto generadas por la función the_posts no incluyen el nombre del autor como clase CSS.

Si quieres personalizar el estilo de cada entrada en función del autor, tendrás que añadir primero el nombre del autor como clase CSS.

Puedes hacerlo utilizando el siguiente fragmento:

<?php $author = get_the_author_meta('user_nicename'); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class( $author ); ?>>

Este código añadirá el nombre del usuario como clase CSS. El nombre del usuario es un nombre amigable para la URL que utiliza WordPress. No tiene espacios y todos los caracteres están en minúsculas, lo que lo hace perfecto para utilizarlo como clase CSS

El código anterior te dará un resultado como éste

<article id="post-412" class="peter post-412 post type-post status-publish format-standard hentry category-news">

Ahora puedes utilizar .peter en tu CSS personalizado para dar un estilo diferente a todas las publicaciones de este autor en particular

.peter { 
background-color:#EEE;
border:1px solid #CCC; 
}

Estiliza las entradas en función de su popularidad utilizando el recuento de comentarios

Es posible que hayas visto sitios con widgets de entradas populares que a veces se basan en el recuento de comentarios. En este ejemplo, te mostraremos cómo dar un estilo diferente a las entradas utilizando el recuento de comentarios

En primer lugar, tenemos que obtener el recuento de comentarios y asociar una clase con él

Para obtener el recuento de comentarios, tendrás que añadir el siguiente código en los archivos de tu tema. Este código va dentro del bucle de WordPress, así que también puedes añadirlo justo antes de la etiqueta

<?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="new";
	} elseif ($my_comment_count >= 10 && $my_comment_count <20) {
		$my_comment_count="emerging";
	} elseif ($my_comment_count >= 20) {
		$my_comment_count="popular";
	}
?>

<article id="post-<?php the_ID(); ?>" <?php post_class( $my_comment_count ); ?>>

.new {border: 1px solid #FFFF00;}
.emerging {border: 1px dashed #FF9933;}
.popular {border: 1px dashed #CC0000;}

<?php $custom_values = get_post_meta($post->ID, 'post-class'); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class( $custom_values ); ?>>

<article id="post-412" class="trending post-412 post type-post status-publish format-standard hentry category-uncategorized">

.trending{
background-color:##ff0000;
}