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

32 comentarios

¡Atención! Zelle Lite (ex Zerif) ya no se actualiza. Cambia a:

Hestia

Hestia

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

Más opciones en Hestia Pro

Neve

Neve

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

Más opciones en Neve Pro

Tutoriales de Zerif Lite en español

Por: Caribdis.Net

Publicada: 19 de febrero de 2017

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.

Últimas entradas de Caribdis.Net (ver todo)

Se responden todas las dudas o consultas de los lectores acerca del contenido de esta publicación únicamente en su respectiva sección de comentarios, por lo general dentro de las 24/72 hs. Así que asegúrate de suscribirte a las respuestas para recibirlas en tu casilla de correo electrónico (podrás cancelar la suscripción cuando lo desees). Con la suscripción al blog, recibirás en tu correo únicamente las nuevas entradas que se publiquen.

Ten en cuenta que muchas de las preguntas ya fueron respondidas en distintas entradas; recuerda que puedes usar el buscador de la barra lateral, y Ctrl+F para buscar texto dentro de una página.

Esta u otras entradas pueden contener enlaces de afiliado. Esto significa que si usas un enlace para adquirir algún producto recomendado, recibiremos una comisión de afiliados, la cual no te generará ningún costo adicional.

32 Comentarios

  1. DAVID

    Hola, muy interesante e ilustrativa tu informacion, tengo una consulta, se modifico el blog a 2 columnas con codigo en recuadro adicional CSS, y quedo excelente.

    Ahora, en la configuración de lectura de wordpress tiene 6 post por pagina, el problema es que cuando hay mas de 8 post no crea nuevas paginas, desaparece los post o publicaciones mas antiguas (si ajusto a 15 o 20 post por pagina, si aparecen todos), actualmente hay 11 publicaciones y se borraron las 4 mas antiguas.

    La pregunta es: como hacer para que cada que se publiquen nuevos post, aparezcan en nuevas paginas y no se borren los mas antiguos.

    • Caribdis Diseño Web

      Hola, David.

      Si es la URL de tu comentario, supongo que lo resolviste, ya que se ven los enlaces del paginado.

      Saludos.

      • DAVID

        Hola, si ya se resolvio, muchas gracias, quedo excelente, saludos

  2. Benjamin James Ruiz

    Hola, perfecto me ha servido, aunque te admito que la primera vez la lie, y no tuve que entrar al PHP My Admin para solucionarlo jajaja, tengo una pequeña duda, derrepente no se puede hacer, porque no lo e visto en tus tutoriales. Es el de como agrandar el titulo de los Post. Saludos

    • Caribdis Diseño Web

      Hola, Benjamín.

      Usá el siguiente código:

      .single .entry-title {
          font-size: 24px;
      }
      

      Ajustá el valor en píxeles por el que necesites.

      Saludos.

  3. Genderovic

    Hola, gracias ya resolví el tema según tu orientación. Mas bien me percate que la zona derechas del listado de entradas en la sección blog http://cadadiamejoronline.com/blog/ no me muestra las “categorías”, “recientes” , o para “buscar” como se podría hacer para mostrar dichas opciones. Gracias.

    • Caribdis Diseño Web

      Hola, Genderovic.

      Fijate en esta respuesta.

      Saludos.

  4. Genderovic

    Hola, por que no se muestra la imágenes destacadas de la entradas que coloque en mi blog, solo se muestra los títulos, parte del contenido y en forma de lista.

    Gracias!!!!

    • Caribdis Diseño Web

      Hola, Genderovic.

      ¿Tenés a mano el enlace del blog? Porque sin verlo directamente es difícil darte una respuesta.

      Saludos.

      • Genderovic

        este es el enlance http://cadadiamejoronline.com/blog/

        • Caribdis Diseño Web

          Hola, Genderovic.

          Es un error de la versión. Actualizá a 1.8.5.29.

          Saludos.

          • Genderovic

            1.- como podría hacer la actualización de versión?
            2.-los cambios y configuraciones que hice se pierden??
            3.-y como generaría un Child theme como respaldo

            tengo el Zerif-Lite

          • Caribdis Diseño Web

            Hola, Genderovic.

            Las actualizaciones de temas se hacen desde el escritorio de WordPress y no perderás nada del contenido o de la configuración. Solo perderías cambios que hayas hecho directamente sobre los archivos del tema. Para eso es el tema hijo: para agregar funcionalidad adicional y conservar esos cambios si el tema padre se actualiza. Para más información podés ver esta entrada.

            Saludos.

  5. Luis

    Buenas, gracias por sus respuestas, mi consulta seria si se puede poner una entrada principal que ocupe 2 columas al inicio y las demas en grilla de 2.

    Gracias!!!

    • Caribdis Diseño Web

      Hola, Luis.

      Probá con el siguiente código:

      @media (min-width: 640px) {
      .blog article.hentry,
      .archive article.hentry {
          width: 48%;
      }
      .blog article.hentry:first-child,
      .archive article.hentry:first-of-type {
          width: 98%;
      }
      .nav-links,
      .blog article.hentry:nth-child(2n+1),
      .archive article.hentry:nth-child(1n) {
          clear: both;
      }
      .blog article.hentry:nth-child(1n),
      .archive article.hentry:nth-child(2n) {
          clear: none;
      }
      .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;
      }
      }
      

      Saludos.

  6. Augusto

    Hola me gustaría poder agregar un texto en mi pagina de entradas al blog. como es posible?

    • Caribdis Diseño Web

      Hola, Augusto.

      ¿Dónde exactamente y qué clase de texto querés agregar?

  7. Raismar

    Hola ¿cómo estás? disculpa, en el archivo content.php del tema padre no tengo la línea que dices que hay que reemplazar: $post_thumbnail_url = get_the_post_thumbnail( get_the_ID(), ‘zerif-post-thumbnail’ );

    Por tanto, cuando copio al tema hijo, no me aparece y nada me cambia.

    De resto, ya logré todo como tu tutorial.

    Gracias!

    • Caribdis Diseño Web

      Hola, Raismar.

      Este tutorial está actualizado para la versión del repositorio. Si estás usando la versión descontinuada, el código que tenés que reemplazar en el archivo content.php es <?php the_post_thumbnail(); ?> por <?php the_post_thumbnail("post-thumbnail-large-mobile"); ?>

      Saludos.

  8. Dani_Cheng

    Hola,

    en el resumen de las entradas, tengo dos problemas que espero que me ayudes a resolver:

    1) Quiero hacer que el resumen sea más corto (no encuentro la opción manual de la que habláis)

    2) Cuando el resumen supera la altura de la imagen en minitatura continúa debajo de ella (es como si todo estuviera en una misma columna). Yo quisiera que el texto no se metiera debajo, sino que siguiera en línea con el resto.

    Cómo puedo solucionar esto?

    Mil gracias

    • Caribdis Diseño Web

      Hola, Dani_Cheng.

      La opción de extracto manual está en el editor de la entrada, es el recuadro Extracto. Si no lo ves, tenés que seleccionarlo desde Opciones de pantalla > Cajas > Extracto.

      En cuanto al segundo punto, no es posible sin editar todas las media queries, podrías darle una altura fija al div de la imagen (.post-img-wrap), pero en ciertas resoluciones todavía se va a ver con el texto abajo (o con un margen inferior muy grande en los móviles).

      Saludos.

  9. Héctor Suárez

    Buenas tardes, consulta!!! hay la posibilidad de poner en rectángulo una sección de una categoría en especial y poner en cuadrados otra categoría??? osea que la configuración no sea en general sino poder poner otro tipo de grilla para otra categoría, espero me hayas podido entender jejeje, Saludos desde Perú una vez mas!

    • Caribdis Diseño Web

      Hola, Héctor.

      Sí, es posible, pero es bastante más complicado. Tendrías que crear plantillas de archivo de categoría. Es decir, tomar el contenido de la plantilla archive.php, pasarlo a un archivo category-slug.php, y crear también la plantilla del contenido para esta categoría (content-slug.php), donde slug en el nombre de estos dos archivos sería el slug de la categoría en cuestión. En el archivo content incluirías el tamaño de miniatura distinto del que se muestra en las demás.

      Saludos.

      • Héctor Suárez

        Genial! gracias! una consulta mas! la estructura de este tutorial solo funciona con archivos no?? porque categorías se quedaron con el rectángulo largo, osea tendría que aplicar aquí lo que me indicaste, osea quiero que una pagina de una categoría se vea igual a la del blog (grilla)

        • Caribdis Diseño Web

          Hola, Héctor.

          El código de este tutorial aplica por igual a la página de archivo del blog y de las categorías. Si necesitás que una categoría tenga otro diseño, tenés que crearle una plantilla aparte.

          Saludos.

  10. Cristian Villagomez

    Buenos días y muchas gracias primero por el template segundo por tus respuestas, tengo custom-posts-types que se me muestran en el single.php se podráin mostrar también en grilla? o como podría modificar el css del single.php para que se muestren en grilla?, muchas gracias de antemano por la respuesta, saludos.

    • Caribdis Diseño Web

      Hola, Cristian.

      Duplicá todas las clases que comienzan con .archive y reemplazá esa parte sola por .post-type-archive.

      Ejemplo:

      .page-template-template-blog article.hentry,
      .archive article.hentry,
      .post-type-archive article.hentry {
          width: 48%;
      }
      

      Saludos.

  11. Sebas

    Impresionante, como todo lo que hacen! Lo he probado y funciona perfecto. Lo único, es que a mí me hace un diseño diferente si lo pego en la hoja de estilos o en el adicional. Muchísimas gracias, si no les molesta les haré más consultas en otros posts 🙂
    Gracias a ustedes estoy aprendiendo mucho!

  12. Caribdis Diseño Web

    Hola, Andrés.

    No hay mucho secreto, es lo mismo migrar un sitio de local a la web que a la inversa: copiar archivos e importar base de datos (actualizando las URL). Si te referís a “sincronizar” ambos, no es posible.

    Yo siempre lo he hecho a mano, así que no podría aconsejarte mucho, pero sé que el plugin Duplicator es bastante útil en estos casos.

    Saludos.

    • Andres

      Gracias por tu pronta respuesta Caribdis. Sigo investigando. Saludos

  13. Andres

    Hola Carib excelente todo tu contenido, Pregunta tienes pensado o ya has hecho un tutorial de como respaldar un sitio alojado en un hosting (GoDaddy en mi caso) a un localhost por FTP. Estoy con este tema de querer agregar plugins y hacer test pero se que hacerlo en producción puede ser riesgoso y no es lo mejor (me entere luego de montar todo el sitio). Si alguien sabe de algun tuto que sea claro muchas gracias. Solo he encontrado a la inversa subir de mi local host a un hosting.
    Tengo un e-commerce ( woocomerce) y no puedo arriesgar a perder clientes Saludos. Desde ya muchas gracias.

    • Andres

      Tengo instalado el local host (WampServer) y FTP (Filezilla) Lo que no he podido entender como hacer la copia de la base de datos y los ficheros por FTP de mi web para generar un respaldo de pruebas y subir las actualizaciones cuando está correcto el funcionamiento en local.

      Por lo que tengo dudas en:
      1)configurar ambos [(WampServer) y FTP (Filezilla)] apuntando al hosting para hacer una copia y luego que los enlaces funcionen correctamente en local.

      2) Actualizar la web desde mi localhost a mi hosting.

      Espero haber explicado bien mis dudas saludos y muchas gracias.

Los comentarios están cerrados. ¿Por qué?

Pin It en Pinterest

Compartir esto

Compartir es agradecer

Si esta publicación te resultó útil, puedes compartirla y ayudar a otros. ¡Gracias!