¿Todavía no probaste Hestia?

Tema Hestia

Clic en la imagen para abrir el tutorial

Hestia es el tema gratuito más reciente de ThemeIsle

Multipropósito
Adaptable a todos los dispositivos
Fácil de configurar
Con más opciones que Zerif Lite

¡Todo el contenido creado en Zerif Lite se importa automáticamente!

En este 2017 ThemeIsle seguirá añadiendo nuevas y fabulosas características. ¡No dejes de probarlo!

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%;
}
.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%;
}
.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 Diseño Web

Caribdis Diseño Web

Ana Ayelén Martínez - Buenos Aires, Argentina
Técnica en electromecánica, periodista, entusiasta de los idiomas y enamorada de WordPress. Amante de la lectura, la música y el mate, y fanática de las series de J.J. Abrams.
Caribdis Diseño Web

Últimas entradas por Caribdis Diseño Web (ver todas)