¿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 viene con varios bloques útiles que puede usar al escribir contenido. Muchos plugins 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, ha venido al lugar correcto.
En este tutorial paso a paso, le mostraremos la forma más 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: empieza
Lo primero que debe hacer es instalar y activar el archivo. Laboratorio de bloques conectar.
Es un plugin de WordPress que le permite crear bloques personalizados desde su panel de administración sin demasiados problemas.
Para instalar el plugin, puede seguir nuestra guía para principiantes sobre cómo instalar un plugin de WordPress.
Una vez que se activa el plugin, 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, ve a Block Lab »Agregar nuevo desde la barra lateral izquierda del panel de administración.
En esta página, debes darle un nombre a tu 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 del bloque, por lo que no es necesario que lo cambie. Sin embargo, puede escribir hasta 3 palabras clave en el campo de texto Palabras clave, por lo que su bloque se puede 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 personalizados: 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 + 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. Llamamos a nuestro primer campamento como Reviewer Image.
- Nombre del campo: El nombre del campo se generará automáticamente según 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 seleccionaremos Imagen en el menú desplegable.
- Ubicación del campo: Puede decidir si 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 propio uso.
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.
Puede hacer clic en el archivo Cerrar campo una vez que haya terminado con el campo de imagen.
Siguiendo el proceso anterior, agreguemos 2 campos más a nuestro bloque de testimonios haciendo clic en + 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.
Cuando termine, haga clic en el archivo Publicar en el lado derecho de la página para guardar su bloque Gutenberg personalizado.
Paso 3: crea un patrón de bloque
Aunque creó su 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 plugin cómo mostrar los campos de bloque dentro del editor. El plugin buscará el archivo de plantilla y lo usará para mostrar el contenido del bloque.
Si no tiene este archivo, recibirá un mensaje de error que dice «No se encontró el archivo de plantilla blocks / block-testimonials.php».
Creemos el archivo modelo de nuestro bloque.
Primero, crea una carpeta en tu escritorio y dale un nombre bloques. Creará su archivo de plantilla de bloque dentro de esta carpeta y luego lo cargará en el directorio actual del tema 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:
<?php block_field( 'add-your-field-name-here' ); ?>
Solo recuerda reemplazar agregue-su-nombre-de-campo-aquí con el nombre del campo.
Por ejemplo, nuestro primer nombre de 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í? Hacemos 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 con fines de estilo.
Por ejemplo, puede incluir 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 clase a sus etiquetas HTML y envolver su código dentro de un contenedor div para diseñar el contenido del bloque (lo que haremos en el siguiente paso).
Así que aquí está nuestro código final para nuestro patrón 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 archivo bloques carpeta.
Paso 4: crea un estilo para tu bloque personalizado
¿Quieres diseñar tu propio 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%;
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 archivo bloques carpeta.
Paso 5: sube el archivo de la plantilla de bloque a la carpeta del tema
Ahora carguemos el archivo 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 a través de FTP.
Una vez conectado, vaya a la carpeta / wp-content / themes /. Desde aquí, debe abrir la carpeta del tema actual.
Ahora sube el archivo bloques carpeta, que contiene el archivo de plantilla de bloque y el archivo CSS, en el directorio de temas.
Una vez hecho esto, puede continuar con el paso final para probar su bloque personalizado.
Nota: El plugin Block Lab le permite crear bloques específicos para un tema. Si cambia su tema de WordPress, debe copiar la carpeta de bloques al 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 archivo Agregar bloque (+) y busque el bloque Testimonios. Una vez encontrado, haga clic en él para agregar el bloque personalizado al editor de su 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.
Cuando termine, puede obtener una vista previa o publicar la página para verificar si funciona bien 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.
También puede consultar nuestra guía sobre cómo crear un tema de WordPress personalizado sin escribir ningún código.
¿Te ha resultado útil??
0 / 0