Creating A Custom Wordpress Block For Gutenberg

Cómo crear un bloque Gutenberg personalizado en WordPress (método fácil)

¿Quiere crear un bloque Gutenberg personalizado para su sitio de WordPress? Después de actualizar a WordPress 5.0, debe usar bloques para crear contenido en el nuevo editor de bloques de WordPress. WordPress viene con varios bloques útiles que puede usar mientras escribe contenido. Muchos complementos de WordPress también vienen con sus propios bloques que puede usar. Sin embargo, a veces puede 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, ha venido al lugar correcto. En este tutorial paso a paso, le mostraremos la manera fácil de crear un bloque de WordPress personalizado para Gutenberg.

Notar: Este artículo está destinado a usuarios intermedios. Deberá estar familiarizado con HTML y CSS para crear bloques Gutenberg personalizados.

Paso 1: empezar

Lo primero que debe hacer es instalar y activar el complemento Block Lab. Es un complemento de WordPress que le permite crear bloques personalizados desde su panel de administración sin mucha molestia.

Complemento De Wordpress Block Lab
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 pasar al siguiente paso para crear su primer bloque personalizado.

Paso 2: crea un nuevo bloque

Para los propósitos de este tutorial, vamos a crear un bloque de “testimonios”. En primer lugar, dirígete a Block Lab »Agregar nuevo en la barra lateral izquierda de su panel de administración. En esta página, debes darle un nombre a tu bloque. Puede escribir el nombre que desee en el cuadro de texto «Introduzca aquí el nombre del bloque».
Ingrese El Nombre Del Bloque Personalizado
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 de la lista desplegable Categoría. La babosa 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.
Propiedades De Bloque Personalizadas
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 cuadro de texto para el texto del testimonio. Clickea en el + Agregar un campo para insertar el primer campo.
Opciones De Campo De Imagen
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. Llamemos a nuestro primer campo Imagen de revisor.
  • Nombre de dominio: El nombre del campo se generará automáticamente de acuerdo con 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, así que vamos a seleccionar Fotografía en el menú desplegable.
  • Ubicación de 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 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 el campo una vez que haya terminado con el campo de imagen. Siguiendo el proceso anterior, agreguemos 2 campos más para nuestro bloque de testimonios haciendo clic en el + Agregar un campo botón.
Campos De Bloque Personalizados Finales
Si desea reorganizar 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 creó 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.
Crea Una Plantilla De Bloque
El archivo de plantilla de bloque le dirá al complemento cómo mostrar sus campos de bloque en el editor. El complemento buscará el archivo de plantilla y lo usará para mostrar el contenido del bloque. Si no tiene este archivo, se mostrará un error que indica «El archivo de plantilla está bloqueando / block-testimonials.php no encontrado». Creemos el archivo de modelo para nuestro bloque. En primer lugar, cree una carpeta en su escritorio y asígnele un nombre bloques. Creará su archivo de plantilla de bloque en 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. Siempre que agregue un nuevo campo a su bloque personalizado, debe agregar el siguiente código PHP a su archivo de plantilla de bloque:

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:

Es simple, ¿no? Hagamos lo mismo para el resto de nuestros dominios:


A continuación, agregaremos etiquetas HTML al código anterior para fines de estilo. Por ejemplo, puede envolver la imagen del revisor en 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 en 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 nuestro modelo de bloques:

Finalmente, nombre el archivo block-testimonials.php y guárdelo en el bloques carpetas.

Paso 4: diseña tu bloque personalizado

¿Quieres personalizar tu bloque personalizado? Puede hacer esto 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%; margen inferior: 25px; } .testimonial-image {float: left; ancho: 25%; padding-right: 15px; } .testimonial-box {float: left; ancho: 75%; } .clearfix :: after {content: «»; aclarar ambos; pantalla: mesa; } Cuando termine, asigne un nombre al archivo block-testimonials.css y guárdelo en el bloques carpetas.

Paso 5: descargue el archivo de plantilla de bloque a la carpeta del tema

Ahora descarguemos el bloques carpeta que contiene nuestro archivo de plantilla de bloque personalizado en nuestra carpeta de temas de WordPress. Para hacer esto, 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 haya iniciado sesión, vaya a la carpeta / wp-content / themes /. Desde allí, debe abrir su carpeta de temas actual.
Ingrese A La Carpeta Del Tema Usando Ftp
Descarga ahora el bloques carpeta, que contiene el archivo de plantilla de bloque y el archivo CSS, en su directorio de temas. Una vez hecho esto, puede pasar al paso final para probar su bloque personalizado.
Notar: El complemento Block Lab le permite crear bloques específicos para un tema. Si cambia su tema de WordPress, debe 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. Puedes hacer esto yendo a Paginas » Agregar nuevo para crear una nueva página. Luego haga clic en el Agregar un 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.
Agrega Un Bloque Personalizado Al Editor De Páginas
Ahora puede agregar un testimonio en 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 bien o no. ¡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. También puede consultar nuestra guía sobre cómo crear un tema personalizado de WordPress sin escribir ningún código. Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver tutoriales en video de WordPress. También puede encontrarnos en Twitter y Facebook.

Leave a Reply