Cómo crear un bloque de WordPress personalizado (manera fácil)

¿Quiere crear un bloque de Gutenberg personalizado para su sitio web de WordPress?

Si bien WordPress viene con muchos bloques básicos de creación de contenido, es posible que necesite algo más personalizado para su sitio.

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 viene con varios bloques de uso común. Los complementos de WordPress también pueden agregar sus propios bloques para usar.

Sin embargo, a veces es posible que desee crear su propio bloque personalizado para hacer algo específico y no puede encontrar un bloque de complemento que funcione para usted.

En este tutorial le mostraremos cómo crear un bloque completamente personalizado.

Nota: Este artículo es para usuarios avanzados. Debe estar familiarizado con HTML y CSS para crear bloques de Gutenberg personalizados.

Paso 1: Comience con su primer bloque personalizado

Primero debes instalarlo y activarlo Bloques de Génesis personalizados enchufar. Consulte nuestra guía paso a paso para instalar el complemento de WordPress para obtener más detalles.

Desarrollado por las personas detrás del popular Genesis Theme Framework y StudioPress, este complemento brinda a los desarrolladores herramientas simples para crear rápidamente bloques personalizados para sus proyectos.

Crearemos un bloque de comentarios para este tutorial.

Ir primero Bloques personalizados »Añadir nuevo Página de la barra lateral izquierda de su panel de administración.

Esto lo llevará a la página del Editor de bloques.

Desde aquí necesitas nombrar tu bloque.

En el lado derecho de la página encontrará las propiedades del bloque.

Aquí puede seleccionar un ícono para su bloque, agregar una categoría y agregar palabras clave.

La viñeta se completa 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 cuadro de texto Palabras clave para que su bloque sea fácil de encontrar.

Ahora agreguemos algunos campos a nuestro bloque.

Puede agregar diferentes tipos de campos, como texto, número, dirección de correo electrónico, URL, color, imagen, casilla de verificación, botón de opción y más.

Agregaremos tres campos a nuestro bloque de recomendación personalizado: un campo de imagen para la foto del revisor, un cuadro de texto para el nombre del revisor y un cuadro de texto para el texto del revisor.

Haga clic en este [+] agregar un campo Botón para insertar el primer campo.

Esto abre algunas opciones para el campo. Veamos cada uno de ellos.

• Etiqueta de campo: Puede utilizar cualquier nombre para la etiqueta de campo. Llamemos a nuestro primer campo Image Reviewer.
• 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 seleccionar el tipo de campo. Queremos que nuestro primer campo sea una imagen, así que elijamos una imagen del 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 uso personal, pero puede ser útil para blogs de varios autores.

Dependiendo del tipo de campo que elija, puede recibir algunas opciones adicionales. Por ejemplo, si selecciona un cuadro de texto, obtendrá opciones adicionales como colocar texto y límite de caracteres.

Después del proceso anterior, agreguemos dos campos más a nuestro bloque de recomendaciones haciendo clic en [+] agregar un campo Botón.

Si desea reorganizar los campos, puede hacerlo arrastrándolos con el joystick en el lado izquierdo de la etiqueta de cada campo.

Para editar o eliminar un campo específico, debe hacer clic en etiquete el cuadro y edite las opciones en la columna de la derecha.

Cuando haya terminado, haga clic en Correo Botón en el lado derecho de la página para guardar su bloque de Gutenberg personalizado.

Paso 2: crea una plantilla de bloque personalizada

Aunque creó 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 realizar funciones o hacer otras cosas avanzadas con datos.

Hay dos formas de crear una plantilla de bloque. Si la salida de su bloque está en HTML/CSS, puede usar el editor de plantillas integrado.

Por otro lado, si la salida de su bloque requiere algo de PHP para ejecutarse en segundo plano, deberá crear manualmente un archivo de plantilla de bloque y cargarlo en su carpeta de temas.

Método 1. Usa el editor de plantillas incorporado

En la pantalla de edición de bloque personalizado, simplemente cambie a la pestaña Editor de plantillas e ingrese su código HTML en la pestaña Marcado.

Puede escribir su código HTML y usar llaves dobles para insertar valores de campo de bloque.

Por ejemplo, usamos el siguiente código HTML para el bloque de muestra creado anteriormente.

{{reviewer-name}}
{{testimonial-text}}

Luego cambie a la pestaña CSS para diseñar el resaltado de su bloque original.

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. Cargue manualmente plantillas para bloques personalizados

Se recomienda este método si necesita usar PHP para interactuar con sus campos de bloque personalizados.

En general, debe cargar la plantilla del editor directamente en su tema.

Primero debe crear una carpeta en su computadora y nombrarla con su nombre de usuario de bloque. Por ejemplo, nuestro bloque de demostración se llama Testimonios, así que vamos a crear una carpeta de Testimonios.

Entonces necesitas crear un archivo llamado block.php con un sencillo editor de texto. Aquí es donde coloca la parte HTML/PHP de su plantilla de bloque.

Aquí está la plantilla de muestra que usamos para nuestro ejemplo.

Fíjate cómo los usamos block_field() Bloquear la función de extracción de datos de campo.

Hemos incluido 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.

Recuerde guardar el archivo en la carpeta que creó anteriormente.

Luego, debe crear otro archivo usando un editor de texto sin formato en su computadora y guardarlo como block.css en la carpeta que creaste.

Usaremos este archivo para agregar el CSS necesario para diseñar nuestro anuncio de bloque. 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;
}

Recuerda guardar tus cambios.

Su carpeta de plantillas de bloque ahora contiene dos archivos de plantilla.

Luego, debe cargar su carpeta de bloques en su sitio web utilizando un cliente FTP o una aplicación de administrador de archivos en el panel de control de su cuenta de alojamiento de WordPress.

Una vez conectado, vaya a /wp-content/themes/your-current-theme/ carpeta.

Si su carpeta de temas no contiene bloques de nombre de carpeta, cree un nuevo directorio y asígnele un nombre blocks.

Ahora ve a la carpeta de bloques y sube la carpeta que creaste en tu computadora a la carpeta de bloques.

¡Eso es todo! Ha creado con éxito archivos de plantilla manual para su bloque personalizado.

Paso 3. Revisa tu bloque personalizado

Ahora, antes de que pueda ver su HTML / CSS, debe proporcionar algunos datos de prueba que se pueden usar para mostrar la salida de muestra.

Desde el administrador de WordPress, edita tu bloque y ve a la sección Vista previa del editor. Aquí debe ingresar algunos datos ficticios.

Asegúrese de hacer clic en el botón Actualizar para guardar los cambios antes de obtener una vista previa.

Ahora puede cambiar a la sección Vista previa de la interfaz para ver cómo se verá su bloque en la interfaz (área pública de su sitio web de WordPress).

Si todo va bien, puede actualizar su bloque para guardar los cambios no guardados.

Paso 4. Usa tu bloque personalizado en WordPress

Ahora puede usar su bloque personalizado en WordPress como lo haría con cualquier otro bloque.

Simplemente edite cualquier publicación o página donde desee usar 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 bloqueo según sea necesario.

Cuando cambia de un bloque a otro, el editor muestra automáticamente una vista previa en vivo de su bloque.

Ahora puede guardar y obtener una vista previa de su publicación y página para ver su bloque personalizado en acción en su sitio.

Así es como se ve el bloque Testimonios en nuestra página 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 puede consultar nuestra guía para crear un tema de WordPress personalizado desde cero o nuestra selección experta de complementos de WordPress obligatorios para su sitio web.

Si te ha gustado este artículo, suscríbete al nuestro. canal de Youtube para videos tutoriales para WordPress. También puedes encontrarnos en Closermarketing.es y Facebook.