Cómo Crear Bloques de Gutenberg Personalizados en WordPress (La Manera Fácil)
¿Le gustaría crear un bloque de 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 su contenido. Muchos complementos de WordPress también vienen con sus propios bloques que puede usar.
Sin embargo, a veces es posible que desee crear sus propios bloques personalizados de Gutenberg para realizar acciones específicas.
Si está buscando una solución fácil para crear bloques de 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.
notas: Este artículo es para usuarios intermedios. Debe estar familiarizado con HTML y CSS para crear bloques de Gutenberg personalizados.
Paso 1: Empezar
Lo primero que debe hacer es instalar y activar el complemento Block Lab.
Este es un complemento de WordPress que le permite crear fácilmente bloques personalizados desde el panel de administración.
Para instalar un complemento, puede seguir nuestra guía para principiantes sobre cómo instalar un complemento de WordPress.
Después de activar el complemento, puede continuar con el siguiente paso para crear su primer bloque personalizado.
Paso 2: crea un nuevo bloque
A los efectos de este tutorial, crearemos un bloque de “recomendación”.
Primero, ve a Block Labs » Añadir nuevo Desde la barra lateral izquierda del panel de administración.
En esta página, debe nombrar su bloque. Puede ingresar cualquier nombre de su elección en el cuadro de texto “Ingrese el nombre del bloque aquí”.
Llamamos a nuestro bloque personalizado: Testimonios.
En el lado derecho de la página encontrará propiedades de bloque. Aquí puede elegir un ícono para su bloque, luego 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 ingresar hasta 3 palabras clave en el campo de texto “Palabras clave” para encontrar fácilmente su bloque.
Ahora agreguemos algunos campos a nuestro bloque. Puede agregar diferentes tipos de campos, como texto, números, correos electrónicos, URL, colores, imágenes, casillas de verificación, botones de opción y más.
Agregaremos 3 campos a nuestro bloque de recomendación 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 de la recomendación.
hacer clic + agregar campo botón para insertar el primer campo.
Esto abrirá algunas opciones para el campo. Echemos un vistazo a cada uno de ellos.
- Etiqueta de campo: Puede usar cualquier nombre que elija para la etiqueta del campo. Llamemos al primer campo Imagen del revisor.
- Nombre del campo: El nombre del campo se genera automáticamente en función de la etiqueta del campo. Usaremos este nombre de campo en el próximo paso, así que asegúrese de que sea único para cada campo.
- Tipo de campo: Aquí puede elegir el tipo de campo.Queremos que nuestro primer campo sea una imagen, así que seleccionaremos imagen del menú desplegable.
- Ubicación del sitio: 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 crea este bloque para su uso personal.
También obtiene 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ímites de caracteres.
puedes hacer clic cerrar campo Botón después de completar el campo de la imagen.
Siguiendo el proceso anterior, agreguemos 2 campos adicionales a nuestro bloque de recomendaciones haciendo clic en + agregar campo botón.
Si desea reordenar los campos, puede hacerlo arrastrándolos usando el ícono de hamburguesa a la izquierda de cada etiqueta de campo.
Para editar o eliminar un campo específico, debe pasar el cursor sobre la etiqueta del campo para ver las opciones de edición y eliminación.
Cuando haya terminado, haga clic en liberar botón, en el lado derecho de la página, para guardar su bloque de Gutenberg personalizado.
Paso 3: crea una plantilla de bloque
Aunque creó un bloque de WordPress personalizado en el último paso, no funcionará hasta que cree una plantilla de bloque llamada block-testimonials.php y la cargue en su carpeta de tema actual.
El archivo de plantilla de bloque le dirá al complemento cómo mostrar sus campos de bloque en el editor. El complemento buscará un archivo de plantilla y luego lo usará para mostrar el contenido del bloque.
Si no tiene este archivo, aparecerá el mensaje de error “No se puede encontrar el archivo de plantilla blocks/block-testimonials.php”.
Vamos a crear el archivo de plantilla para el bloque.
Primero, continúe y cree una carpeta en el escritorio y asígnele un nombre piezaCreará archivos de plantilla de bloque en esta carpeta y los subirá a su directorio actual de temas de WordPress.
Para crear un archivo de plantilla, puede utilizar un editor de texto sin formato, como el Bloc de notas.
Cada vez que se agrega un nuevo campo a un bloque personalizado, se debe agregar el siguiente código PHP al archivo de plantilla de bloque:
<?php block_field( 'add-your-field-name-here' ); ?>
solo recuerda reemplazar agregue su nombre de campo aquí con nombres de campo.
Por ejemplo, el nombre de nuestro primer campo es revisor-imagen, por lo que agregaremos la siguiente línea al archivo de plantilla:
<?php block_field( 'reviewer-image' ); ?>
Sencillo, ¿no? Hagamos lo mismo con los otros campos:
<?php block_field( 'reviewer-image' ); ?> <?php block_field( 'reviewer-name' ); ?> <?php block_field( 'testimonial-text' ); ?>
A continuación, agregaremos algunas marcas HTML al código anterior para darle estilo.
Por ejemplo, puede envolver la imagen de un revisor dentro de una etiqueta img para mostrar la imagen. De lo contrario, WordPress mostrará la URL de la imagen que no es lo que desea, ¿verdad?
También puede agregar el nombre de la clase al marcado HTML y envolver el código en un contenedor div para diseñar el contenido del bloque (lo haremos en el siguiente paso).
Así que aquí está el código final para nuestra plantilla de bloque:
<div > <div > <img src ="<?php block_field( 'reviewer-image' ); ?>"> </div> <div > <h4><?php block_field( 'reviewer-name' ); ?></h4> <p><?php block_field( 'testimonial-text' ); ?></p> </div> </div>
Finalmente, nombre el archivo block-testimonials.php y guárdelo en pieza carpeta.
Paso 4: Dale estilo a tu bloque personalizado
¿Quieres diseñar tu bloque personalizado? Puedes 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 block-testimonials.css y guárdelo en pieza carpeta.
Paso 5: Cargue el archivo de plantilla de bloque en la carpeta del tema
ahora subamos pieza Carpeta que contiene nuestros archivos de plantilla de bloque personalizados en nuestra carpeta de temas de WordPress.
Para hacer esto, debe conectarse a su sitio de WordPress usando 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 conectado, vaya a la carpeta /wp-content/themes/. Desde aquí, debe abrir la carpeta de su tema actual.
Cargar ahora pieza Carpeta que contiene archivos de plantilla de bloque y archivos CSS en su directorio de temas.
Una vez hecho esto, puede continuar con el último paso para probar su bloque personalizado.
notas: El complemento Block Lab le permite crear bloques específicos de temas. Si cambia su tema de WordPress, deberá copiar la carpeta de bloques en el nuevo directorio de temas.
Paso 6: prueba tu nuevo bloque
Es hora de probar nuestro bloque de recomendación personalizado.Puedes ir a página » añadir nuevo Crear una nueva página.
A continuación, haga clic en agregar bloque (+) icono y busque bloques de recomendación. Una vez que lo encuentre, haga clic en él para agregar el bloque personalizado al editor de páginas.
Ahora puede agregar testimonios a esta página usando bloques personalizados. Para agregar más referencias, puede insertar un nuevo bloque de referencia en cualquier momento.
Una vez hecho esto, puede obtener una vista previa o publicar la página para comprobar que funciona correctamente.
¡eso es todo! Ha creado con éxito su primer bloque personalizado de WordPress para su sitio web.
¿Sabías que puedes usar bloques reutilizables en tu editor para ahorrar tiempo? Consulte nuestra guía sobre cómo crear fácilmente bloques reutilizables en el editor de bloques de WordPress y utilícelos 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.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para videos tutoriales de WordPress.También puedes encontrarnos en Gorjeo y Facebook.
Los datos expuestos en este sitio web son de índole informativo, no necesariamente están actualizados. Esta información es una recopilación de información de internet.
