---
title: "Zerif Lite: ¿Cómo mostrar el blog en grilla?"
url: https://caribdis.net/2017/02/19/zerif-lite-como-mostrar-el-blog-en-grilla/
date: 2017-02-19
modified: 2019-10-11
lang: es
author: "Caribdis.Net"
description: "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..."
categories:
  - "Zerif Lite"
tags:
  - "gratuito"
  - "tema"
  - "ThemeIsle"
  - "tutorial"
  - "WordPress"
  - "Zerif Lite"
image: https://caribdis.net/wp-content/uploads/2017/04/zerif-lite-wordpress.jpg
word_count: 507
---

# Zerif Lite: ¿Cómo mostrar el blog en grilla?

En este breve tutorial vamos a aprender a cambiar el diseño del blog del tema **Zerif Lite**, de [**ThemeIsle**](https://caribdis.link/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](https://caribdis.net/wp-content/uploads/2017/02/zerif-blog-estandar.jpg)

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

![Zerif - Blog en grilla](https://caribdis.net/wp-content/uploads/2017/02/zerif-blog-grilla.jpg)

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](https://caribdis.net/2015/11/17/zerif-lite-como-agregar-una-nueva-seccion-personalizada/).

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](https://caribdis.net/wp-content/uploads/2017/02/zerif-blog-grilla-2.jpg)

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>` por `<div>` 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](https://caribdis.net/wp-content/uploads/2017/02/zerif-blog-grilla-3.jpg)

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**](https://wordpress.org/plugins/regenerate-thumbnails/).