¿Quieres crear un bloque de Gutenberg personalizado para tu sitio web de WordPress?
Si bien WordPress viene con muchos bloques básicos para crear contenido, es posible que necesite algo más personalizado para su sitio web.
En este artículo, le mostraremos una manera fácil de crear bloques de Gutenberg personalizados para su sitio de WordPress.
¿Por qué crear un bloque de WordPress personalizado?
WordPress viene con un editor de bloques intuitivo que le permite crear fácilmente sus publicaciones y páginas agregando contenido y elementos de diseño como bloques.
De forma predeterminada, WordPress se envía con varios bloques de uso común. Los complementos de WordPress también pueden agregar sus propios bloques que puede usar.
Sin embargo, a veces es posible que desee crear su propio bloque personalizado para hacer algo específico y no puede encontrar un complemento de bloques que funcione para usted.
En este tutorial, le mostraremos cómo crear un bloque completamente personalizado.
Nota: Este artículo es para usuarios intermedios. Deberá estar familiarizado con HTML y CSS para crear bloques de Gutenberg personalizados.
Paso 1: comience con su primer bloque personalizado
En primer lugar, debe instalar y activar el Bloques personalizados de Génesis enchufar. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.
Creado por la gente detrás del popular Genesis Theme Framework y StudioPress, este complemento brinda a los desarrolladores herramientas fáciles para crear rápidamente bloques personalizados para sus proyectos.
Por el bien de este tutorial, construiremos un bloque de ‘testimonios’.
Primero, dirígete a Bloques personalizados » Agregar nuevo página desde la barra lateral izquierda de su panel de administración.
Esto lo llevará a la página del Editor de bloques.
Desde aquí, debe dar un nombre a su bloque.
En el lado derecho de la página, encontrará las propiedades del bloque.
Aquí puede elegir un ícono para su bloque, agregar una categoría y agregar palabras clave.
El slug se completará automáticamente según el nombre de tu bloque, por lo que no tienes 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, dirección de correo electrónico, URL, color, imagen, casilla de verificación, botones de opción y mucho más.
Agregaremos 3 campos a nuestro bloque personalizado de testimonios: 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.
Clickea en el [+] Agregue 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 utilizar cualquier nombre de su elección para la etiqueta del campo. Llamemos a nuestro primer campo ‘Imagen del 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 próximo 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 del 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, pero puede ser útil para blogs de varios autores.
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.
Siguiendo el proceso anterior, agreguemos otros 2 campos para nuestro bloque de testimonios haciendo clic en el [+] Agregue campo botón.
En caso de que desee reordenar los campos, puede hacerlo arrastrándolos usando el controlador en el lado izquierdo de cada etiqueta de campo.
Para editar o eliminar un campo en particular, debe hacer clic en la etiqueta del campo y editar las opciones en la columna de la derecha.
Una vez que haya terminado, haga clic en el Publicar botón, presente en el lado derecho de la página, para guardar su bloque de Gutenberg personalizado.
Paso 2: crea una plantilla de bloque personalizada
Aunque haya creado el bloque de WordPress personalizado en el último paso, no funcionará hasta que cree una plantilla de bloque.
La plantilla de bloque determina exactamente cómo se muestra en su sitio web la información ingresada en el bloque. Puede decidir cómo se ve usando HTML y CSS, o incluso código PHP si necesita ejecutar funciones o hacer otras cosas avanzadas con los datos.
Hay dos formas de crear una plantilla de bloque. Si la salida de su bloque está en HTML/CSS, entonces puede usar el editor de plantillas incorporado.
Por otro lado, si la salida de su bloque requiere algo de PHP para ejecutarse en segundo plano, entonces deberá crear manualmente un archivo de plantilla de bloque y cargarlo en su carpeta de temas.
Método 1. Uso del Editor de plantillas incorporado
En la pantalla de edición de bloques personalizados, simplemente cambie a la pestaña Editor de plantillas e ingrese su HTML en la pestaña de marcado.
Puede escribir su HTML y usar corchetes dobles para insertar valores de campo de bloque.
Por ejemplo, usamos el siguiente código HTML para el bloque de muestra que creamos anteriormente.
<div class="testimonial-item">
<img src="{{reviewer-image}}" class="reviewer-image">
<h4 class="reviewer-name">{{reviewer-name}}</h4>
<div class="testimonial-text">{{testimonial-text}}</div>
</div>
Después de eso, cambie a la pestaña CSS para diseñar el marcado de salida de su bloque.
Aquí está el ejemplo de CSS que usamos para nuestro bloque personalizado.
.reviewer-name {
font-size:14px;
font-weight:bold;
text-transform:uppercase;
}
.reviewer-image {
float: left;
padding: 0px;
border: 5px solid #eee;
max-width: 100px;
max-height: 100px;
border-radius: 50%;
margin: 10px;
}
.testimonial-text {
font-size:14px;
}
.testimonial-item {
margin:10px;
border-bottom:1px solid #eee;
padding:10px;
}
Método 2. Carga manual de plantillas de bloques personalizados
Se recomienda este método si necesita usar PHP para interactuar con sus campos de bloque personalizados.
Básicamente, deberá cargar la plantilla del editor directamente en su tema.
Primero, debe crear una carpeta en su computadora, asígnele el nombre de su slug de nombre de bloque personalizado. Por ejemplo, nuestro bloque de demostración se llama Testimonios, por lo que crearemos una carpeta de testimonios.
A continuación, debe crear un archivo llamado block.php utilizando un editor de texto plano. Aquí es donde colocará la parte HTML/PHP de su plantilla de bloque.
Aquí está la plantilla de muestra que usamos para nuestro ejemplo.
<div class="testimonial-item <?php block_field('className'); ?>">
<img class="reviewer-image" src="<?php block_field( 'reviewer-image' ); ?>" alt="<?php block_field( 'reviewer-name' ); ?>" />
<h4 class="reviewer-name"><?php block_field( 'reviewer-name' ); ?></h4>
<div class="testimonial-text"><?php block_field( 'testimonial-text' ); ?></div>
</div>
Observe cómo usamos el block_field() función para obtener datos de un campo de bloque.
Hemos envuelto nuestros campos de bloque en el HTML que queremos usar para mostrar el bloque. También hemos agregado clases de CSS para que podamos diseñar el bloque correctamente.
No olvide guardar el archivo dentro de la carpeta que creó anteriormente.
A continuación, debe crear otro archivo utilizando el editor de texto sin formato en su computadora y guardarlo como block.css dentro de la carpeta que creaste.
Usaremos este archivo para agregar el CSS necesario para diseñar nuestra visualización de bloques. Aquí está el ejemplo de CSS que usamos para este ejemplo.
.reviewer-name {
font-size:14px;
font-weight:bold;
text-transform:uppercase;
}
.reviewer-image {
float: left;
padding: 0px;
border: 5px solid #eee;
max-width: 100px;
max-height: 100px;
border-radius: 50%;
margin: 10px;
}
.testimonial-text {
font-size:14px;
}
.testimonial-item {
margin:10px;
border-bottom:1px solid #eee;
padding:10px;
}
No olvides guardar tus cambios.
Su carpeta de plantilla de bloque ahora tendrá dos archivos de plantilla dentro.
Después de eso, debe cargar su carpeta de bloques en su sitio web utilizando un cliente FTP o la aplicación Administrador de archivos dentro del panel de control de su cuenta de alojamiento de WordPress.
Una vez conectado, navegue hasta el /wp-content/themes/your-current-theme/ carpeta.
Si su carpeta de temas no tiene bloques de nombre de carpeta, continúe y cree un nuevo directorio y asígnele un nombre blocks.
Ahora ingrese a la carpeta de bloques y cargue la carpeta que creó en su computadora a la carpeta de bloques.
¡Eso es todo! Ha creado con éxito archivos de plantilla manual para su bloque personalizado.
Paso 3. Obtenga una vista previa de su bloque personalizado
Ahora, antes de que pueda obtener una vista previa de su HTML/CSS, debe proporcionar algunos datos de prueba que se pueden usar para mostrar una salida de muestra.
Dentro del área de administración de WordPress, edite su bloque y cambie a la pestaña Vista previa del editor. Aquí, debe ingresar algunos datos ficticios.
No olvide hacer clic en el botón Actualizar para guardar los cambios antes de poder obtener una vista previa.
Ahora puede cambiar a la pestaña Vista previa del front-end para ver cómo se verá su bloque en el front-end (área pública de su sitio web de WordPress).
Si todo le parece bien, puede actualizar su bloque para guardar los cambios no guardados.
Paso 4. Usar su bloque personalizado en WordPress
Ahora puede usar su bloque personalizado en WordPress como usaría cualquier otro bloque.
Simplemente edite cualquier publicación o página en la que desee utilizar este bloque.
Haga clic en el botón Agregar nuevo bloque y busque su bloque escribiendo su nombre o palabras clave.
Después de insertar el bloque en el área de contenido, verá los campos de bloque que creó para este bloque personalizado.
Puede completar los campos de bloque según sea necesario.
A medida que se aleja del bloque a otro bloque, el editor mostrará automáticamente una vista previa en vivo de su bloque.
Ahora puede guardar su publicación y página y obtener una vista previa para ver su bloque personalizado en acción en su sitio web.
Así es como se ve el bloque de testimonios en nuestro sitio de prueba.
Esperamos que este artículo le haya ayudado a aprender cómo crear fácilmente bloques de Gutenberg personalizados para su sitio web de WordPress.
También es posible que desee ver nuestra guía sobre cómo crear un tema de WordPress personalizado desde cero, o ver nuestra selección experta de los complementos de WordPress que debe tener para su sitio web.
.