Cada vez que armas una sección bonita en una entrada (un recuadro con un botón, una fila de tres columnas con íconos, una caja de «suscríbete»), la próxima vez tienes que hacerla otra vez. Los patrones resuelven eso: guardas el diseño una vez y lo insertas cuando quieras.
Insertar un patrón
- En el editor, abre el insertador (el botón
+de arriba a la izquierda). - Ve a la pestaña Patrones.
- Elige una categoría (Llamadas a la acción, Cabeceras, Galerías…) y haz clic en el patrón.
Se insertan los bloques y puedes cambiar textos, imágenes y colores como en cualquier contenido. Los patrones que veas dependen de tu tema: los temas de bloques modernos traen decenas.
Crear tu propio patrón
- Arma la sección en una entrada: por ejemplo, un grupo con fondo de color, un título, un párrafo y un botón.
- Selecciona el bloque exterior (el grupo). Si son varios bloques sueltos, selecciónalos todos.
- En la barra de herramientas del bloque, abre el menú de tres puntos y elige Crear patrón.
- Ponle un nombre y elige si será sincronizado o no.
Lo encontrarás en el insertador, en Patrones → Mis patrones, y en Apariencia → Editor → Patrones (o en Patrones del menú de administración, según tu tema).
Sincronizado o no sincronizado
Esta es la decisión importante:
- No sincronizado: es una plantilla de partida. Lo insertas y luego lo cambias libremente; cada copia es independiente. Ideal para secciones que se parecen pero varían: una tarjeta de producto destacado, una cita con foto.
- Sincronizado: todas las copias son la misma. Si lo editas en un lugar, cambia en todas las entradas donde aparece. Ideal para cosas que deben ser idénticas siempre: una invitación al foro, un aviso legal, un banner de campaña.
Los patrones sincronizados se llamaban antes bloques reutilizables. Si tienes bloques reutilizables antiguos, ahora aparecen como patrones sincronizados.
Patrones sincronizados con partes editables
En las versiones actuales puedes hacer que algunas partes de un patrón sincronizado se puedan cambiar en cada copia, mientras el diseño se mantiene igual en todas. Por ejemplo, un recuadro de «Producto recomendado» con el mismo diseño, pero con el título y el enlace distintos en cada entrada. Para eso, al editar el patrón, selecciona el bloque que quieres liberar y activa en la barra lateral, en Avanzado, la opción para permitir cambios (overrides) en cada instancia.
Cuidado con las imágenes
Si tu patrón incluye imágenes, se guardan con su URL. Si después borras esa imagen de la biblioteca, el patrón mostrará una imagen rota en todas las entradas donde lo usaste (sincronizado) o en las nuevas copias (no sincronizado).
Para desarrolladores: patrones dentro del tema
Si haces temas, puedes incluir patrones como archivos PHP en la carpeta patterns/ del tema. WordPress los registra solos a partir de la cabecera. Un ejemplo, patterns/invitacion-foro.php:
<?php
/**
* Title: Invitación al foro
* Slug: cwp-tema/invitacion-foro
* Categories: call-to-action
* Keywords: foro, comunidad
*/
?>
<!-- wp:group {"className":"cwp-foro","layout":{"type":"constrained"}} -->
<div class="wp-block-group cwp-foro">
<!-- wp:paragraph -->
<p><strong><?php echo esc_html__( '¿Te quedó alguna duda?', 'cwp-tema' ); ?></strong> <?php echo esc_html__( 'Pregunta en el foro de la comunidad.', 'cwp-tema' ); ?></p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->La forma más fácil de obtener el HTML de bloques es diseñar la sección en el editor, cambiar a Editor de código (Ctrl + Shift + Alt + M) y copiarlo.
Si copias el HTML de un diseño con colores y espaciados, los bloques guardan esos estilos en su código, y cualquier diferencia entre el comentario del bloque y el HTML hace que el editor muestre el aviso «Este bloque contiene contenido inesperado». Por eso, en patrones de tema, es más seguro usar una clase CSS (como cwp-foro) y darle el estilo desde la hoja de estilos del tema.
¿Qué patrón usas más en tu sitio? Compártelo en el foro; algunos de los mejores salen de la comunidad.
