Descubre en este tutorial cómo introducir un bloque reutilizable al inicio de la página de blog en un child theme de Genesis mediante código.
Hasta hace muy poco era habitual que aprovecharas los hooks de Genesis para insertar widgets.
¿Por ejemplo?
Crear una widget área para añadir el contenido que quisieras en las páginas de archivo y del blog.
También te expliqué cómo añadir una cabecera al blog creando un fichero home.php y un poco de CSS.
Pero ha llegado la era de los bloques, así que merece la pena cambiar algunos hábitos y empezar a sacarles partido, ¿no te parece?
De hecho, gracias a los bloques reutilizables puedes conseguir el mismo resultado que con los widgets en Genesis.
¿Quieres juntar lo mejor de los dos mundos?
Este sería el resultado:
Aquí tienes cómo hacerlo:
Pasos para mostrar un bloque reutilizable en la cabecera de la página de blog en Genesis
1. Crea un bloque reutilizable
Crea el bloque que desees mostrar como cabecera de la página de blog.
Puedes elegir entre todos los bloques que tengas instalados, incluso puedes agrupar varios para conseguir la estructura que deseas.
En este caso, es un bloque de fondo con una imagen y un encabezado (H1) con el texto de Blog.
Una vez lo hayas personalizado a tu gusto, ve a los tres puntos de la barra de herramientas del bloque y elige «Añadir a los bloques reutilizables».
A continuación dale un nombre y guárdalo. Por ejemplo, «Hero Blog».
2. Examina el ID del bloque
Una vez que hayas creado el bloque, ve al modo «editor de código» y examina el HTML.
Pro tip: utiliza el atajo de teclado: Cmd + Alt + Shift + M para ir más rápido. 😉
A la altura de donde has creado el bloque verás algo similar a:
<!-- wp:block {"ref":420} /-->Ese número es el ID del tu bloque, y lo vas a necesitar a continuación.
3. Modifica functions.php
Añade el siguiente fragmento al final del fichero functions.php o a tu plugin de funcionalidades:
Para ver este código y los otros 1717 snippets de esta web,
identifícate o suscríbete aquí.
Con este bloque usas el hook genesis_after_header para mostrar el bloque reutilizable justo antes del loop de entradas de la página de blog.
En este caso, estás mostrando el bloque reutilizable con ID 420, pero debes de cambiar ese número por el tuyo (paso 2) en la línea que dice: «cambia el ID».
El fragmento anterior también contiene una etiqueta condicional para asegurarte de que solo se muestra en las entradas del blog.
Conclusión
Ahora, gracias a las etiquetas condicionales de WordPress, al hook genesis_after_header y a que sabes identificar las IDs de los bloques reutilizables, ya puedes conseguir que se muestre un bloque reutilizable como cabecera personalizada de la página de blog.
¿Alguna duda? Te leo en los comentarios.
Y si quieres darme una sugerencia para próximos tutoriales, déjamela en el formulario de contacto. Ventajas de ser suscriptor. 😉
