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

Los bloques predeterminados de WordPress son excelentes para contenido simple, pero pueden quedarse cortos rápidamente cuando necesitas diseños personalizados, elementos interactivos o diseños a medida.

Ahí es donde entran los bloques personalizados. Te dan control total sobre cómo se ve y funciona tu contenido, sin depender de plugins inflados o soluciones alternativas.

Lo mejor de todo es que puedes crear un bloque personalizado de WordPress sin ser desarrollador. Con las herramientas adecuadas y un proceso claro, puedes crear bloques que se ajusten a las necesidades únicas de tu sitio, sin necesidad de React, Node.js ni comandos de terminal.

A lo largo de los años, hemos utilizado bloques personalizados para optimizar flujos de trabajo y ofrecer sitios de WordPress completamente personalizados para clientes, y ahora, te mostraremos cómo hacer lo mismo.

En esta guía, aprenderás el proceso paso a paso para crear bloques personalizados de WordPress, incluso si no eres un experto en codificación.

💡 Comparación rápida: Las mejores formas de crear un bloque personalizado en WordPress

¿Tienes prisa? Echa un vistazo a la siguiente tabla para elegir el método ideal:

¿Por qué crear un bloque personalizado de WordPress?

Los bloques personalizados te ayudan a ahorrar tiempo y mantener la coherencia al permitirte crear elementos de contenido reutilizables para tu sitio web. Estos son algunos de los beneficios más importantes:

• Reduce el trabajo repetitivo: Crea un diseño o una función una vez y reutilízala en cualquier lugar de tu sitio.
• Mantén una marca coherente: Asegúrate de que los elementos importantes del contenido utilicen siempre el mismo diseño y formato.
• Actualiza de forma más eficiente: Realiza cambios en el diseño de tu bloque sin tener que reconstruir el mismo contenido desde cero.

Casos de uso comunes para bloques personalizados de WordPress

Los bloques personalizados se pueden utilizar para muchos tipos diferentes de contenido. Aquí tienes algunos ejemplos comunes:

¿Necesitas Habilidades de Codificación o Herramientas de Desarrollador?

El desarrollo tradicional de bloques requiere conocimientos de Node.js, npm y React, por eso los tutoriales oficiales de WordPress están dirigidos a desarrolladores experimentados.

Sin embargo, ambos métodos de esta guía funcionan directamente en tu panel de WordPress. No necesitarás instalar Node.js, ejecutar comandos de terminal ni escribir JSX.

El Método 1 (WPCode) no requiere codificación, mientras que el Método 2 (Genesis Custom Blocks) solo necesita familiaridad básica con HTML/CSS.

Ahora, veamos cómo crear fácilmente un bloque completamente personalizado en WordPress.

Para este tutorial, te mostraremos dos métodos para crear un bloque personalizado. Puedes usar los enlaces rápidos a continuación para saltar al método de tu elección:

Método 1: Cómo Crear un Bloque Personalizado de WordPress Usando WPCode (No Requiere Codificación)

Si eres nuevo en WordPress y la codificación te parece intimidante, WPCode es una opción fantástica para ti.

Como parte de nuestro conjunto de herramientas, hemos descubierto que WPCode es la forma más segura y fácil para principiantes de agregar fragmentos de código personalizados.

También tenemos una reseña detallada de WPCode que podría resultarte útil para comprender todo su potencial.

Una de sus características destacadas son los fragmentos de bloques, que te permiten crear bloques personalizados sin esfuerzo.

Paso 1: Instalar y activar WPCode

Primero, necesitas instalar y activar el plugin WPCode. Para obtener instrucciones detalladas, es posible que desees consultar nuestra guía para principiantes sobre cómo instalar un plugin de WordPress.

Paso 2: Crear un fragmento de bloque nuevo

Tras la activación, dirígete a la página Fragmentos de código » + Añadir fragmento desde la barra lateral de administración de WordPress.

Una vez que estés allí, haz clic en el botón 'Usar fragmento' debajo de la opción 'Agregar tu código personalizado (Nuevo fragmento)'.

Esto te llevará a la página 'Crear fragmento personalizado', donde puedes comenzar escribiendo un nombre para el nuevo bloque que estás a punto de crear.

Una vez que hayas hecho eso, simplemente selecciona la opción ‘Blocks Snippet’ del menú desplegable ‘Code Type’ en la esquina derecha de la pantalla.

Esto mostrará el botón ‘Edit with Block Editor’ en el cuadro ‘Code Preview’.

Paso 3: Diseñar tu bloque personalizado

Simplemente haz clic en este botón para iniciar el editor de bloques.

Ahora, aparecerá un aviso en tu pantalla pidiéndote que guardes el fragmento de código para cargarlo en el editor de bloques. Simplemente haz clic en el botón ‘Yes’ para continuar.

Ahora que estás en el editor de bloques, puedes crear fácilmente un bloque personalizado utilizando los bloques prefabricados disponibles en el menú de bloques.

Para este tutorial, crearemos un bloque personalizado para agregar testimonios a tu sitio.

Primero, haz clic en el botón ‘Add Block’ (+) en la esquina superior izquierda de la pantalla para abrir el menú de bloques.

Desde aquí, arrastra y suelta el bloque de Encabezado en la interfaz del editor de bloques y nómbralo 'Testimonios'.

A continuación, puedes usar los bloques de párrafo, cita destacada o cita para agregar testimonios de diferentes clientes en tu sitio web.

Incluso puedes personalizar aún más tu bloque de testimonios usando los bloques de imagen, logo del sitio, iconos sociales o lema del sitio.

También puedes configurar el tamaño, el color del texto o el color de fondo de tus testimonios desde el panel de bloques en el lado derecho de la pantalla.

Una vez que hayas terminado, no olvides hacer clic en el botón 'Actualizar' en la parte superior para guardar la configuración de tu bloque personalizado.

Paso 4: Configurar los ajustes de inserción

A continuación, simplemente haz clic en el botón 'Regresar al fragmento de WPCode' en la parte superior para ser redirigido a la página del editor de código.

Una vez que estés allí, desplázate hacia abajo hasta la sección 'Inserción' y elige el modo 'Inserción automática'.

Al activar el fragmento de código, tu bloque personalizado se agregará automáticamente a la ubicación que elijas para insertarlo en tu sitio web.

A continuación, tienes que configurar la ubicación del bloque personalizado que creaste.

Para hacer esto, simplemente haz clic en el menú desplegable 'Ubicación' en la sección 'Inserción' y cambia a la pestaña 'Específico de página'. Desde aquí, ahora puedes elegir la opción 'Insertar después de la entrada' si deseas mostrar tu bloque de Testimonios al final de la entrada.

Una vez que hagas eso, también puedes configurar el número de entradas después de las cuales debe aparecer el bloque de testimonios. Por ejemplo, si escribes el número 3, el bloque de Testimonios aparecerá en cada tercera entrada.

También puedes mostrar el bloque entre diferentes párrafos, después de los extractos de las entradas y más.

Paso 5: Aplicar lógica condicional (Opcional)

Sin embargo, si no encuentras la ubicación del bloque que buscas, también puedes crear tu propia regla de lógica condicional para incrustar el bloque personalizado en el lugar que prefieras.

Para hacer esto, desplázate hacia abajo hasta la sección 'Lógica condicional inteligente' y activa el interruptor 'Habilitar lógica'.

A continuación, debes hacer clic en el botón 'Agregar nuevo grupo' para comenzar a crear una regla de lógica condicional.

Por ejemplo, si solo deseas mostrar el bloque personalizado que creaste en una página o publicación específica, entonces tendrás que seleccionar la opción ‘URL de la página’ del menú desplegable de la derecha.

Después de eso, puedes dejar el menú desplegable del medio como está y luego agregar la URL de la página/publicación de WordPress de tu elección en el campo de la izquierda.

También puedes configurar tu regla de lógica condicional para mostrar el bloque personalizado solo en una página específica, para usuarios registrados, en páginas de tiendas WooCommerce, en páginas de Easy Digital Downloads, para fechas específicas, y más.

Paso 6: Activar y guardar tu bloque

Una vez que hayas terminado, desplázate hacia arriba de la página y cambia el interruptor de ‘Inactivo’ a ‘Activo’. Luego, haz clic en el botón ‘Actualizar’ para guardar tu configuración.

Tu bloque personalizado ahora se agregará automáticamente a todas las ubicaciones que seleccionaste para el fragmento del bloque.

Ten en cuenta que el bloque personalizado que creaste con WPCode no se mostrará como una opción de arrastrar y soltar en el menú de bloques de WordPress.

En su lugar, se insertará automáticamente en tus publicaciones o páginas según la ubicación y las reglas de lógica condicional que configuraste en el Paso 5.

Para editar el contenido del bloque o cambiar dónde aparece, visita Fragmentos de Código desde el panel de WordPress y haz clic en el enlace 'Editar' debajo del fragmento del bloque.

Ahora, visita tu sitio web para ver el bloque personalizado que creaste en acción.

Aquí está nuestro bloque personalizado de Testimonios en nuestro sitio web de demostración.

Método 2: Crea un Bloque Personalizado de Gutenberg con Genesis Custom Blocks (Gratis)

Si eres un usuario intermedio y buscas una solución gratuita, entonces este método es para ti. Ten en cuenta que necesitarás estar familiarizado con HTML y CSS para seguir las instrucciones de este método.

Paso 1: Instalar Genesis Custom Blocks

Primero, necesitas instalar y activar el plugin Genesis Custom Blocks. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Para este tutorial, crearemos un bloque de testimonios.

Paso 2: Crear y configurar un bloque nuevo

Primero, dirígete a la página Bloques personalizados » Añadir nuevo desde la barra lateral de administración de WordPress.

Esto te llevará a la página del Editor de Bloques, donde crearás un bloque personalizado para tu sitio de WordPress.

Desde aquí, puedes empezar dando un nombre a tu bloque.

Ahora, en el lado derecho de la página, encontrarás las propiedades del bloque que puedes configurar.

Aquí, puedes elegir un icono para tu bloque, añadir una categoría y añadir palabras clave.

El slug se autocompletará basándose en el nombre de tu bloque, así que no tienes que cambiarlo. Sin embargo, puedes escribir hasta 3 palabras clave en el campo de texto 'Palabras clave' para que tu bloque se encuentre fácilmente.

Paso 3: Añadir campos a tu bloque

Ahora, es hora de agregar algunos campos a tu bloque. Puedes agregar diferentes tipos de campos como texto, números, direcciones de correo electrónico, URLs, colores, imágenes, casillas de verificación, botones de radio y más.

Añadiremos tres campos a nuestro bloque personalizado de Testimonios: un campo de imagen para la foto del revisor, un cuadro de texto para el nombre del revisor y un campo de área de texto para el texto del testimonio.

Simplemente haz clic en el botón '+' para insertar el primer campo.

Esto abrirá algunas opciones para el campo en la columna derecha. Echemos un vistazo a cada una de ellas.

• Etiqueta del campo: Puedes usar cualquier nombre de tu 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 basándose en la etiqueta del campo. Usaremos este nombre de campo en el siguiente paso, así que asegúrate de que sea único para cada campo.
• Tipo de campo: Aquí, puedes seleccionar el tipo de campo. Queremos que nuestro primer campo sea una imagen, así que elegiremos 'Imagen' del menú desplegable.
• Ubicación del campo: Puedes decidir si quieres añadir el campo al editor o al inspector.
• Texto de ayuda: Puedes agregar un texto para describir el campo. Esto no es obligatorio si estás creando este bloque para tu uso personal, pero puede ser útil para blogs de varios autores.

También puedes ver algunas opciones adicionales según el tipo de campo que elijas. Por ejemplo, si seleccionas un campo de texto, obtendrás opciones extra como texto de marcador de posición y límite de caracteres.

Siguiendo el proceso anterior, agreguemos 2 campos más para nuestro bloque de Testimonios haciendo clic en el botón ‘+’.

En caso de que quieras reordenar los campos, puedes hacerlo arrastrándolos usando el manejador en el lado izquierdo de la etiqueta de cada campo. Para editar o eliminar un campo en particular, necesitas hacer clic en la etiqueta del campo y editar las opciones en la columna derecha.

Una vez que hayas terminado, simplemente haz clic en el botón ‘Publicar’ en el lado derecho de la página para guardar tu bloque personalizado de Gutenberg.

Paso 4: Crear una plantilla de bloque

Aunque creaste el bloque personalizado de WordPress en el último paso, no funcionará hasta que crees una plantilla de bloque.

La plantilla de bloque determina exactamente cómo se muestra la información ingresada en el bloque en tu sitio web. Tú decides cómo se ve usando HTML y CSS, o incluso código PHP si necesitas ejecutar funciones o hacer otras cosas avanzadas con los datos.

Hay dos maneras de crear una plantilla de bloque. Si la salida de tu bloque está en HTML/CSS, entonces puedes usar el editor de plantillas integrado.

Por otro lado, si la salida de tu bloque requiere que se ejecute algo de PHP en segundo plano, entonces necesitarás crear manualmente un archivo de plantilla de bloque y subirlo a la carpeta de tu tema.

Método 1: Usando el editor de plantillas integrado

En la pantalla de edición de bloques personalizados, simplemente cambia a la pestaña ‘Editor de plantillas’ e ingresa tu HTML en la pestaña de marcado.

Puedes escribir tu HTML y usar llaves dobles para insertar valores de campos de bloque.

Por ejemplo, usamos el siguiente 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, simplemente cambia a la pestaña ‘CSS’ para dar estilo al marcado de salida de tu bloque.

Aquí está el CSS de ejemplo 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: Subir plantillas de bloques personalizados manualmente

Este método se recomienda si necesita usar PHP para interactuar con los campos de su bloque personalizado. Deberá cargar la plantilla del editor directamente en su tema.

Primero, debe crear una carpeta en su computadora y nombrarla usando el slug del nombre de su bloque personalizado.

Por ejemplo, nuestro bloque de demostración se llama Testimonios, así que crearemos una carpeta testimonials.

A continuación, tienes que crear un archivo llamado block.php usando un editor de texto plano. Aquí es donde pondrás la parte HTML/PHP de tu plantilla de bloque.

Aquí está la plantilla de ejemplo 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>

Ahora, es posible que haya notado cómo usamos la función block_field() 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 CSS para que podamos estilizar el bloque correctamente.

No olvide guardar el archivo dentro de la carpeta que creó anteriormente.

A continuación, necesita crear otro archivo usando el editor de texto plano en su computadora y guardarlo como block.css dentro de la carpeta que creó.

Usaremos este archivo para agregar el CSS necesario para estilizar la visualización de nuestro bloque. Aquí está el CSS de ejemplo 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.

A continuación, conéctate a tu sitio web usando un cliente FTP (o SFTP si tu host lo requiere) o abre el Administrador de Archivos en tu cuenta de hosting.

Una vez conectado, navega al directorio /wp-content/themes/tu-tema-actual/.

Si aún no ves una carpeta llamada blocks, créala.

La mayoría de los clientes FTP te permiten hacer clic derecho y seleccionar 'Crear Directorio' o 'Nueva Carpeta', mientras que los usuarios de cPanel pueden hacer clic en el botón '+ Carpeta'.

A continuación, tienes que subir la carpeta que creaste en tu computadora a la carpeta blocks.

¡Eso es todo! Has creado con éxito archivos de plantilla manuales para tu bloque personalizado.

Paso 5: Previsualizar tu bloque personalizado

Antes de poder previsualizar tu HTML/CSS, necesitarás proporcionar algunos datos de prueba que se puedan usar para mostrar una salida de ejemplo.

Dentro del área de administración de WordPress, edita tu bloque y cambia a la pestaña ‘Vista previa del editor’. Aquí, necesitas ingresar algunos datos ficticios.

Estos datos no serán parte de tu bloque personalizado y solo se usarán para previsualizar los cambios que hiciste usando HTML y CSS.

Una vez que hayas agregado los datos, recuerda hacer clic en el botón ‘Actualizar’ para guardar tus cambios.

Si no haces clic en el botón ‘Actualizar’, entonces no podrás ver la vista previa de tu bloque personalizado.

Ahora puedes cambiar a la pestaña ‘Vista previa del front-end’ para ver cómo se verá tu bloque en el front-end de tu sitio web de WordPress.

Si todo se ve bien para ti, entonces puedes actualizar tu bloque nuevamente para guardar cualquier cambio no guardado.

Paso 6: Insertar tu bloque en una publicación

Ahora puedes usar tu bloque personalizado en WordPress como usarías cualquier otro bloque.

Simplemente edita cualquier publicación o página donde quieras usar este bloque. Luego, haz clic en el botón ‘Agregar bloque’ (+) en la esquina superior izquierda para abrir el menú de bloques.

Aquí, usa la función de búsqueda para encontrar tu bloque escribiendo su nombre o palabras clave. Luego agrégalo a la página o entrada.

Después de insertar el bloque personalizado en el área de contenido, verás los campos del bloque que creaste anteriormente.

Puedes completar los campos del bloque según sea necesario.

Al alejarte del bloque personalizado de WordPress a otro, el editor mostrará automáticamente una vista previa en vivo de tu bloque.

Ahora puedes guardar tu publicación y página y previsualizarla para ver tu bloque personalizado en acción en tu sitio web.

Así es como se ve el bloque de testimonios en nuestro sitio de prueba.

Extra: Crear patrones de bloques reutilizables

Además de crear bloques personalizados, puedes añadir patrones de bloques personalizados (anteriormente conocidos como bloques reutilizables) para las publicaciones o páginas de tu sitio web.

Un patrón es un diseño que puedes añadir a tu publicación para que se vea diferente de otras páginas y contenido. Esto puede hacer que tus publicaciones sean más atractivas y visualmente interesantes, y puede ayudar a generar más clientes potenciales.

Puedes crear fácilmente un patrón para todas tus publicaciones creando un bloque de Grupo reutilizable.

Primero, tendrás que hacer clic en el botón ‘Añadir bloque’ (+) para agregar el bloque de Grupo a la publicación. Luego, puedes agregar cualquier bloque dentro del grupo, incluyendo encabezados, medios y texto, imágenes de portada y más.

Una vez que hayas creado la plantilla de publicación, haz clic en el menú de tres puntos en la barra de herramientas del bloque en la parte superior del bloque. Luego, haz clic en el botón 'Crear patrón'.

Después de eso, tu patrón de publicación se guardará como un patrón sincronizado. Puedes acceder y agregarlo a cualquier publicación abriendo el menú de bloques (+) y cambiando a la pestaña ‘Patrones’.

Sin embargo, ten en cuenta que este método de creación de plantillas de publicación personalizadas permite una funcionalidad limitada. Para crear una plantilla personalizada más atractiva sin necesidad de codificación, puedes usar SeedProd, que es el mejor constructor de páginas del mercado.

Para obtener más detalles, consulta nuestro tutorial sobre cómo crear plantillas personalizadas de publicaciones únicas en WordPress.

Preguntas frecuentes sobre bloques personalizados de WordPress

Aquí tienes algunas preguntas que nuestros lectores han hecho con frecuencia sobre la creación de bloques personalizados de WordPress:

¿Cómo creo un bloque personalizado en WooCommerce?

Puedes crear bloques personalizados para WooCommerce utilizando plugins como WPCode o Genesis Custom Blocks, al igual que lo harías para una página estándar. Dado que WooCommerce utiliza el editor estándar de WordPress para las descripciones de productos y los diseños de tiendas, cualquier bloque personalizado que crees funcionará sin problemas en tu tienda en línea.

¿Cuál es la diferencia entre bloques personalizados y bloques reutilizables? 

Los bloques personalizados son tipos de bloques completamente nuevos con funcionalidad y campos únicos, mientras que los bloques reutilizables (ahora llamados patrones de bloques) son instancias guardadas de bloques existentes que puedes insertar repetidamente.

Los bloques personalizados te dan control estructural; los bloques reutilizables ahorran tiempo en contenido repetitivo.

¿Puede ChatGPT crear un sitio web de WordPress?

ChatGPT no puede crear un sitio de WordPress automáticamente, pero puede generar el código y el contenido específicos que necesitas para crearlo. Puedes pedirle a ChatGPT que escriba el HTML, CSS y PHP necesarios para bloques o temas personalizados, que luego puedes copiar y pegar en tu sitio usando herramientas como WPCode.

¿Cómo creo un plugin personalizado de WordPress?

La forma más fácil de crear funcionalidades de plugin personalizadas es utilizando un administrador de fragmentos de código como WPCode, que se encarga de la configuración por ti.

Alternativamente, puedes crear una carpeta en tu computadora que contenga un archivo PHP con un comentario de encabezado de plugin estándar, comprimir esa carpeta y subirla a través de la pantalla de Plugins » Añadir nuevo.

¿Cómo añado un bloque HTML personalizado en WordPress?

Puedes añadir HTML personalizado usando el bloque nativo 'HTML personalizado' que se encuentra en la biblioteca de bloques de WordPress. Simplemente haz clic en el botón (+) Añadir bloque, busca "HTML personalizado" y pega tu código directamente en el bloque para que se muestre en tu sitio web.

Esperamos que este artículo te haya ayudado a aprender cómo crear fácilmente bloques personalizados de Gutenberg para tu sitio web de WordPress. También te puede interesar ver nuestra guía sobre cómo agregar una lista de verificación de publicaciones de blog en el editor de WordPress y ver nuestros consejos esenciales para usar shortcodes en tu sitio web.

Si te gustó este artículo, suscríbete a nuestro Canal de YouTube para ver tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.