¿Quiere crear un bloque Gutenberg personalizado para su sitio de WordPress? Después de la actualización de WordPress 5.0, debe usar bloques para crear contenido en el nuevo editor de bloques de WordPress.
WordPress se envía con varios bloques útiles que puede usar al escribir contenido. Muchos complementos de WordPress también vienen con sus propios bloques que puede usar.
Sin embargo, a veces es posible que desee crear su propio bloque Gutenberg personalizado para hacer algo específico.
Si está buscando una solución fácil para crear bloques Gutenberg personalizados para su sitio de WordPress, entonces está en el lugar correcto.
En este tutorial paso a paso, le mostraremos la manera fácil de crear un bloque de WordPress personalizado para Gutenberg.
Nota: Este artículo es para usuarios intermedios. Deberá estar familiarizado con HTML y CSS para crear bloques Gutenberg personalizados.
Paso 1: Empiece
Lo primero que debe hacer es instalar y activar el Laboratorio de bloques enchufar.
Es un complemento de WordPress que le permite crear bloques personalizados desde su panel de administración sin mucha molestia.
Para instalar el complemento, puede seguir nuestra guía para principiantes sobre cómo instalar un complemento de WordPress.
Una vez que se activa el complemento, puede continuar con el siguiente paso para crear su primer bloque personalizado.
Paso 2: crea un nuevo bloque
Por el bien de este tutorial, crearemos un bloque de ‘testimonios’.
Primero, dirígete a Block Lab »Agregar nuevo desde la barra lateral izquierda de su panel de administración.
En esta página, debe dar un nombre a su bloque. Puede escribir cualquier nombre de su elección en el cuadro de texto “Ingrese el nombre del bloque aquí”.
Nombraremos nuestro bloque personalizado: Testimonios.
En el lado derecho de la página, encontrará las propiedades del bloque. Aquí puede elegir un icono para su bloque y seleccionar una categoría de bloque del cuadro desplegable Categoría.
El slug se completará automáticamente según el nombre de su bloque, por lo que no tiene que cambiarlo. Sin embargo, puede escribir hasta 3 palabras clave en el campo de texto Palabras clave, para que su bloque se pueda encontrar fácilmente.
Ahora agreguemos algunos campos a nuestro bloque. Puede agregar diferentes tipos de campos como texto, números, correo electrónico, URL, color, imagen, casilla de verificación, botones de radio y mucho más.
Agregaremos 3 campos a nuestro bloque de testimonios personalizado: un campo de imagen para la imagen del revisor, un cuadro de texto para el nombre del revisor y un campo de área de texto para el texto del testimonio.
Haga clic en el + Agregar campo para insertar el primer campo.
Esto abrirá algunas opciones para el campo. Echemos un vistazo a cada uno de ellos.
- Etiqueta de campo: Puede utilizar cualquier nombre de su elección para la etiqueta del campo. Nombramos nuestro primer campo como Imagen de revisor.
- Nombre del campo: El nombre del campo se generará automáticamente en función de la etiqueta del campo. Usaremos este nombre de campo en el siguiente paso, así que asegúrese de que sea único para cada campo.
- Tipo de campo: Aquí puede seleccionar el tipo de campo. Queremos que nuestro primer campo sea una imagen, por lo que seleccionaremos Imagen en el menú desplegable.
- Ubicación del campo: Puede decidir si desea agregar el campo al editor o al inspector.
- texto de ayuda: Puede agregar texto para describir el campo. Esto no es necesario si está creando este bloque para su uso personal.
También puede obtener algunas opciones adicionales según el tipo de campo que elija. Por ejemplo, si selecciona un campo de texto, obtendrá opciones adicionales como texto de marcador de posición y límite de caracteres.
Puedes hacer click en el Cerrar campo una vez que haya terminado con el campo de imagen.
Siguiendo el proceso anterior, agreguemos otros 2 campos para nuestro bloque de testimonios haciendo clic en el + Agregar campo botón.
En caso de que desee reordenar los campos, puede hacerlo arrastrándolos usando el icono de hamburguesa en el lado izquierdo de la etiqueta de cada campo.
Para editar o eliminar un campo en particular, debe pasar el mouse sobre la etiqueta del campo para obtener las opciones de edición y eliminación.
Una vez que haya terminado, haga clic en el Publicar , presente en el lado derecho de la página, para guardar su bloque Gutenberg personalizado.
Paso 3: crea una plantilla de bloque
Aunque ha creado el bloque personalizado de WordPress en el último paso, no funcionará hasta que cree una plantilla de bloque llamada block-testimonials.php y la cargue en su carpeta de temas actual.
El archivo de plantilla de bloque le dirá al complemento cómo mostrar sus campos de bloque dentro del editor. El complemento buscará el archivo de plantilla y luego lo usará para mostrar el contenido del bloque.
Si no tiene este archivo, mostrará un error que dice “No se encontró el archivo de plantilla blocks / block-testimonials.php”.
Creemos el archivo de plantilla de nuestro bloque.
Primero, cree una carpeta en su escritorio y asígnele un nombre bloques. Creará su archivo de plantilla de bloque dentro de esta carpeta y luego lo cargará en su directorio actual de temas de WordPress.
Para crear el archivo de plantilla, puede utilizar un editor de texto sin formato como el Bloc de notas.
Cada vez que agrega un nuevo campo a su bloque personalizado, debe agregar el siguiente código PHP a su archivo de plantilla de bloque:
<?php block_field( 'add-your-field-name-here' ); ?>
Solo recuerda reemplazar agregue-su-nombre-de-campo-aquí con el nombre del campo.
Por ejemplo, el nombre de nuestro primer campo es reviewer-image, por lo que agregaremos la siguiente línea al archivo de plantilla:
<?php block_field( 'reviewer-image' ); ?>
Simple, ¿no es así? Hagamos lo mismo para el resto de nuestros campos:
<?php block_field( 'reviewer-image' ); ?> <?php block_field( 'reviewer-name' ); ?> <?php block_field( 'testimonial-text' ); ?>
A continuación, agregaremos algunas etiquetas HTML al código anterior para fines de estilo.
Por ejemplo, puede envolver la imagen del revisor dentro de una etiqueta img para mostrar la imagen. De lo contrario, WordPress mostrará la URL de la imagen que no es la que desea, ¿verdad?
También puede agregar nombres de clases a sus etiquetas HTML y envolver su código dentro de un contenedor div para diseñar el contenido de su bloque (lo que haremos en el siguiente paso).
Así que aquí está nuestro código final para nuestra plantilla de bloque:
<div class="testimonial-block clearfix"> <div class="testimonial-image"> <img src ="<?php block_field( 'reviewer-image' ); ?>"> </div> <div class="testimonial-box"> <h4><?php block_field( 'reviewer-name' ); ?></h4> <p><?php block_field( 'testimonial-text' ); ?></p> </div> </div>
Finalmente, nombre el archivo como block-testimonials.php y guárdelo dentro del bloques carpeta.
Paso 4: Diseñe su bloque personalizado
¿Quieres darle estilo a tu bloque personalizado? Puedes hacerlo con la ayuda de CSS.
Abra un editor de texto sin formato como el Bloc de notas y agregue el siguiente código:
.testimonial-block {
width: 100%;
margin-bottom: 25px;
}
.testimonial-image {
float: left;
width: 25%;
padding-right: 15px;
}
.testimonial-box {
float: left;
width: 75%;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
Una vez hecho esto, nombre el archivo como block-testimonials.css y guárdelo dentro del bloques carpeta.
Paso 5: Cargue el archivo de plantilla de bloque a la carpeta de temas
Ahora carguemos el bloques carpeta que contiene nuestro archivo de plantilla de bloque personalizado a nuestra carpeta de temas de WordPress.
Para hacer eso, necesita conectarse a su sitio de WordPress utilizando un cliente FTP. Para obtener ayuda, puede consultar nuestra guía sobre cómo cargar archivos en su sitio de WordPress mediante FTP.
Una vez que esté conectado, vaya a la carpeta / wp-content / themes /. Desde aquí, debe abrir su carpeta de temas actual.
Ahora sube el bloques carpeta, que contiene el archivo de plantilla de bloque y el archivo CSS, a su directorio de temas.
Una vez hecho esto, puede continuar con el paso final para probar su bloque personalizado.
Nota: El complemento Block Lab le permite crear bloques específicos para un tema. Si cambia su tema de WordPress, entonces necesita copiar la carpeta de bloques a su nuevo directorio de temas.
Paso 6: prueba tu nuevo bloque
Es hora de probar nuestro bloque de testimonios personalizados. Puede hacer esto dirigiéndose a Paginas » Agregar nuevo para crear una nueva página.
A continuación, haga clic en el Agregar bloque (+) y busque el bloque Testimonios. Una vez que lo encuentre, haga clic en él para agregar el bloque personalizado a su editor de página.
Ahora puede agregar un testimonio a esta página usando su bloque personalizado. Para agregar más testimonios, siempre puede insertar nuevos bloques de testimonios.
Una vez que haya terminado, puede obtener una vista previa o publicar la página para comprobar si funciona correctamente o no.
¡Eso es todo! Ha creado con éxito su primer bloque de WordPress personalizado para su sitio.
¿Sabías que puedes ahorrar tiempo con bloques reutilizables en tu editor? Consulte nuestra guía sobre cómo crear fácilmente bloques reutilizables en el editor de bloques de WordPress y utilizarlos en otros sitios web.
Es posible que también desee ver nuestra guía sobre cómo crear un tema de WordPress personalizado sin escribir ningún código.
Si le gustó este artículo, suscríbase a nuestro Canal de Youtube para tutoriales en video de WordPress. También puedes encontrarnos en Gorjeo y Facebook.