Descubre en este tutorial cómo introducir un patrón sincronizable 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 y patrones, así que merece la pena cambiar algunos hábitos y empezar a sacarles partido, ¿no te parece?
De hecho, gracias a los patrones sincronizables (antes llamados 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 patrón sincronizable 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 «Crear patrón».
A continuación dale un nombre, elige una categoría (opcional), selecciona que sea sincronizado y guárdalo.
2. Examina el ID del patrón sincronizable
Una vez que hayas creado el patrón sincronizable, 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 patrón sincronizable verás algo similar a:
<!-- wp:block {"ref":420} /-->
Ese número es el ID tu patrón sincronizable, 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 2019 snippets de esta web,
identifícate o suscríbete aquí.
Con este bloque usas el hook genesis_after_header
para mostrar el patrón sincronizable 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 patrones sincronizables, ya puedes conseguir que se muestre un patrón sincronizable 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. 😉