¿No todos amamos WordPress? La plataforma ha disfrutado de un gran éxito desde sus inicios, y los desarrolladores agregan nuevas funciones constantemente. Una de las características más notables en los últimos tiempos es el editor de bloques de WordPress, cuyo nombre en código es Gutenberg.
Gutenberg ofrece a los usuarios de WordPress una nueva y emocionante forma de publicar contenido y personalizar su sitio. Es increíblemente fácil de usar, lo cual es una gran noticia tanto para principiantes como para desarrolladores. Si está utilizando la última versión de WordPress, ya conoce el editor de bloques y el concepto de bloques.
De forma predeterminada, el editor de bloques de WordPress viene con algunos bloques que le permiten incluir texto, imágenes, citas, audio, videos, incrustaciones, etc. Además de eso, hay un montón de complementos de Gutenberg que le permiten ampliar el editor sin sudar.
Aún así, es posible que tenga una necesidad específica que lo impulse a crear sus propios bloques personalizados. Aquí es donde entra la publicación de hoy. En un par de párrafos, aprenderá exactamente cómo crear bloques de Gutenberg personalizados para satisfacer sus necesidades específicas.
Sin más preámbulos comencemos ya que hay mucho que aprender.
¿Qué son los bloques, de todos modos?
Si eres el principiante perfecto, probablemente te estés preguntando de qué se trata este asunto de Gutenberg. Lo sé, estaba bastante confundido cuando Gutenberg Fue presentado. Pero nadie tiene la culpa, todos estábamos acostumbrados a la Editor clásico que hacer el cambio fue incómodo al principio.
Aún así, el editor de bloques de WordPress está aquí para quedarse, nos guste o no. Es precisamente por eso que debe aprender todo lo que pueda sobre Gutenberg (y todo lo que conlleva) para aprovecharlo al máximo.
Los bloques tratan los párrafos, encabezados, medios e incrustaciones como componentes que, cuando se unen, forman el contenido almacenado en la base de datos de WordPress, reemplazando el concepto tradicional de texto de forma libre con medios incrustados y códigos abreviados. – Manual del editor de bloques
En el pasado, los usuarios de WordPress confiaban en texto de forma libre y códigos abreviados para agregar contenido. usos de Gutenberg bloques. El nuevo editor le permite usar unidades de bloques para crear diseños ricos y flexibles que son fáciles de administrar. Actualmente, puede usar el editor de bloques para publicaciones y páginas, pero hay planes activos para admitir edición completa del sitio en el futuro.
Trabajar con bloques hace que la creación de contenido en WordPress sea bastante refrescante. Además, muchos complementos existentes son compatibles con el nuevo editor y vienen con bloques listos para usar que facilitan la adición de contenido de dichos complementos. El editor le permite arrastrar y soltar bloques en una página para que pueda presionar el botón de publicación más rápido.
Al igual que un creador de páginas integrado directamente en WordPress.
Si está familiarizado con los creadores de páginas visuales como Elementor, probablemente esté familiarizado con el concepto de creación de páginas de arrastrar y soltar. Gutenberg es un intento de incorporar completamente la construcción de sitios de arrastrar y soltar en el núcleo de WordPress. No dude en consultar nuestra Guía paso a paso de Gutenberg Builder para WordPress para obtener más información.
Con eso fuera del camino, pasemos a la mejor parte de la publicación de hoy. Aprendamos cómo crear un bloque simple. Puedes hacerlo manualmente o usando complementos como Bloques personalizados de Génesis (anteriormente BlockLab), Bloques perezosos, o FCA. Crear bloques personalizados es un poco técnico, así que para los fines de la publicación de hoy, usaremos un complemento.
Cómo crear un bloque personalizado (usando bloques personalizados de Génesis)
Seguir la ruta de los complementos es más fácil, ya que la creación de bloques personalizados de Gutenberg desde cero requiere una buena comprensión de HTML, CSS, PHP y, lo que es más importante, JavaScript. También deberá comprender React, que lanza una bola curva a los principiantes.
Para la siguiente sección, utilizaremos los bloques personalizados de Génesis, que le ofrecen StudioPress y WPEngine, entre otros desarrolladores. La versión gratuita de Genesis Custom Blocks está disponible en el repositorio oficial de WordPress, lo que significa que podemos instalarla dentro del panel de administración de WordPress.
Instalar bloques personalizados de Génesis
Inicie sesión en su panel de administración de WordPress y navegue hasta Complementos > Agregar nuevo, Como se muestra abajo.
A continuación, ingrese «Genesis Custom Blocks» en el cuadro de búsqueda de palabras clave y presione el botón Instalar ahora botón:
Después, Activar el complemento para que comience la fiesta.
Lo estás haciendo muy bien 🙂
A continuación, vamos a crear un nuevo bloque personalizado. Con fines ilustrativos, creemos una llamada a la acción (CTA) personalizada que agregaremos al final de cada publicación que publiquemos. La mejor parte es que puede reutilizar bloques para ahorrarse la molestia de crear los mismos bloques una y otra vez.
Desde el menú de administración de WordPress, navegue hasta Bloques personalizados > Agregar nuevo, como destacamos a continuación.
Hacerlo te llevará a la siguiente página donde encontrarás todas las opciones para crear nuestro bloque personalizado (en nuestro caso, un CTA):
Aquí hay algunas palabras para explicar lo que ve en la captura de pantalla anterior. A partir de la parte superior, usted tiene.
Área de edición principal:
- Constructor – Probablemente pasarás mucho tiempo aquí diseñando tu bloque personalizado. El Constructor le permite agregar un título, campos, slug, palabras clave, categoría y obtener una vista previa de su bloque personalizado. Aprenderá a agregar campos.
- Editor de plantillas – Después de diseñar su bloque personalizado (es decir, agregar varios campos), deberá crear una plantilla de bloque (leer, agregar un poco de código) en el Editor de plantillas. Aprenderemos más cuando diseñemos el CTA.
- Vista previa del editor – Esto le permite obtener una vista previa del bloque personalizado dentro del editor de bloques de WordPress.
- Vista previa de front-end – Aquí, puede obtener una vista previa de cómo se ve el bloque personalizado en su sitio.
- Campos del editor – Mostrará los campos en el área de edición principal de una publicación o página (ya sabe, tal como ve sus publicaciones regulares dentro del editor de WordPress)
- Campos de inspección – Mostrará el campo en la barra lateral derecha debajo del inspector de bloques.
Opciones de la barra lateral
- Babosa – El slug se autocompleta según el título que le des a tu bloque personalizado. Es importante al crear la plantilla de bloque.
- Icono – Esta opción le permite agregar un icono a su bloque personalizado.
- Categoría – Esto le permite asignar una categoría a su bloque personalizado. Puede categorizar su bloque personalizado usando una de las categorías integradas, o puede crear una categoría completamente nueva.
- Palabras clave – Agregue un máximo de tres palabras clave relacionadas con su bloque personalizado para que las personas puedan encontrarlo fácilmente en el selector de bloques.
- Abrir campos de bloque en un modal en lugar de renderizar en su lugar – Actívelo si desea abrir campos en un modal. Es útil si tiene un bloque personalizado con muchos campos.
- Tipos de publicaciones – Marque la(s) casilla(s) para permitir que su bloque personalizado se muestre en cada tipo de publicación. Por ejemplo, si desmarca Publicaciones, el bloqueo no aparecerá en ninguna publicación.
Creación de un bloque personalizado
Ahora que tiene una mejor comprensión de la interfaz de usuario y de lo que hace cada parte, arremanguémonos y manos a la obra.
En el Constructor, asigne a su bloque personalizado un título adecuado. Voy con CTA para este, como se muestra a continuación.
Antes de agregar nuevos campos, agreguemos un ícono, palabras clave y elija una categoría para el bloque personalizado, como se muestra a continuación.
Ese conjunto, vamos a agregar algunos campos a nuestro bloque personalizado. Para nuestro bloque CTA de ejemplo, agregaremos solo tres campos en el siguiente orden: una imagen, algo de texto y un campo de archivo que permite a las personas descargar un libro electrónico imaginario 🙂
Adición de campos de bloque
Sobre el Campos del editor sección, haga clic en el más (+) para agregar el primer campo, como se muestra a continuación.
A continuación, agreguemos un campo de imagen. En la barra lateral, configure el Tipo de campo a Imagen y definir las otras opciones. Además, tome nota de la babosa (configuré la mía en campo de imagen) porque lo usaremos al crear la plantilla de bloque. Vea la imagen a continuación.
Después de eso, agregue los campos de texto y archivo de manera similar.
No celebres todavía, queda un paso por recorrer. Cambiar a la Editor de plantillas > Marcado:
Aquí, diseñaremos cómo se ve su bloque personalizado en su sitio. El Editor de plantillas acepta HTML, CSS y los slugs de campo (que debe encerrar entre 2 corchetes). Si necesita usar PHP, puede crear la plantilla usando el Método de plantillas PHP en lugar de.
No te preocupes, es fácil.
Dentro de Editor de plantillas, bajo la Margen pestaña (vea la imagen de arriba), agregue la siguiente pieza de marcado HTML (código):
<div class="cta-block"> <div class="cta-image"> <img src ="https://www.wpexplorer.com/create-block-plugin/{{image-field}}"> </div> <div class="text-upload"> <h2>{{text-field}}</h2> <a href="{{file-field}}"> <button type="button" class="dwnld">Download</button></a> </div> </div>
A medida que escribe su marcado HTML, notará que el Editor de plantillas autocompleta los slugs de campo (por ejemplo, {{image-field}} ) por ti 🙂
A continuación, vaya a la CSS sección para agregar algunos estilos simples.
Puede agregar los estilos que desee, pero esto es con lo que estoy trabajando:
.cta-block { text-align:center; background-color:orange; width:100%; height:auto; border: 2px solid orange; } .dwnld { background-color: black; border: 2px solid black; color: green; padding: 5px 10px; text-align: center; display: inline-block; font-size: 20px; margin: 10px 30px; cursor: pointer; border-radius:2px; }
¡Y ya está todo listo! Hacer clic Publicar:
Para ver su nuevo bloque personalizado en acción, regrese a su panel de administración de WordPress y navegue hasta Publicaciones > Agregar nuevo (También funciona con páginas):
Cree una publicación como lo hace normalmente, haga clic en el más (+) para agregar un nuevo bloque y elegir su nuevo bloque personalizado brillante, como se destaca a continuación.
A continuación, complete su bloque personalizado como desee y publique su publicación:
Ahora, si reviso mi nuevo bloque CTA personalizado en el front-end, veo esto:
¡Mi CTA personalizado está justo ahí! No se preocupe por mis capacidades de diseño; por supuesto, en un escenario de la vida real, querrá dedicar más tiempo a diseñar su bloque. Pero espero que hayas aprendido algo aquí hoy.
Crear bloques personalizados no tiene por qué ser una tarea desafiante con herramientas como Genesis Custom Blocks y Lazy Blocks, entre otras. Eso, además, puede hacer que sus bloques personalizados sean complejos o simples según sus necesidades. Si debe crear bloques personalizados manualmente, tome algunas lecciones de JavaScript. Te ayudará 🙂
¿Alguna idea o pregunta? Por favor háznoslo saber en los comentarios más abajo.