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.

Clases CSS predeterminadas para publicaciones de WordPress

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.

Dibujar una publicación específica en WordPress

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";
	}
?>

Este código verifica el recuento de comentarios de la publicación mostrada y les asigna un valor basado en el recuento. Por ejemplo, las publicaciones con menos de 10 comentarios reciben una clase llamada nueva, menos de 20 se llaman emergentes y cualquier cosa con más de 20 comentarios es popular.

A continuación, debemos agregar la clase CSS de recuento de comentarios a la función post_class.

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

Esto agregará clases de CSS nuevas, emergentes y populares a todas las publicaciones en función del número de comentarios de cada publicación.

Puede agregar CSS personalizado a las publicaciones según la popularidad:

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

Solo estamos agregando bordes, puede agregar tantas reglas CSS como desee.

Estilo de publicaciones basadas en campos personalizados

La codificación rígida de las clases CSS en el archivo de tema lo restringe a esas clases CSS específicas. ¿Qué sucede si desea decidir qué clase de CSS agregar a un artículo mientras lo escribe?

Con campos personalizados, puede agregar clases CSS sobre la marcha.

Primero debe agregar un campo personalizado a una publicación para poder probarlo. Edite una publicación y desplácese hacia abajo hasta la sección de campos personalizados.

Agregar una clase de publicación como campo personalizado

Agregue post-class como su nombre de campo personalizado y cualquier cosa que desee usar como clase CSS en el campo de valor.

No olvide hacer clic en el botón “Agregar campo personalizado” para almacenarlo y luego guardar su publicación.

A continuación, edite los archivos del tema para ver su campo personalizado como una clase de publicación.

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

Producirá el siguiente código HTML:

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

Ahora puede agregar CSS personalizado para la post_class que agregó usando el campo personalizado.

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

Los campos personalizados pueden tener varios valores, por lo que puede agregar varias clases de CSS con el mismo nombre.

Hay muchas otras formas de personalizar las publicaciones de WordPress. A medida que sus habilidades crezcan, continuará descubriendo nuevas formas de diseñar publicaciones utilizando diferentes condiciones.

Esperamos que este artículo le haya ayudado a aprender a diseñar cada publicación de WordPress de manera diferente. También puede querer ver nuestra lista definitiva de los consejos, trucos y trucos de WordPress más solicitados.

¿Te ha resultado útil??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicado. Required fields are marked *