{"id":120656,"date":"2022-04-01T17:22:59","date_gmt":"2022-04-01T11:52:59","guid":{"rendered":"https:\/\/git-staging.wpastra.com\/?p=120656"},"modified":"2023-12-28T16:08:57","modified_gmt":"2023-12-28T10:38:57","slug":"register-block-patterns-in-wordpress","status":"publish","type":"post","link":"https:\/\/git-staging.wpastra.com\/es\/guides-and-tutorials\/register-block-patterns-in-wordpress\/","title":{"rendered":"C\u00f3mo crear y registrar patrones de bloques en WordPress"},"content":{"rendered":"
<\/div>\n

El editor de bloques de WordPress, tambi\u00e9n conocido como Gutenberg<\/a>, se lanz\u00f3 all\u00e1 por 2018. Las nuevas funciones a\u00f1adidas a esta revolucionaria actualizaci\u00f3n facilitaron m\u00e1s que nunca la creaci\u00f3n de p\u00e1ginas web din\u00e1micas con el m\u00ednimo esfuerzo.<\/p>\n\n\n\n

Desde su lanzamiento, se han a\u00f1adido muchas funciones nuevas a Gutenberg para permitir una personalizaci\u00f3n a\u00fan mayor.<\/p>\n\n\n\n

\"Gutenberg<\/figure>\n\n\n\n

Con la versi\u00f3n 5.5, WordPress a\u00f1adi\u00f3 el uso de colecciones de bloques curadas llamadas Patrones de bloques Gutenberg<\/strong>.<\/p>\n\n\n\n

En este art\u00edculo hablaremos de los patrones de bloques, en qu\u00e9 se diferencian de los bloques normales y c\u00f3mo registrar bloques personalizados.<\/p>\n\n\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tTabla de contenidos\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
  1. \u00bfQu\u00e9 son los bloques Gutenberg?<\/a>
  2. \u00bfPor qu\u00e9 son tan \u00fatiles los patrones de bloques Gutenberg?<\/a>
  3. \u00bfSon los patrones de bloques mejores que los constructores de p\u00e1ginas?<\/a>
  4. \u00bfQu\u00e9 significa registrar un patr\u00f3n de bloques?<\/a>
  5. C\u00f3mo registrar un patr\u00f3n de bloques<\/a>
  6. Preguntas frecuentes sobre el patr\u00f3n de bloques Gutenberg<\/a>
  7. Cree hoy mismo su patr\u00f3n de bloques<\/a><\/ol>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\n\n\n

    \u00bfQu\u00e9 son los bloques Gutenberg?<\/h2>\n\n\n\n

    Patrones de bloques Gutenberg<\/a> son dise\u00f1os predefinidos que se construyen a partir de m\u00faltiples bloques de Gutenberg. Son similares a los bloques normales, ya que puedes editarlos una vez insertados, igual que los bloques normales.<\/p>\n\n\n\n

    Sin embargo, hay una diferencia significativa entre los patrones de bloques y los bloques reutilizables est\u00e1ndar en Gutenberg.<\/p>\n\n\n\n

    Cuando a\u00f1ades un bloque reutilizable, permanece igual en todo el sitio web. Si utilizas el mismo bloque en otras p\u00e1ginas e intentas cambiarlo, se alterar\u00e1n los bloques en todo el sitio.<\/p>\n\n\n\n

    Con los patrones de bloques, puede cambiar el dise\u00f1o y la funcionalidad con un dise\u00f1o coherente sin afectar a ning\u00fan otro bloque.<\/p>\n\n\n\n

    \u00bfPor qu\u00e9 son tan \u00fatiles los patrones de bloques Gutenberg?<\/h2>\n\n\n\n

    Los dise\u00f1os de bloques te ayudan a crear p\u00e1ginas bonitas y los patrones de bloques hacen lo mismo. Los patrones de bloques te permiten personalizar cada instancia del dise\u00f1o utilizado.<\/p>\n\n\n\n

    As\u00ed podr\u00e1 crear p\u00e1ginas m\u00e1s atractivas, m\u00e1s r\u00e1pidamente.<\/p>\n\n\n\n

    Un lienzo en blanco puede suponer un reto. Pero con los patrones de bloques, resulta mucho m\u00e1s f\u00e1cil.<\/p>\n\n\n\n

    Puedes coger el patr\u00f3n que quieras de la p\u00e1gina de WordPress Directorio de patrones de bloques<\/a> y util\u00edcelo en su sitio web.<\/p>\n\n\n\n

    \"block<\/figure>\n\n\n\n

    Esto le ahorrar\u00e1 mucho tiempo y esfuerzo a la hora de dise\u00f1arlo todo desde cero.<\/p>\n\n\n\n

    \u00bfSon los patrones de bloques mejores que los constructores de p\u00e1ginas?<\/h2>\n\n\n\n

    Crear un sitio web no consiste s\u00f3lo en darle un aspecto atractivo. Tambi\u00e9n hay que tener en cuenta el rendimiento del sitio web, los dise\u00f1os, los dise\u00f1os predise\u00f1ados y otros elementos.<\/p>\n\n\n\n

    Estos son algunos de los fundamentos en los que comparamos los patrones de bloques de Gutenberg con otros constructores de p\u00e1ginas.<\/p>\n\n\n\n

    <\/a>Rendimiento del sitio web<\/h3>\n\n\n\n

    Si buscas un rendimiento \u00f3ptimo, los patrones de bloques de Gutenberg est\u00e1n muy por delante de los constructores de p\u00e1ginas. Esta es la mayor ventaja de usar Gutenberg sobre cualquier constructor de p\u00e1ginas<\/a>.<\/p>\n\n\n\n

    Los creadores de p\u00e1ginas ofrecen muchas funciones que ayudan a crear p\u00e1ginas atractivas. Sin embargo, estas funciones suelen conllevar una sobrecarga que puede ralentizar el rendimiento de la p\u00e1gina.<\/p>\n\n\n\n

    Un sitio web r\u00e1pido ayuda a optimizaci\u00f3n de motores de b\u00fasqueda<\/a> y ayuda a mejorar la experiencia del usuario. A la gente no le gustan los sitios web lentos, as\u00ed que cuanto m\u00e1s r\u00e1pido, mejor.<\/p>\n\n\n\n

    Est\u00e1 demostrado que Gutenberg es m\u00e1s r\u00e1pido que otros constructores de p\u00e1ginas porque forma parte de WordPress, por eso nos gusta tanto.<\/p>\n\n\n\n

    <\/a>Salud y seguridad en las obras<\/h3>\n\n\n\n

    En cuanto a la salud y seguridad del sitio, los patrones de bloques de Gutenberg son mucho m\u00e1s fiables que los constructores de p\u00e1ginas. Esto se debe a que los bloques forman parte de WordPress y est\u00e1n dise\u00f1ados para funcionar a la perfecci\u00f3n con WordPress.<\/p>\n\n\n\n

    Eso no quiere decir que los creadores de p\u00e1ginas sean malos, s\u00f3lo que est\u00e1n atornillados a WordPress en lugar de ser parte de \u00e9l. Es l\u00f3gico que tengan puntos d\u00e9biles.<\/p>\n\n\n\n

    <\/a>Plantillas y dise\u00f1os<\/h3>\n\n\n\n

    Gutenberg tiene un mont\u00f3n de patrones de bloques que puede utilizar en su sitio web. Se trata de bloques prefabricados que te ayudan a dise\u00f1ar tu sitio web de forma eficiente.<\/p>\n\n\n\n

    Cuando comparamos page builders como Divi, Elementor, o Beaver Builder, estos vienen con sitios web completos con todo lo que necesitas, ya dise\u00f1ados y listos para usar.<\/p>\n\n\n\n

    As\u00ed que tienen las de ganar.<\/p>\n\n\n\n

    Ni los constructores de p\u00e1ginas ni los patrones de bloques necesitan ning\u00fan tipo de codificaci\u00f3n. Sin embargo, los patrones de bloques no tienen la funcionalidad de arrastrar y soltar que suele verse en los constructores de p\u00e1ginas.<\/p>\n\n\n\n

    <\/a>Coste<\/h3>\n\n\n\n

    Este es uno grande.<\/p>\n\n\n\n

    Gutenberg viene incluido con WordPress y es totalmente gratuito. Puedes comprar complementos premium, pero son completamente opcionales.<\/p>\n\n\n\n

    Los creadores de p\u00e1ginas tienen versiones gratuitas, que son suficientes para empezar. Si quieres ir m\u00e1s all\u00e1, tendr\u00e1s que pagar.<\/p>\n\n\n\n

    La mayor\u00eda de los creadores de p\u00e1ginas premium tienen cuotas de licencia anuales que pueden costar cientos de d\u00f3lares cada a\u00f1o. Puedes perderte actualizaciones importantes si te saltas un pago.<\/p>\n\n\n\n

    \u00bfQu\u00e9 significa registrar un patr\u00f3n de bloques?<\/h2>\n\n\n\n

    Como ya hemos comentado, WordPress tiene su propio repositorio de patrones de bloques. Puedes utilizar patrones de este repositorio y usarlos en tu sitio web arrastr\u00e1ndolos y solt\u00e1ndolos en su lugar.<\/p>\n\n\n\n

    Pero, \u00bfy si creas tu propio patr\u00f3n?<\/p>\n\n\n\n

    En este tutorial, utilizaremos el tema Astra. Astra es totalmente Compatible con Gutenberg<\/a> y es el m\u00e1s adecuado para este fin.<\/p>\n\n\n\n

    No te preocupes si no utilizas Astra, ya que este m\u00e9todo funciona con casi todos los temas.<\/p>\n\n\n\n

    C\u00f3mo registrar un patr\u00f3n de bloques<\/h2>\n\n\n\n

    Aqu\u00ed tiene una gu\u00eda paso a paso para registrar un patr\u00f3n de bloques.<\/p>\n\n\n\n

    <\/a>Paso 1: Instalar el plugin Custom Block Patterns<\/h3>\n\n\n\n

    Instale y active el Plugin de patrones de bloques personalizados<\/a> por LOOS.<\/p>\n\n\n\n

    \"custom<\/figure>\n\n\n\n

    El plugin Custom Block Patterns te ayuda a crear tu propio patr\u00f3n, como t\u00fa quieras.<\/p>\n\n\n\n

    Normalmente tendr\u00edas que crear un patr\u00f3n y luego a\u00f1adir la funci\u00f3n register_block_pattern() para que el patr\u00f3n de bloque se active.<\/p>\n\n\n\n

    Con este plugin, puedes evitar todo ese c\u00f3digo y crear tus propios patrones directamente en el editor de bloques de WordPress.<\/p>\n\n\n\n

    <\/a>Paso 2: Crear el patr\u00f3n del bloque<\/h3>\n\n\n\n

    Tambi\u00e9n puedes utilizar los dise\u00f1os preexistentes y personalizarlos para crear los tuyos propios.<\/p>\n\n\n\n

    A continuaci\u00f3n te explicamos c\u00f3mo crear tu propio patr\u00f3n de bloques:<\/p>\n\n\n\n

    Vaya al panel de control de WordPress y seleccione Patrones de bloques > A\u00f1adir nuevo.<\/strong><\/p>\n\n\n\n

    \"add<\/figure>\n\n\n\n

    Haga clic en el bot\u00f3n \"+\" <\/strong>para encontrar los bloques que necesitas a\u00f1adir. Tambi\u00e9n puedes explorar todos los bloques y dise\u00f1os predise\u00f1ados.<\/p>\n\n\n\n

    \"Create<\/figure>\n\n\n\n

    Arrastre el dise\u00f1o que desee al editor.<\/p>\n\n\n\n

    \"import<\/figure>\n\n\n\n

    <\/a>Paso 3: Personalizar el dise\u00f1o<\/h3>\n\n\n\n

    Personaliza el dise\u00f1o seg\u00fan tus necesidades. Esta parte depende totalmente de tu creatividad.<\/p>\n\n\n\n

    Puedes a\u00f1adir un bot\u00f3n, o texto, o tal vez cambiar el color y la imagen de fondo. Usted decide.<\/p>\n\n\n\n

    Publique el patr\u00f3n que ha creado haciendo clic en el bot\u00f3n \"Publique<\/strong>\".<\/p>\n\n\n\n

    \"publish<\/figure>\n\n\n\n

    Ahora su patr\u00f3n de bloques est\u00e1 listo para ser utilizado.<\/p>\n\n\n\n

    <\/a>Paso 4: Utiliza el patr\u00f3n en otras entradas y p\u00e1ginas<\/h3>\n\n\n\n

    Ahora que el patr\u00f3n est\u00e1 creado, puedes empezar a utilizarlo de diferentes maneras. Puedes a\u00f1adirlo a una p\u00e1gina o post.<\/p>\n\n\n\n

    Cuando se dise\u00f1an de una forma determinada, los patrones tambi\u00e9n pueden utilizarse en las barras laterales.<\/p>\n\n\n\n

    Ahora, utilicemos este patr\u00f3n en otros lugares:<\/p>\n\n\n\n

    1. Vaya a Cuadro de mandos <\/strong>>P\u00e1ginas <\/strong>> P\u00e1gina nueva.<\/strong><\/li>
    2. Haga clic en el bot\u00f3n \"+\" <\/strong>para encontrar los bloques que necesitas a\u00f1adir. Tambi\u00e9n puedes explorar todos los bloques y dise\u00f1os predise\u00f1ados.<\/li>
    3. Haga clic en el men\u00fa desplegable de \"Patrones<\/strong>\".<\/li>
    4. Haga clic en el bot\u00f3n \"Patrones de bloques personalizados\" <\/strong>para encontrar los patrones de bloques que ha creado.<\/li><\/ol>\n\n\n\n
      \"how<\/figure>\n\n\n\n

      Arrastre el patr\u00f3n de bloques que desee y su\u00e9ltelo en la p\u00e1gina.<\/p>\n\n\n\n

      \"add<\/figure>\n\n\n\n

      Preguntas frecuentes sobre el patr\u00f3n de bloques Gutenberg<\/h2>\n\n\n\n

      <\/a>\u00bfQu\u00e9 es el patr\u00f3n Gutenberg?<\/h3>\n\n\n\n

      Los patrones de bloques de Gutenberg son dise\u00f1os prefabricados formados por bloques de Gutenberg normales. Act\u00faan como bloques normales, pero pueden ser exclusivos de una p\u00e1gina o entrada determinada, a diferencia de los bloques normales.<\/p>\n\n\n\n

      El dise\u00f1o estandarizado facilita la creaci\u00f3n de una p\u00e1gina m\u00e1s atractiva con menos esfuerzo, tiempo y energ\u00eda que si tuviera que dise\u00f1ar cada cosa usted mismo.<\/p>\n\n\n\n

      <\/a>\u00bfC\u00f3mo personalizo los bloques de Gutenberg?<\/h3>\n\n\n\n

      Una vez abierta una p\u00e1gina, puedes a\u00f1adir bloques en ella y empezar a personalizarla.<\/p>\n\n\n\n