Cómo personalizar cada publicación de WordPress de manera diferente

¿Alguna vez te has encontrado con un sitio que da forma a las publicaciones de su blog de manera diferente? Algunos sitios tienen publicaciones fijas resaltadas con un fondo personalizado, mientras que otros pueden tener cada publicación de categoría con un estilo único. Si alguna vez ha querido aprender a diseñar cada publicación de WordPress de manera diferente, entonces ha venido al lugar correcto. En este artículo, le mostraremos cómo personalizar cada publicación de WordPress de manera diferente.

Nota: Este tutorial requiere agregar CSS personalizado en WordPress. También deberá poder utilizar la herramienta Inspeccionar. Se requieren conocimientos básicos de CSS y HTML.

Diseñar publicaciones individuales en WordPress

WordPress agrega clases CSS predefinidas a varios elementos de su sitio web. Un tema de WordPress que cumpla con los estándares debe tener el código requerido por WordPress para agregar clases CSS para cuerpo, publicaciones, páginas, widgets, menús y más.

Una función principal de WordPress llamada post_class() es utilizado por temas para decirle a WordPress dónde agregar esas clases CSS predeterminadas para publicaciones.

Si visita su sitio web y utiliza la herramienta Inspeccionar en su navegador, podrá ver las clases agregadas para cada publicación.

A continuación se muestran las clases CSS agregadas de forma predeterminada según la página que está viendo un usuario.

• .ID del mensaje
• .mandar
• .adjunto archivo
• .pegajoso
• .hentry (páginas de microformato hAtom)
• .categoria ID
• .Nombre de la categoría
• .tag-name
• .format- {nombre-formato}
• .type- {nombre-tipo-artículo}
• .ha-post-miniatura
• .post-contraseña-requerida
• .post protegido por contraseña

Un resultado de ejemplo se vería así:

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

Puede diseñar cada publicación de WordPress de manera diferente utilizando sus respectivas clases de CSS.

Por ejemplo, si desea diseñar una sola publicación, puede usar la clase post-id en su CSS personalizado.

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

No olvide cambiar el ID de la publicación para que coincida con el suyo.

Echemos un vistazo a otro ejemplo.

Esta vez, aplicaremos estilo a todas las publicaciones archivadas en una categoría específica llamada noticias.

Podemos hacer esto agregando el siguiente CSS personalizado a nuestro tema »

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

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

La función Post Class

Los desarrolladores de temas usan la función post_class para decirle a WordPress dónde agregar clases de publicaciones. Suele estar en <article> etiqueta.

La función de clase de publicación no solo carga las clases CSS predeterminadas generadas por WordPress, sino que también le permite agregar sus propias clases.

Dependiendo del tema, encontrará la función post_class en su archivo single.php o archivos de modelo de contenido. Normalmente, el código se verá así:

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

Puede agregar su propia clase CSS personalizada con un atributo como este:

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

La post_class imprimirá las respectivas clases CSS predeterminadas junto con su clase CSS personalizada.

Si desea agregar más clases CSS, puede 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 ); ?>>

Publicaciones con estilos diferentes según los autores

Las clases CSS predeterminadas generadas por la función de publicaciones no incluyen el nombre del autor como clase CSS.

Si desea personalizar el estilo de cada publicación en función del autor, primero deberá agregar el nombre del autor como una clase CSS.

Puede hacer esto usando el siguiente fragmento de código:

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

Este código agregará el nombre de usuario del usuario como una clase CSS. Nicename es un nombre descriptivo de URL utilizado por WordPress. No tiene espacios y todos los caracteres están en minúsculas, lo que lo hace perfecto para usar como clase CSS.

El código anterior le dará un resultado como este:

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

Ahora puede usar .peter en su CSS personalizado para diseñar todas las publicaciones de este autor en particular de manera diferente.

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

Publicaciones de estilo basadas en la popularidad usando el recuento de comentarios

Es posible que haya visto sitios populares de widgets de publicaciones que a veces dependen del recuento de comentarios. En este ejemplo, le mostraremos cómo diseñar publicaciones de manera diferente usando el recuento de comentarios.

Primero, necesitamos obtener el recuento de comentarios y asociarle una clase.

Para obtener el recuento de comentarios, debe agregar el siguiente código en los archivos del tema. Este código va dentro del bucle de WordPress, por lo que puede agregarlo 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;
}