[{"@context":"https:\/\/schema.org\/","@type":"BlogPosting","@id":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/como-crear-un-bloque-gutenberg-personalizado-en-wordpress-forma-facil\/#BlogPosting","mainEntityOfPage":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/como-crear-un-bloque-gutenberg-personalizado-en-wordpress-forma-facil\/","headline":"C\u00f3mo crear un bloque Gutenberg personalizado en WordPress (forma f\u00e1cil)","name":"C\u00f3mo crear un bloque Gutenberg personalizado en WordPress (forma f\u00e1cil)","description":"\u00bfQuiere crear un bloque Gutenberg personalizado para su sitio de WordPress? Despu\u00e9s de la actualizaci\u00f3n de WordPress 5.0, debe usar bloques para crear contenido en ... Leer m\u00e1s<\/a>","datePublished":"2021-06-21","dateModified":"2021-06-21","author":{"@type":"Person","@id":"https:\/\/xn--adrimadiseo-beb.com\/author\/mitzamitza-es\/#Person","name":"adrimadise\u00f1o","url":"https:\/\/xn--adrimadiseo-beb.com\/author\/mitzamitza-es\/","image":{"@type":"ImageObject","@id":"https:\/\/secure.gravatar.com\/avatar\/4f04015a3698191a873267b006e8e8789ce30b6ee841a5518a6033860d50fe16?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4f04015a3698191a873267b006e8e8789ce30b6ee841a5518a6033860d50fe16?s=96&d=mm&r=g","height":96,"width":96}},"publisher":{"@type":"Organization","name":"adrimadise\u00f1o.com","logo":{"@type":"ImageObject","@id":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2022\/05\/cropped-logo_adrima.png","url":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2022\/05\/cropped-logo_adrima.png","width":450,"height":90}},"image":{"@type":"ImageObject","@id":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2021\/06\/Como-crear-un-bloque-Gutenberg-personalizado-en-WordPress-forma-facil.png","url":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2021\/06\/Como-crear-un-bloque-Gutenberg-personalizado-en-WordPress-forma-facil.png","height":340,"width":550},"url":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/como-crear-un-bloque-gutenberg-personalizado-en-wordpress-forma-facil\/","about":["Tutoriales Wordpress"],"wordCount":1625,"articleBody":"\u00bfQuiere crear un bloque Gutenberg personalizado para su sitio de WordPress? Despu\u00e9s de la actualizaci\u00f3n de WordPress 5.0, debe usar bloques para crear contenido en el nuevo editor de bloques de WordPress. WordPress se env\u00eda con varios bloques \u00fatiles que puede usar al escribir contenido. Muchos complementos de WordPress tambi\u00e9n 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\u00edfico. Si est\u00e1 buscando una soluci\u00f3n f\u00e1cil para crear bloques Gutenberg personalizados para su sitio de WordPress, entonces est\u00e1 en el lugar correcto.En este tutorial paso a paso, le mostraremos la manera f\u00e1cil de crear un bloque de WordPress personalizado para Gutenberg.Nota: Este art\u00edculo es para usuarios intermedios. Deber\u00e1 estar familiarizado con HTML y CSS para crear bloques Gutenberg personalizados.Paso 1: EmpieceLo 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\u00f3n sin mucha molestia.Para instalar el complemento, puede seguir nuestra gu\u00eda para principiantes sobre c\u00f3mo 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 bloquePor el bien de este tutorial, crearemos un bloque de ‘testimonios’. Primero, dir\u00edgete a Block Lab \u00bbAgregar nuevo desde la barra lateral izquierda de su panel de administraci\u00f3n. En esta p\u00e1gina, debe dar un nombre a su bloque. Puede escribir cualquier nombre de su elecci\u00f3n en el cuadro de texto “Ingrese el nombre del bloque aqu\u00ed”.Nombraremos nuestro bloque personalizado: Testimonios.En el lado derecho de la p\u00e1gina, encontrar\u00e1 las propiedades del bloque. Aqu\u00ed puede elegir un icono para su bloque y seleccionar una categor\u00eda de bloque del cuadro desplegable Categor\u00eda.El slug se completar\u00e1 autom\u00e1ticamente seg\u00fan 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\u00e1cilmente.Ahora agreguemos algunos campos a nuestro bloque. Puede agregar diferentes tipos de campos como texto, n\u00fameros, correo electr\u00f3nico, URL, color, imagen, casilla de verificaci\u00f3n, botones de radio y mucho m\u00e1s.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 \u00e1rea de texto para el texto del testimonio.Haga clic en el + Agregar campo para insertar el primer campo. Esto abrir\u00e1 algunas opciones para el campo. Echemos un vistazo a cada uno de ellos. Etiqueta de campo: Puede utilizar cualquier nombre de su elecci\u00f3n para la etiqueta del campo. Nombramos nuestro primer campo como Imagen de revisor.Nombre del campo: El nombre del campo se generar\u00e1 autom\u00e1ticamente en funci\u00f3n de la etiqueta del campo. Usaremos este nombre de campo en el siguiente paso, as\u00ed que aseg\u00farese de que sea \u00fanico para cada campo.Tipo de campo: Aqu\u00ed puede seleccionar el tipo de campo. Queremos que nuestro primer campo sea una imagen, por lo que seleccionaremos Imagen en el men\u00fa desplegable.Ubicaci\u00f3n 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\u00e1 creando este bloque para su uso personal.Tambi\u00e9n puede obtener algunas opciones adicionales seg\u00fan el tipo de campo que elija. Por ejemplo, si selecciona un campo de texto, obtendr\u00e1 opciones adicionales como texto de marcador de posici\u00f3n y l\u00edmite 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\u00f3n. En caso de que desee reordenar los campos, puede hacerlo arrastr\u00e1ndolos 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\u00f3n y eliminaci\u00f3n.Una vez que haya terminado, haga clic en el Publicar , presente en el lado derecho de la p\u00e1gina, para guardar su bloque Gutenberg personalizado. Paso 3: crea una plantilla de bloqueAunque ha creado el bloque personalizado de WordPress en el \u00faltimo paso, no funcionar\u00e1 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\u00e1 al complemento c\u00f3mo mostrar sus campos de bloque dentro del editor. El complemento buscar\u00e1 el archivo de plantilla y luego lo usar\u00e1 para mostrar el contenido del bloque. Si no tiene este archivo, mostrar\u00e1 un error que dice “No se encontr\u00f3 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\u00edgnele un nombre bloques. Crear\u00e1 su archivo de plantilla de bloque dentro de esta carpeta y luego lo cargar\u00e1 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\u00f3digo 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\u00ed con el nombre del campo. Por ejemplo, el nombre de nuestro primer campo es reviewer-image, por lo que agregaremos la siguiente l\u00ednea al archivo de plantilla:<?php block_field( 'reviewer-image' ); ?>Simple, \u00bfno es as\u00ed? 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\u00f3n, agregaremos algunas etiquetas HTML al c\u00f3digo 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\u00e1 la URL de la imagen que no es la que desea, \u00bfverdad? Tambi\u00e9n puede agregar nombres de clases a sus etiquetas HTML y envolver su c\u00f3digo dentro de un contenedor div para dise\u00f1ar el contenido de su bloque (lo que haremos en el siguiente paso).As\u00ed que aqu\u00ed est\u00e1 nuestro c\u00f3digo final para nuestra plantilla de bloque:<div class=\"testimonial-block clearfix\">\t<div class=\"testimonial-image\">\t\t<img src =\"<?php block_field( 'reviewer-image' ); ?>\">\t<\/div>\t<div class=\"testimonial-box\">\t\t<h4><?php block_field( 'reviewer-name' ); ?><\/h4>\t\t<p><?php block_field( 'testimonial-text' ); ?><\/p>\t<\/div><\/div>Finalmente, nombre el archivo como block-testimonials.php y gu\u00e1rdelo dentro del bloques carpeta.Paso 4: Dise\u00f1e su bloque personalizado\u00bfQuieres 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\u00f3digo:.testimonial-block {\twidth: 100%;\tmargin-bottom: 25px;}.testimonial-image {\tfloat: left;\twidth: 25%;\tpadding-right: 15px;}.testimonial-box {\tfloat: left;\twidth: 75%;}.clearfix::after {\tcontent: \"\";\tclear: both;\tdisplay: table;}Una vez hecho esto, nombre el archivo como block-testimonials.css y gu\u00e1rdelo dentro del bloques carpeta.Paso 5: Cargue el archivo de plantilla de bloque a la carpeta de temasAhora 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\u00eda sobre c\u00f3mo cargar archivos en su sitio de WordPress mediante FTP.Una vez que est\u00e9 conectado, vaya a la carpeta \/ wp-content \/ themes \/. Desde aqu\u00ed, 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\u00edficos 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 bloqueEs hora de probar nuestro bloque de testimonios personalizados. Puede hacer esto dirigi\u00e9ndose a Paginas \u00bb Agregar nuevo para crear una nueva p\u00e1gina.A continuaci\u00f3n, haga clic en el Agregar bloque (+) y busque el bloque Testimonios. Una vez que lo encuentre, haga clic en \u00e9l para agregar el bloque personalizado a su editor de p\u00e1gina.Ahora puede agregar un testimonio a esta p\u00e1gina usando su bloque personalizado. Para agregar m\u00e1s testimonios, siempre puede insertar nuevos bloques de testimonios.Una vez que haya terminado, puede obtener una vista previa o publicar la p\u00e1gina para comprobar si funciona correctamente o no.\u00a1Eso es todo! Ha creado con \u00e9xito su primer bloque de WordPress personalizado para su sitio.\u00bfSab\u00edas que puedes ahorrar tiempo con bloques reutilizables en tu editor? Consulte nuestra gu\u00eda sobre c\u00f3mo crear f\u00e1cilmente bloques reutilizables en el editor de bloques de WordPress y utilizarlos en otros sitios web.Es posible que tambi\u00e9n desee ver nuestra gu\u00eda sobre c\u00f3mo crear un tema de WordPress personalizado sin escribir ning\u00fan c\u00f3digo.Si le gust\u00f3 este art\u00edculo, suscr\u00edbase a nuestro Canal de Youtube para tutoriales en video de WordPress. Tambi\u00e9n puedes encontrarnos en Gorjeo y Facebook. 4.5 \/ 5 ( 347 votos ) "},{"@context":"https:\/\/schema.org\/","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Tutoriales Wordpress","item":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/#breadcrumbitem"},{"@type":"ListItem","position":2,"name":"C\u00f3mo crear un bloque Gutenberg personalizado en WordPress (forma f\u00e1cil)","item":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/como-crear-un-bloque-gutenberg-personalizado-en-wordpress-forma-facil\/#breadcrumbitem"}]}]