Insertar un patrón sincronizado dentro del contenido de una entrada de WordPress

Descubre en este tutorial cómo introducir un patrón de bloques sincronizado en el contenido de una entrada de WordPress de forma programática.

Ya sabes que siempre he sido muy fan de usar hooks (tanto los de WordPress como los de Genesis Framework) para «enganchar» cosas donde me interesara.

En tutoriales anteriores, te expliqué cómo podías añadir elementos como el típico CTA para suscribirte a una newsletter al final de una entrada o mostrar una oferta puntual incluyendo un banner superior, por ejemplo.

Pero a veces es más interesante poder mostrar estos elementos en medio del contenido de la entrada, ya que es más posible que el visitante lo vea.

Aunque ahora estamos en la era de los bloques y el paradigma ha cambiado un poco, podemos seguir añadiendo contenido de forma programática más o menos donde queremos.

De hecho, gracias a los patrones sincronizados (anteriormente llamados bloques reutilizables) y un poco de código puedes conseguir insertar lo que quieras en el contenido de una entrada.

Aquí tienes cómo hacerlo:

Pasos para insertar un patrón de bloques sincronizado en el contenido

1. Crea un patrón de bloques sincronizado

Crea el diseño que desees insertar (el CTA, oferta puntual…). Puedes elegir entre todos los bloques que tengas instalados, incluso puedes agrupar varios para conseguir la estructura que deseas.

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».

opción crear patrón bloques editor WordPress — Añadir patrón de bloques.

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

Una vez que hayas creado el bloque, ve al modo «editor de código» y examina el HTML.

seleccionar editor óodigo ajustes editor WordPress

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":1460} /-->

Ese número es el ID de tu patrón, y lo vas a necesitar a continuación. 😉

2.1. [Bonus] Obtén el ID del patrón de forma sencilla

Si vas a trabajar con patrones sincronizados a menudo y quieres tener el ID más a mano te recomiendo que apliques estos dos tutoriales:

Así podrás acceder a los patrones sincronizados de forma más sencilla y obtener el ID de un solo vistazo.

mostrar ID patrones sincronizados WordPress

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 2057 snippets de esta web,
identifícate o suscríbete aquí.

En este código usas el filtro the_content y realizas varias manipulaciones de los bloques dentro del contenido para insertar un patrón de bloques sincronizado después del 5º bloque de la entrada.

En este caso, estás mostrando el patrón de bloques con ID 1460, pero debes de cambiar ese número por el tuyo (paso 2) en la línea que dice: «cambia el ID».

También puedes modificar el punto de la entrada donde quieres que se inserte tu patrón sincronizado. Solo tienes que cambiar el 5 por el número que quieras.

El fragmento anterior también contiene una etiqueta condicional para asegurarte de que solo se muestra en las entradas del blog o algún Custom Post Type.

También puedes combinar esta estrategia con otros tutoriales, como por ejemplo en el que creamos una ventana modal como patrón sincronizado.

ejemplo-ventana-modal-muestra-bloque-reutilizable

Conclusión

En este tutorial has aprendido a identificar las IDs de los patrones sincronizados e insertarlos en el punto de las entradas que tú decidas.

¿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. 😉