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.

¿La mejor parte? Crear bloques personalizados es más accesible de lo que la mayoría de la gente piensa. Con las herramientas adecuadas y un proceso claro, no necesitas ser un desarrollador para crear bloques que se ajusten a las necesidades únicas de tu sitio.

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.

¿Por qué crear un bloque personalizado de WordPress?

WordPress viene con un editor de bloques intuitivo que te permite crear fácilmente tus publicaciones y páginas agregando contenido y elementos de diseño como bloques.

Por defecto, WordPress incluye varios bloques de uso común. Los plugins de WordPress también pueden agregar sus propios bloques que puedes usar.

Sin embargo, a veces, es posible que desees crear un bloque personalizado para hacer algo específico en tu sitio web de WordPress porque no puedes encontrar un plugin de bloque que funcione para ti.

Con bloques personalizados, puedes agregar características y funcionalidades únicas a tu sitio web que quizás no estén disponibles en los bloques preconstruidos. Esto puede ayudar a automatizar procesos o hacer que la creación de contenido para tu blog de WordPress sea más eficiente.

Por ejemplo, podrías crear un bloque personalizado para mostrar testimonios y luego insertar y administrar fácilmente ese bloque sin ningún conocimiento de codificación.

Dicho esto, 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: Crear bloques personalizados para WordPress usando WPCode (Recomendado)
• Método 2: Crear bloques personalizados para WordPress usando el plugin Genesis Custom Code (Gratis)
• Extra: Crear plantillas personalizadas para tus publicaciones

Método 1: Crear bloques personalizados para WordPress usando WPCode (Recomendado)

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 encontrado que WPCode es la forma más amigable para principiantes y segura 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.

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

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’.

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.

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.

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, usuarios registrados, páginas de tienda WooCommerce, páginas de Easy Digital Downloads, fechas específicas y más.

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 no se mostrará como una opción en el menú de bloques del editor Gutenberg de WordPress.

Tendrás que configurar los ajustes del bloque visitando la página Fragmentos de código desde el panel de WordPress y haciendo clic en el enlace ‘Editar’ debajo del fragmento del bloque.

Esto abrirá la página ‘Editar fragmento’, donde puedes personalizar el bloque o cambiar su ubicación y reglas de lógica condicional fácilmente.

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: Crear bloques personalizados para WordPress usando el plugin Genesis Custom Code (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.

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 1: Crear un bloque personalizado para WordPress

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.

Ahora, es hora de añadir algunos campos a tu bloque. Puedes añadir 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 texto para describir el campo. Esto no es obligatorio si estás creando este bloque para uso personal, pero puede ser útil para blogs con múltiples 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 2: Crear una plantilla de bloque personalizada

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, tiene que crear un archivo llamado block.php usando un editor de texto plano. Aquí es donde pondrá la parte HTML / PHP de la plantilla de su 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.

Después de eso, necesita cargar su carpeta de bloque en su sitio web usando 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 a la carpeta /wp-content/themes/your-current-theme/.

Si tu carpeta de tema no tiene una carpeta llamada ‘blocks’, entonces crea un nuevo directorio y llámalo blocks.

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 3: Previsualiza 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 4: Usando tu bloque personalizado en WordPress

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

Simplemente edita cualquier entrada 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 plantillas personalizadas para tus publicaciones

Además de crear bloques personalizados, puedes agregar plantillas personalizadas para las publicaciones de blog o páginas de tu sitio web.

Una plantilla es un diseño que puedes agregar 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 llamativas, y puede ayudar a generar más clientes potenciales.

Puedes crear fácilmente una plantilla para todas tus publicaciones creando un bloque de Grupo reutilizable.

Primero, tendrás que hacer clic en el botón 'Agregar bloque' (+) para agregar el bloque de Grupo a la publicación. Luego, puedes agregar cualquier bloque dentro del grupo, incluido encabezado, 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 plantilla de publicación se guardará como un bloque reutilizable. Puedes acceder a él 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 publicaciones personalizadas ofrece una funcionalidad limitada. Para crear una plantilla personalizada más atractiva sin necesidad de codificar, puedes usar SeedProd, que es el mejor constructor de páginas del mercado.

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

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

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