Cómo personalizar cada post de WordPress de una manera distinta

¿Has entrado alguna vez en un sitio web cuyos posts lucen totalmente diferentes unos de otros? Ciertos sitios web cuentan con posts adheridos con un fondo personalizado, e incluso los hay que, dependiendo de la categoría, los posts están personalizados de manera distinta. Si alguna vez has querido aprender a personalizar cada post de WordPress de manera distinta, me alegra decirte que estás en el lugar correcto. En este artículo te mostraré cómo personalizar cada post de WordPress de una manera distinta.

Ojo, para seguir este tutorial debes conocer cómo agregar CSS personalizado en WordPress. También es necesario saber cómo funciona el Inspeccionador de elementos y ciertas nociones de HTML y CSS.

Personalizando posts concretos de WordPress

WordPress añade clases CSS por defecto a varios elementos de tu sitio web. Un tema estándar compatible con WordPress debe contar con el código necesario que agrega clases CSS en el body, en los posts, en las páginas, en los widgets de WordPress, en los menús y mucho más.

Existe una función del núcleo de WordPress llamada post_class() que se suele utilizar en los temas para indicar a WordPress dónde añadir dichas clases CSS por defecto en los posts.

Si vas a la parte pública de tu sitio web y utilizar el Inspeccionador de elementos de tu navegador, podrás ver las clases de las que estamos hablando.

Las siguientes clases son añadidas por defecto basándose en la página que el usuario está viendo.

.post
.post-ID
.sticky
.attachment
.hentry
.category-ID
.category-nombre
.tag-nombre
.format-nombre
.type-nombre
.has-post-thumbnail
.post-password-required
.post-password-protected

Un ejemplo de cómo se ve esto:

<article id="post-2219" class="post-2219 post type-post status-publish format-standard has-post-thumbnail hentry category-optimizacion tag-prevenir-el-robo-de-imagenes tag-prevenir-el-robo-de-imagenes-en-wordpress tag-robo-de-imagenes" itemscope="" itemtype="https://schema.org/Article">

Como ves, puedes personalizar cada uno de los posts de WordPress de manera distinta utilizando sus respectivas clases CSS.

Por ejemplo, si quieres personalizar un post en concreto, puedes utilizar la clase post-ID en la hoja de estilo de tu tema.

.post-2219 { 
background-color: #000000;
color:#FFFFFF; 
}

No olvides cambiar el ID, por el ID del post que quieras personalizar.

Vamos a ver otro ejemplo. Ahora vamos a personalizar todos los posts que entren dentro de la categoría General. Para ello, tendremos que añadir este código en nuestra hoja de estilos:

.category-general{
background-color: #000000;
color: #FFFFFF;
}

Este CSS afectará a todos los posts de la categoría General.

La función post_class

Muchos desarrolladores de temas utilizan la función post_class para indicar a WordPress donde añadir las clases por defecto de los posts. La mayoría de las veces se meten en el tag

La función post_class no solo carga las clases por defecto de WordPress, si no que también te permite agregar tus propias clases.

Dependiendo del tema, puedes encontrar la función post_class en el fichero single.php o en las plantillas donde va el contenido. Normalmente, el código será algo así:

Como he dicho antes, puedes añadir tus propias clases CSS con un atributo tal que así:

Ahora, la función post_class agregará las clases por defecto de WordPress junto con la que le acabas de introducir.

Si quieres agregar más clases CSS a post_class, puedes definir un array de clases CSS y pasarselo como parámetro a la función.

Personalizar los posts de manera distinta basándonos en el autor

Las clases CSS por defecto agregadas por post_class no incluyen al nombre del autor como una clase CSS.

Si quieres personalizar el estilo de cada uno de los posts basándonos en el autor, lo primero que tienes que hacer es incluir el nombre del autor como una clase CSS. Puedes llevar a cabo esto mediante el siguiente código:

Este código añadirá el nicename del autor como una clase CSS. El nicename es una URL amigable utilizada por WordPress para definir al autor. No tienes espacios, y todos los caracteres están en minúsculas, lo cual es perfecto para las clases CSS.

El código de antes te generará un HTML tal que así:

<article id="post-2219" class="jorge post-2219 post type-post status-publish format-standard has-post-thumbnail hentry category-optimizacion tag-prevenir-el-robo-de-imagenes tag-prevenir-el-robo-de-imagenes-en-wordpress tag-robo-de-imagenes" itemscope="" itemtype="https://schema.org/Article">

Ahora podrás utilizar .jorge en tu hoja de estilos para personalizar todos los posts escritos por este autor determinado.

.jorge{
background-color: #000000;
color: #FFFFFF;
}

Y hasta aquí nuestro artículo sobre cómo personalizar cada post de WordPress de una manera distinta. Espero que te haya gustado y, si te ha resultado útil, no dudes en compartirlo en redes sociales. El artículo ha sido extraido de WPBeginner y el icono de la imagen destacada es obra de treize grammes. ¡Nos leemos!

SIGUE LEYENDO…
Ir a la fuente
Author: Jorge López

Declaración de intenciones de SeoX