Guía para principiantes: Cómo utilizar los patrones de bloques de WordPress
¿Quieres aprender a utilizar los patrones de bloques de WordPress en tu sitio web?
Los patrones de bloques te permiten añadir rápidamente elementos de diseño de uso común a los diseños de tus entradas o páginas
En este artículo, te mostraremos cómo utilizar los patrones de bloques de WordPress y encontraremos más patrones para utilizar en tu sitio web
Estos son los temas que cubriremos en esta guía
¿Qué son los patrones de bloques de WordPress?
Los patrones de bloques de WordPress son una colección de elementos de diseño prefabricados que puedes utilizar para crear diseños de contenido personalizados más rápidamente.
WordPress viene con un editor intuitivo conocido comúnmente como el editor de bloques. Permite a los usuarios crear bonitos diseños para sus entradas y páginas utilizando bloques para elementos de contenido comunes
Sin embargo, no todos los usuarios de WordPress son diseñadores o quieren dedicar tiempo a crear diseños cada vez que necesitan crear una entrada o una página
Los patrones de bloques proporcionan una solución fácil a ese problema. Ahora WordPress viene con un montón de útiles patrones de bloques por defecto
Los temas populares de WordPress también proporcionan sus propios patrones que puedes utilizar al escribir el contenido
Estos patrones incluyen elementos como diseños multicolumna preconfigurados, patrones de medios y texto, patrones de llamada a la acción, cabeceras, botones y mucho más
Puedes encontrar aún más patrones en el sitio web de WordPress.org, e incluso puedes crear y compartir tus propios patrones
Dicho esto, echemos un vistazo a cómo utilizar fácilmente los patrones de bloques en WordPress para crear un hermoso contenido para tu sitio web
Cómo utilizar patrones de bloques en WordPress
Por defecto, WordPress viene con un montón de útiles patrones de bloques que puedes utilizar en tu sitio web. Tu tema de WordPress y algunos plugins también pueden añadir sus propios patrones
Para utilizar los patrones de bloques, tienes que editar la entrada o página de WordPress en la que quieras utilizar el patrón de bloques
En la pantalla de edición de la entrada, haz clic en el botón Añadir bloque para abrir el insertador de bloques. Desde aquí, cambia a la pestaña Patrones para ver los patrones de bloques disponibles
Puedes desplazarte hacia abajo para ver los patrones de bloques disponibles
También puedes ver patrones de bloques en diferentes categorías como destacados, botones, columnas, cabecera y más
También puedes hacer clic en el botón Explorar para ver los patrones de bloques.
Aquí puedes ver vistas previas más grandes en una ventana emergente
Una vez que encuentres un patrón que quieras probar, sólo tienes que hacer clic para insertarlo en el área de contenido de tu entrada o página
Después, sólo tienes que señalar y hacer clic en cualquier bloque dentro del patrón para editar y cambiar su contenido según tus necesidades
Seguirás teniendo todas las opciones que normalmente tienes para cada bloque. Por ejemplo, si es un bloque de portada, puedes cambiar el color de la portada o la imagen de fondo
Puedes añadir tantos patrones como necesites para tu entrada o página del blog. También puedes simplemente eliminar un patrón para quitarlo de una entrada o página como eliminarías cualquier bloque de WordPress
Utilizando patrones de bloques, puedes hacer rápidamente hermosos diseños para tus artículos y tu sitio de WordPress
En definitiva, los patrones de bloques te ayudan a ahorrar el tiempo que, de otro modo, emplearías en organizar manualmente los bloques cada vez que necesites añadir una cabecera, una galería, botones, etc
Cómo encontrar más patrones de bloques para usar en tu sitio web
Por defecto, WordPress viene con unos cuantos patrones de bloques de uso común. Los temas de WordPress también pueden añadir sus propios patrones a tu sitio web
Sin embargo, puedes encontrar muchos más patrones de bloques que los disponibles en el insertador de bloques de tu sitio web
Sólo tienes que ir a la página Directorio de patrones de WordPress para ver muchos más patrones de bloques
Aquí encontrarás muchos más patrones de bloques enviados por la comunidad de WordPress
Para utilizar uno de estos patrones de bloques, sólo tienes que llevar el ratón hasta el patrón de bloques y hacer clic en el botón Copiar
A continuación, tienes que volver a tu blog de WordPress y editar la entrada o página en la que quieres insertar este patrón de bloques
En la pantalla de edición de la entrada, simplemente haz clic con el botón derecho y selecciona Pegar en el menú del navegador o pulsa CTRL+V (Comando + V en Mac)
Cómo crear y compartir tus propios patrones de bloques
¿Quieres crear y compartir tus propios patrones de bloques en WordPress y compartirlos con el mundo?
WordPress hace que sea muy fácil crear patrones de bloques y utilizarlos en tus propios sitios web o compartirlos con todos los usuarios de WordPress del mundo.
Sólo tienes que visitar el sitio web del Directorio de Patrones de WordPress y hacer clic en el enlace "Crear nuevo patrón"
Nota: Tendrás que iniciar sesión o crear una cuenta gratuita de WordPress.org para guardar tus patrones
Una vez iniciada la sesión, llegarás a la página del editor de patrones de bloques. Es idéntico al editor de bloques predeterminado de WordPress, y puedes utilizarlo para crear tu patrón
Sólo tienes que añadir bloques para crear el diseño de tu patrón
Puedes utilizar bloques de diseño como grupo, portada, galería y otros para organizar tu diseño
También hay imágenes libres de derechos de autor que puedes utilizar en tus bloques multimedia. La biblioteca multimedia de WordPress te permitirá encontrar y utilizar fácilmente estas imágenes en tus patrones
Una vez que estés satisfecho con tu patrón de bloques, puedes guardarlo como borrador o enviarlo al directorio de patrones
Antes de enviar tu patrón de bloques al directorio de patrones, asegúrate de haber leído el bloque directrices del directorio de patrones
Puedes gestionar todos tus patrones de bloques haciendo clic en el enlace Mis patrones. Se mostrarán todos los patrones de bloques que has compartido, los borradores y los patrones que has favorecido
Si sólo quieres crear patrones de bloques para tu propio uso, puedes guardarlos como borradores. Después, sólo tienes que copiarlos y pegarlos desde la página Mis patrones a tu sitio web de WordPress
Crear manualmente patrones de bloques para WordPress
También puedes crear patrones de bloques manualmente y añadirlos a tu tema de WordPress o al plugin de fragmentos personalizados
Simplemente crea una nueva entrada o página en WordPress. En el área de contenido, utiliza bloques para crear un diseño personalizado o una colección de bloques que quieras guardar como patrón
Después, cambia al modo de editor de código y copia todo el contenido que veas en el editor de código
A continuación, abre un editor de texto plano como el Bloc de notas y pega allí ese código. Lo necesitarás en el siguiente paso
Ahora estás preparado para registrar tus bloques como patrón.
Para ello, simplemente copia y pega el siguiente código en el archivo functions.php de tu tema o en un plugin específico del sitio.
function wpb_my_block_patterns() {
register_block_pattern(
'my-plugin/my-awesome-pattern',
array(
'title' => __( 'Two column magazine layout', 'my-theme'),
'description' => _x( 'A simple magazine style two-column layout with large image and stylized text', 'my-theme' ),
'categories' => array( 'columns' ),
'content' => ' Your block content code goes here'
)
);
}
add_action( 'init', 'wpb_my_block_patterns' );
Ahora copia y pega los datos de los bloques que has copiado antes como valor del parámetro de contenido. En otras palabras, tendrás que sustituir el texto que dice "El código de contenido de tu bloque va aquí" por el código de tu bloque. Asegúrate de dejar las comillas simples que rodean el texto en su lugar.
Por último, no olvides cambiar el título y la descripción por los tuyos y guardar los cambios
Ahora puedes visitar tu sitio web y editar la entrada o la página. Ahora podrás ver tu patrón de bloques recién registrado en el insertador de bloques
Eliminar un patrón de bloques en WordPress
Puedes eliminar o anular fácilmente cualquier patrón de bloques en WordPress. Digamos que quieres eliminar el patrón de bloques que has creado en el ejemplo anterior
Todo lo que tienes que hacer es copiar y pegar el siguiente código en el archivo functions.php de tu tema o en un plugin específico del sitio.
function wpb_unregister_my_patterns() {
unregister_block_pattern( 'my-plugin/my-awesome-pattern' );
}
add_action( 'init', 'wpb_unregister_my_patterns' );
En este ejemplo, 'my-plugin/my-awesome-pattern'
es el nombre del patrón que hemos utilizado al registrarlo
Puedes utilizar este código para anular el registro de cualquier patrón de bloque creado por tu tema o por un plugin. Todo lo que necesitas saber es el nombre utilizado para registrar el patrón
Eliminar patrones del núcleo de WordPress
Los patrones del núcleo de WordPress están disponibles para todos los usuarios de WordPress. Esto significa que pueden estar sobreutilizados y puede que ni siquiera coincidan con el resto de tu tema de WordPress
Si no quieres utilizar un patrón, puedes simplemente evitar añadirlo a tu contenido. Sin embargo, si diriges un sitio de WordPress con varios autores, entonces es posible que quieras evitar que todos los usuarios utilicen estos patrones básicos
Para eliminar todos los patrones del núcleo de WordPress, tienes que añadir el siguiente código al archivo de funciones de tu tema o a un plugin específico del sitio
remove_theme_support( 'core-block-patterns' );
¿Cuál es la diferencia entre los bloques reutilizables y los patrones de bloques?
Tanto los patrones de bloques como los bloques reutilizables pretenden resolver un problema similar: proporcionar a los usuarios opciones para añadir fácilmente bloques de uso común.
Sin embargo, son bastante diferentes entre sí
Por ejemplo, los bloques reutilizables pueden editarse y guardarse directamente en el editor de entradas, pero no son tan flexibles como los patrones de bloques
Una gran diferencia es que si haces un cambio en un bloque reutilizable, éste cambia el bloque en todas las entradas o páginas en las que lo hayas utilizado.
Para más detalles, consulta nuestro tutorial sobre cómo utilizar bloques reutilizables en WordPress.
Por otro lado, si insertas un patrón y lo editas, esos cambios sólo se aplican a la entrada o página donde has añadido ese patrón
Los patrones de bloques también pueden ser registrados por tu tema de WordPress o por plugins como los de bloques. Esto permite a esos desarrolladores ofrecerte muchas más opciones de diseño para crear tus post y páginas.
Esperamos que esta guía te haya ayudado a aprender a utilizar los patrones de bloques de WordPress en tu sitio web. Quizá también quieras ver nuestra guía sobre cómo elegir el mejor software de diseño web, o nuestra selección de expertos sobre los mejores servicios de marketing por correo electrónico para pequeñas empresas.
Si te ha gustado este artículo, suscríbete a nuestro Canal de YouTube para los videotutoriales de WordPress. También puedes encontrarnos en Twitter y Facebook.
Si quieres conocer otros artículos parecidos a Guía para principiantes: Cómo utilizar los patrones de bloques de WordPress puedes visitar la categoría Guías para principiantes.
Deja un comentario
¡Más Contenido!