Cómo crear patrones de bloques para acelerar la creación de sitios web

Los patrones de bloque serán un gran problema para todos los usuarios de WordPress y en esta publicación, le mostraré exactamente cómo crear sus propios patrones de bloque.


add_action ('init', function () {

register_pattern ('NOMBRE', [
'title' => __ ('TÍTULO'),
'content' =>
'MODELO'
]);
});

Hace dos días, salí con un video e introduje este concepto que está llegando a la vuelta de la esquina a WordPress llamado patrones de blog. Es algo experimental en este momento, y es algo que realmente me entusiasma. Y creo que si se concentra en el potencial de los patrones de bloque, puede ver el potencial para que lo ayude a entregar sitios web más rápido si tiene clientes, para que puedan hacer más con sus sitio web.

Así que te lo voy a mostrar. Exactamente cómo crear un patrón de bloque en este video. Ahora vamos a hacer algunas cosas que son un poco tecnológicas, y sé que este es el canal de WordPress para los no expertos en tecnología, así que voy a tratar de hacerlo lo más simple posible, pero estás al final veremos cuán simple es crear uno de estos patrones de bloques.

Así que sigamos adelante y echemos un vistazo. Así que aquí está la página donde habla sobre el nuevo lanzamiento de esta función para hacerla. Capaz de que la gente promedio cree un patrón de bloque. Entonces, cuando me desplazo hacia abajo, me da el tipo de plantilla. Entonces, todo lo que está involucrado es crear algo llamado una función personalizada.

Pero no se preocupe, voy a hacer que sea muy fácil para todos, pero aquí es donde está ese pequeño fragmento de código. Ahora tendré un enlace en la descripción del video a continuación. Te llevará a mi sitio web. Recibirá instrucciones escritas sobre cómo hacer esto y también. Este pequeño fragmento de código que puedes copiar y pegar en tu propio sitio web.

Bien, esto es lo que vamos a necesitar. Esta es una nueva característica para Gutenberg y necesitará que el complemento Gutenberg esté instalado y activado, por lo que necesitará una versión mínima de 7.8 y esto es lo que salió recientemente. Ahora, lo que terminará sucediendo es tal vez en cuatro o seis meses, tal vez para fines del verano de 2020, esto se incluirá en WordPress de forma predeterminada, pero por ahora, tendrá que hacerlo, si desea probar esto , vas a necesitar instalar el complemento Gutenberg.

Lo siguiente que puede hacer, y esto es opcional, si no sabe cómo agregar una función personalizada a un tema secundario, y ya ni siquiera uso un tema secundario, es posible que desee usar este complemento gratuito, y este es uno de los mejores complementos gratuitos. Que alguna vez he encontrado, y se llama fragmentos de código. Y esto nos permitirá agregar esta función personalizada y una manera muy fácil de usar, fácil de administrar.

¿Bueno? Entonces vas a necesitar eso. Y esto es opcional. Este es un complemento gratuito llamado bloques de cadencia. Y lo que esto hace es que agrega muchas funcionalidades de creación de páginas a Gutenberg. Es bastante bueno en lo que te permite hacer. Puede arrastrar y cambiar el tamaño de las columnas. Hay muchos elementos que agregan mucha de la funcionalidad del generador de páginas, pero para Gutenberg, y es un complemento completamente gratuito.

Bueno. Ahora pasemos a mi sitio web. Así que aquí hay un sitio web. Todo está configurado en este momento. Y si no sabes cómo instalar un complemento, alguien se enojó mucho conmigo el otro día por no mostrar cómo instalar un complemento y un video. Usted va a los complementos, hace clic en agregar nuevo, y luego aquí hace una búsqueda del nombre de ese complemento, y luego hace clic.

Descargue, o lo siento, hace clic en instalar ahora y luego lo activa. Es un proceso muy simple. Así que voy a hacer clic en mis complementos instalados, y puede ver que tengo instalado Gutenberg y que esto era bloques de cadencia opcionales, y aquí hay fragmentos de código. Así que voy a seguir adelante y activar fragmentos de código y puedes ver que ahora está activado aquí.

Entonces, continúe y haga clic en fragmentos de código y verá algunos de los que vienen. Y aquí está este interruptor de palanca y está activado. Todos están desactivados y, de hecho, no es necesario que guarde estos que viene por defecto. Puede hacer clic aquí y puede eliminarlos todos, pero ya he seguido y he agregado uno aquí llamado plantilla de patrón de bloque.

Entonces, ¿qué harías? Haga clic en agregar nuevo, y puede nombrar esta plantilla de patrón de bloque en ese pequeño fragmento de código que le mostré aquí, pero le voy a dar una versión modificada de esto en mi sitio web. Simplemente va a copiar y pegar eso aquí, y luego va a hacer clic en Guardar cambios.

No vas a hacer clic en guardar y activar, vas a hacer clic para guardar los cambios y te mostraré por qué en un momento. Bueno. Entonces, ahora lo que querrás hacer es crear este patrón de bloque. Y un patrón de bloque es simplemente una sección guardada. Entonces, si usa un creador de páginas, ahora sabe que puede guardar secciones y algunas de ellas vienen con secciones prediseñadas, pero la experiencia del usuario, creo que es mucho mejor en Gutenberg.

Entonces, lo que querrá hacer es ir a las páginas. Y haga clic en agregar nuevo, y querrá nombrar esto. Um, en realidad déjame deshacerme de esta gira. Querrá nombrar este patrón de bloque, y aquí es donde crearemos este patrón de bloque. Ahora, no voy a pasar por crear un patrón de bloque en este momento.

Te mostraré el que ya he creado, y es. Aquí mismo. Así que aquí hay un patrón de bloque que creé. Podrías ver que es esta sección. Tiene este fondo colorido. Tengo un encabezado, algunos subtítulos y un par de botones aquí, y puse un video. Así que voy a hacer que este sea mi patrón de bloqueo para que pueda, con solo dos clics del mouse, agregarlo a cualquier parte de mi sitio web.

Entonces, lo que voy a hacer es hacer clic en la esquina superior derecha, hay estos tres puntos. Son un poco difíciles de ver, y cuando haces clic en eso, hay una opción aquí que dice editor de código. Entonces, querrá hacer clic en el editor de código, y luego le mostrará todo el código que está involucrado en hacer de ese blog un patrón de bloque..

¿Bueno? Así que vas a hacer clic aquí y luego vas a hacer clic en el control o comando a en tu computadora para resaltarlo todo. Y son año nuevo. Ponlo en tu portapapeles. Así que voy a hacer que controle C. así que ahora está en mi portapapeles. Así que ahora lo que voy a hacer es salir de aquí. En realidad, si quieres salir de esta vista, hay una pequeña X aquí que dice editor de código de salida, y ahora me lo mostrará de la forma en que normalmente está aquí..

Bueno. Por lo tanto, puede guardar esto como borrador si lo desea, pero no lo va a necesitar. Esto es solo para que pueda crear este patrón de bloque, y podría crear un patrón de bloque que sea cualquier cosa, y no tiene que ser un bloque de cosas. Podría ser una plantilla completa para una publicación de blog, por ejemplo. Bien, ahora voy a hacer clic donde está la w que me saca del editor de bloques.

Ahora voy a volver a los fragmentos de código. Así que aquí es donde creé esa plantilla de patrón de bloque. Voy a hacer clic en clonar, y ahora se ha creado un clon, y luego haré clic en el título para comenzar a editarlo. Entonces, para el título, voy a cambiar esto a un título que tenga sentido para administrarlo.

Entonces, para mí, solo lo voy a nombrar. Un héroe con video. Así que ahora sé qué es esto cuando estoy mirando la lista en el futuro. Bien, entonces hay un par de cosas aquí que necesitarás editar. Tres cosas. Es super simple. El primero es el nombre. Así que este puede ser cualquier nombre que vaya a ser, debe estar en minúsculas, sin espacios o caracteres originales.

Así que seguiré adelante y pondré un nombre ahora mismo. Puedes ver que lo llamé héroe con video. A continuación, aquí tienes que poner un título. Así que estamos reemplazando el título de esta palabra, y esto es lo que se mostrará. Estás viendo una lista de patrones de blog, bloque, no patrones de bloque de blog. Y si te das cuenta, puedes, este es el nombre amigable, por lo que puede tener espacios.

Uh, no pondría ningún personaje funky allí solo. Los espacios están bien. Entonces, eso es lo que se mostrará en esta lista ay luego aquí, donde dice el patrón a. Simplemente va a pegar lo que acaba de copiar en su portapapeles. Ahora quiero que tomes nota de una cosa. Para cada uno de estos. Dejé el pequeño apóstrofe en la parte delantera y trasera.

Ves que hay un apóstrofe que debe estar allí. Si lo elimina accidentalmente, vuelva a colocarlo. Bueno. Solo estamos cambiando. Solo estamos reemplazando el marcador de posición de texto. Entonces, por aquí, no quiero reemplazar todo. Solo quiero reemplazar el patrón de palabras, así que lo resaltaré y luego pegaré lo que copié.

Y ahí está. Así que ahora voy a desplazarme hacia abajo y esta vez voy a hacer clic en guardar cambios y activar. Y ahora debería decir fragmento actualizado y activado. Y cuando hago clic en todos los fragmentos, se puede ver ahora que este héroe con video está activado. Entonces, en el futuro para patrones de bloque adicionales, quiero ir a donde dice plantilla de patrón de bloque y hacer clic en clonar y hacer esa plantilla de patrón de bloque de esa manera.

De esa manera siempre tengo la plantilla allí. Ahora, si ya lo sabe y tiene su propia forma de agregar funciones personalizadas, no necesita fragmentos de código y, y todo este tipo de cosas, puede colocarlo donde desee. Esta es una forma mucho más fácil de administrarlo si me preguntas. Bien, ahora voy a ir a las páginas con mi clic en agregar nuevo, y si quieres ver el.

Patrones de bloque. Uh, aquí está el ícono. Y cuando pasas el cursor sobre él, dice patrones de bloque. Y cuando hago clic en él, ves algunos de los patrones de bloque que se están experimentando en este momento. Pero cuando te desplazas hacia abajo, verás el patrón de bloque que creé. Y lo que es realmente bueno es que genera una vista previa en miniatura.

Y lo hace dinámicamente. Tienes herramientas de creación de páginas que ni siquiera hacen esto. Uh, y hace que sea mucho más fácil administrar tus patrones de bloque. Entonces, y puedes ver aquí, dice héroe con plantilla. Ahora, si quiero usar esto en cualquier parte de mi sitio web, es un clic del mouse. Y luego ahí está. Y todo lo que tendría que hacer en ese punto para comenzar a cambiar algunos textos, cambiar los enlaces a los botones.

Puedo hacer clic aquí y puedo cambiar el video. Entonces. Así es como se crea un patrón de bloque. Ahora, esto es un gran problema, creo que porque lo que va a suceder es un tema. Desarrolladores y creadores de complementos, podrán crear estos patrones de bloque para usted, por lo que será mucho más rápido, más rápido y más fácil construir un sitio web usando la herramienta nativa de construcción de bloques que WordPress ya incluye.

No hay nada que comprar, no hay código hinchado. No hay ninguna de estas cosas, y. Lo que lo lleva aún más lejos. Puede ver lo fácil que es crear sus propios patrones de bloque, y es realmente fácil verlo en una lista. Haga clic en un botón y se pone allí. Así que ahora podrías pensar en lo fácil que puede ser crear un sitio web cuando tienes tu propia biblioteca de patrones de bloques.

Entonces, si crea sitios web para clientes y no desea utilizar un creador de páginas. Solo desea utilizar el generador de bloques incorporado. Podrías crear tu propia biblioteca de patrones. Viste lo fácil que es. Yo puedo hacerlo. Usted podría hacerlo. Uh, podrías crear tu propia biblioteca de patrones de bloques que puedes mover de un sitio a otro, y puedes mostrarle a tu cliente cómo pueden construir esto.

Ahora, esto no es solo para páginas, es para publicaciones, y no se limita solo a esa sección que viste. Básicamente cualquier cosa que puedas crear en una página. Puedes hacer un patrón de bloque. Entonces, si está utilizando el generador de bloques solo para publicaciones de blog, y hay ciertos elementos que desea usar una y otra vez en una publicación de blog para mejorar el diseño de las publicaciones de blog, bueno, puede crear un patrón de bloque para eso.

Y es realmente fácil. Un clic y podrás usarlo. De hecho, todas las plantillas de publicación de blog. Entonces, si hay una fórmula que siga para las secciones de una publicación de blog, puede hacer que toda la publicación de blog sea una plantilla de bloque. Ese clic se aplica y luego todo lo que tiene que hacer es apuntar, hacer clic y editar.

Entonces, lo último antes de terminar aquí, este es un concepto nuevo y es algo en lo que pensar en los próximos meses. Experimente con ahora. No es todo Yeti, Yeti. No está del todo listo para el horario de máxima audiencia porque si notaste, um, lo único negativo que vi es cuando estás mirando el blog. Mira allí voy otra vez.

Si está mirando los patrones de bloque, es solo una lista de artículos más alta en la que debe desplazarse, por lo que deben mejorar el proceso de categorización y organización. Tal vez tienen algún tipo de interfaz para que sea más visual y fácil de trabajar. Si vas a tener 50 bloques diferentes.

Patrones. Entonces solo necesitan mejorar eso. Y parte de la sintaxis en el código puede cambiar un poco. Quién sabe cuándo finalmente saldrá esto. Pero el objetivo de este video es mostrarle lo que será posible muy, muy pronto, para que pueda comenzar. Pensando cómo se puede aplicar a su flujo de trabajo y lo que está haciendo como creador de sitios web.

De todos modos, eso es todo lo que tengo para ti en esta publicación. Espero que aprecies miradas avanzadas en el futuro de WordPress como esta, y si apreciaste este video o encontraste algún valor, considera darle el visto bueno y compartir este video para que la gente pueda ver lo que viene a la vuelta de la esquina.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Adblock
    detector