¡Zelle Lite (ex Zerif) ya no se actualiza! Ahora están...

Tema Hestia Hestia

Multipropósito
Adaptable a todos los dispositivos
Fácil de configurar

Más opciones en Hestia Pro

Tema Hestia Neve

Súper rápido
Compatible con AMP
Hecho para Elementor

Más opciones en Neve Pro

En este breve tutorial vamos a aprender a cambiar el diseño del blog del tema Zerif Lite, de ThemeIsle, para mostrar las entradas en un formato de grilla. Esta personalización es muy fácil, y solo basta añadir algunos códigos CSS, aunque vamos a ver también cómo podemos mejorar el resultado, mediante la modificación de un par de plantillas del tema.

Zerif incluye un único diseño para el blog: lista de entradas con imágenes destacadas cuadradas a la izquierda, y título, datos meta y extracto a la derecha.

Zerif - Plantilla del blog

Con un par de ajustes del CSS, podremos obtener un diseño como el siguiente:

Zerif - Blog en grilla

En el recuadro CSS adicional del Personalizador, o en la hoja de estilos del tema hijo (si ya lo hemos creado), este es el código que tendremos que pegar:

@media (min-width: 640px) {
.blog article.hentry,
.archive article.hentry {
    width: 48%;
}
.nav-links,
.blog article.hentry:nth-child(2n+1),
.archive article.hentry:nth-child(2n) {
    clear: both;
}
.archive .hentry,
.blog .hentry {
    margin: 0 1% 1.5em 1%;
    border-bottom: none;
}
.post-img-wrap a img {
    width: 100%;
}
.post-img-wrap {
    float: none;
    margin-right: 0;
    margin-bottom: 20px;
    display: block;
}
}

@media (max-width: 480px) {
.post-img-wrap a img {
    width: initial;
}
}

Como vimos en la imagen anterior, el resultado está bastante bien, y aplica también a las páginas de archivo (fechas, categorías y etiquetas). Pero podríamos mejorar el aspecto de las imágenes, ya que al ser cuadradas ocupan demasiado espacio en la pantalla, y las miniaturas predeterminadas tienen una dimensión demasiado pequeña que les hace perder nitidez.

Para esto sí vamos a necesitar el tema hijo, y modificar únicamente un archivo: content.php. Las instrucciones para crear el tema hijo se encuentran en esta entrada anterior.

Vamos a copiar el archivo content.php de la carpeta del tema padre a la del tema hijo, y luego con un editor de texto reemplazaremos la línea $post_thumbnail_url = get_the_post_thumbnail( get_the_ID(), 'zerif-post-thumbnail' ); por $post_thumbnail_url = get_the_post_thumbnail( get_the_ID(), 'zerif-post-thumbnail-large-mobile' );.

Este es otro tamaño de miniatura registrado por Zerif Lite, por lo cual no tendremos que hacer ninguna otra modificación en los archivos. El resultado:

Zerif - Blog en grilla - Imágenes destacadas

Por último, ¿qué tal si queremos suprimir la barra lateral y usar tres columnas en lugar de dos? En este caso, copiaremos la plantilla home.php del tema padre al tema hijo, y luego con un editor de texto reemplazaremos la línea <div class="content-left-wrap col-md-9"> por <div class="content-left-wrap col-md-12"> y suprimiremos la línea <?php zerif_sidebar_trigger(); ?>.

Ahora, para las tres columnas, reemplazaremos el código CSS anterior por:

@media (min-width: 640px) {
.blog article.hentry,
.archive article.hentry {
    width: 31.33%;
}
.nav-links,
.blog article.hentry:nth-child(3n+1),
.archive article.hentry:nth-child(3n+2) {
    clear: both;
}
.archive .hentry,
.blog .hentry {
    margin: 0 1% 1.5em 1%;
    border-bottom: none;
}
.post-img-wrap a img {
    width: 100%;
}
.post-img-wrap {
    float: none;
    margin-right: 0;
    margin-bottom: 20px;
    display: block;
}
}

@media (max-width: 480px) {
.post-img-wrap a img {
    width: initial;
}
}

El resultado:

Zerif - Blog en grilla - 3 columnas

Si queremos también suprimir la barra lateral de las páginas de archivo, no debemos olvidar hacer en la plantilla archive.php la misma edición que aplicamos en home.php.

Y otro detalle para tener en cuenta: si las imágenes destacadas no se muestran con las mismas proporciones, se recomienda regenerar las miniaturas con el plugin Regenerate Thumbnails.

Caribdis.Net