• Saltar a la navegación principal
  • Saltar al contenido principal
Código Genesis

Código Genesis

Tutoriales de WordPress y Genesis Framework

  • Empieza aquí
  • Cuenta
    • Suscripción
    • Perfil
    • Actualizar tarjeta
    • Favoritos
    • Salir
  • Suscribirse
  • Acceder

Mostrar las categorías en formato rejilla en la home Genesis Sample

Aprende en este tutorial cómo enseñar las categorías en formato grid o rejilla en la página principal de Genesis Sample mediante código.

Si quieres potenciar las distintas categorías que utilizas para clasificar tus entradas, una opción interesante puede ser que las introduzcas en la home.

Gracias a que ya sabes cómo añadir una imagen destacada a las categorías, ahora puedes crear una rejilla que muestre una fotografía representativa para cada una de ellas.

Este es el resultado final:

rejilla categorias home Genesis Sample
Categorías mostradas en formato rejilla en la home de Genesis Sample.

¿Quieres algo así?

Instrucciones para visualizar las categorías en formato grid en la home de Genesis Sample

1. Añade una imagen destacada a las categorías

¿Todavía no has habilitado la selección de imagen destacada para tus categorías?

Entonces agrega el siguiente fragmento al final del fichero functions.php o a tu plugin de funcionalidades:

Para ver este código y los otros 1801 snippets de esta web,
identifícate o suscríbete aquí.

Ahora puedes elegir la imagen de cada categoría desde tu biblioteca de medios.

ajustes añadir imagen categoria WordPress home
Añadir imagen destacada a las categorías.

2. Genera el fichero front-page.php

Crea un archivo front-page.php en la raíz del child theme y añade el siguiente snippet:

Para ver este código y los otros 1801 snippets de esta web,
identifícate o suscríbete aquí.

Con esto te aseguras de visualizar las categorías nativas de WordPress en la home con la siguiente información:

  • La imagen destacada de la categoría.
  • El nombre la categoría.

Y, al envolver el contenido con una clase llamada .cat-wrapper, tienes la posibilidad de aplicar los estilos necesarios.

Además, este bloque fuerza el formato de ancho completo para que el diseño sea más atractivo.

3. Modifica functions.php (opcional)

Por último debes crear un nuevo tamaño de imagen llamado «Grid» que se ajuste a las medidas necesarias agregando la siguiente línea a functions.php:

Para ver este código y los otros 1801 snippets de esta web,
identifícate o suscríbete aquí.

Si ya cuentas con un tamaño adecuado puedes ahorrarte este paso, pero acuérdate de regenerar todas la miniaturas de las imágenes que ya tienes en WordPress con el plugin Regenerate Thumbnails.

4. Personaliza el CSS de la rejilla

Una vez realizados los cambios en la plantilla, solo te falta asignar los estilos para que se muestre en formato de grid.

Para ello introduce este bloque al final de style.css:

Para ver este código y los otros 1801 snippets de esta web,
identifícate o suscríbete aquí.

Al insertar estas líneas de CSS consigues que las categorías se muestren en una rejilla de 3 columnas en pantallas de más de 960px de ancho y que se adapte a dispositivos móviles.

Con este snippet también das unos estilos básicos para que el título de la página quede centrado y mejor jerarquizado.

Puedes combinar este tutorial con otros como el de crear una cabecera personalizada en la página principal de Genesis Sample para modificar la home a tu gusto.

Conclusiones

Ahora ya sabes cómo introducir las categorías en formato rejilla en la home de Genesis Sample.

Este código está creado para Genesis Sample (2.8) pero con unos pocos ajustes te servirá para cualquier child theme de Genesis.

Si deseas hacerme alguna pregunta o darme una sugerencia para próximos tutoriales, déjamela en los comentarios (opción exclusiva para suscriptores).

CSS Genesis Framework Genesis Sample PHP Porfolio

Nahuai Badiola

Desarrollador web especializado en WordPress y Genesis Framework. CEO de Código Genesis y cofundador de OsomPress (temas y plugins para WordPress).

Para dejar dudas o preguntas sobre este código, puedes login o suscribirte.

  • Empieza aquí
  • Sobre Código Genesis
  • Preguntas frecuentes
  • Contacto

Aviso legal · Política de privacidad · Política de cookies · Condiciones de contratación
Copyright © 2023 · Código Genesis

¿Has olvidado tu contraseña?