Cómo crear un bloque personalizado en WordPress (de forma sencilla)

¿Quieres crear un bloque de WordPress personalizado para tu sitio web?

Mientras que WordPress viene con un montón de bloques básicos para la creación de contenidos, es posible que necesite algo más específico para su sitio web.

En este artículo, te mostraremos dos formas de crear bloques Gutenberg personalizados para tu sitio WordPress.

¿Por qué crear un bloque personalizado de WordPress?

WordPress viene con un editor de bloques intuitivo que te permite construir fácilmente tus entradas y páginas añadiendo contenido y elementos de disposición como bloques.

Por defecto, WordPress envía varios bloques de uso común. Los plugins de WordPress también pueden añadir sus propios bloques.

Sin embargo, a veces es posible que desee crear un bloque personalizado para hacer algo específico en su sitio web de WordPress porque no puede encontrar un plugin de bloques que funcione para usted.

Con los bloques personalizados, puede añadir características y funcionalidades únicas a su sitio web que pueden no estar disponibles en los bloques preconstruidos. Esto puede ayudar a automatizar procesos o hacer más eficiente la creación de contenidos para tu blog de WordPress.

Por ejemplo, puede crear un bloque personalizado para mostrar testimonios y luego insertarlo y gestionarlo fácilmente sin necesidad de conocimientos de código.

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

En este tutorial, le mostraremos dos métodos para crear un bloque personalizado. Puede utilizar los enlaces rápidos que aparecen a continuación para saltar al método que prefiera:

Método 1: Crear Bloques Personalizados para WordPress Usando WPCode (Recomendado)

Si eres principiante y no tienes experiencia con el código, entonces este método es para ti.

WPCode es el mejor plugin de WordPress de fragmentos de código del mercado que hace que sea súper fácil y seguro añadir código personalizado a tu sitio web.

Viene con la característica de fragmentos de código que le permite crear fácilmente bloques personalizados para su sitio de WordPress sin escribir ningún código.

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

Una vez activado, diríjase a la página Fragmentos de código ” + Añadir fragmento desde la barra lateral del administrador de WordPress.

Una vez allí, haga clic en el botón “Usar fragmento de código” situado bajo la opción “Añadir su código personalizado (nuevo fragmento de código)”.

Esto le llevará a la página “Crear fragmento de código personalizado”, donde puede empezar escribiendo un nombre para el bloque personalizado que está a punto de crear.

Una vez hecho esto, sólo tiene que seleccionar la opción “Fragmento de código” del menú desplegable “Tipo de código” situado en la esquina derecha de la pantalla.

Aparecerá el botón “Editar con el editor de bloques” en el cuadro “Vista previa del código”.

Basta con hacer clic en este botón para iniciar el editor de bloques.

Ahora aparecerá una indicación en su pantalla pidiéndole que guarde el fragmento de código para cargarlo en el editor de bloques. Haz clic en el botón “Sí” para seguir adelante.

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

En este tutorial, crearemos un bloque personalizado para añadir testimonios a su sitio.

En primer lugar, debe hacer clic en el botón “Añadir bloque” (+) situado en la esquina superior izquierda de la pantalla para abrir el menú de bloques.

Desde aquí, arrastre y suelte el bloque Encabezado en la interfaz del editor de bloques y nómbrelo “Testimonios”.

A continuación, puede utilizar los bloques de párrafo, cita o presupuesto para añadir testimonios de diferentes clientes en su sitio web.

Incluso puede utilizar los bloques de imagen, logotipo del sitio, iconos sociales o descripción corta del sitio para personalizar aún más su bloque de testimonios.

También puede configurar el tamaño, el color del texto o el color de fondo de sus testimonios desde el panel de bloques situado a la derecha de la pantalla.

Una vez que haya terminado, no olvide hacer clic en el botón “Actualizar” de la parte superior para guardar sus ajustes de bloqueo personalizados.

A continuación, basta con hacer clic en el botón “Volver al fragmento de código WPCode” de la parte superior para ser redirigido a la página “Editar fragmento de código”.

Una vez allí, desplácese hasta la sección “Inserción” y elija el modo “Inserción automática”.

Al activar el fragmento de código, su bloque personalizado se añadirá automáticamente en el lugar de su sitio web donde usted decida insertarlo.

A continuación, debe configurar la ubicación del bloque personalizado que ha creado.

Para ello, basta con hacer clic en el menú desplegable “Ubicación” de la sección “Inserción” y cambiar a la pestaña “Página específica”. Desde aquí, puede elegir la opción “Insertar después de la entrada” si desea mostrar el bloque de testimonios una vez finalizada la entrada.

Una vez hecho esto, también puede configurar el número de entradas después de las cuales debe aparecer el bloque de testimonios. Por ejemplo, si escribe el número 3, el bloque de testimonios aparecerá en cada tercera entrada.

También puede mostrar el bloque entre distintos párrafos, después de extractos de entradas, etc.

Sin embargo, si no encuentra la ubicación del bloque que busca, también puede crear su propia regla lógica condicional para añadir el bloque personalizado al lugar que prefiera.

Para ello, desplácese hasta la sección “Lógica condicional inteligente” y active el conmutador “Activar lógica”.

A continuación, debe hacer clic en el botón “Añadir nuevo grupo” para empezar a crear una regla lógica condicional.

Por ejemplo, si solo desea mostrar el bloque personalizado que ha creado en una página o entrada concreta, tendrá que seleccionar la opción “URL de la página” en el menú desplegable de la derecha.

Después de eso, puede dejar el menú desplegable en el centro como está y luego añadir la URL de la página de WordPress / entrada de su elección en el campo de la izquierda.

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

Una vez hecho esto, desplácese hasta la parte superior de la página y cambie el conmutador “Inactivo” a “Activo”. A continuación, haz clic en el botón “Actualizar” para guardar tus ajustes.

Su bloque personalizado se añadirá automáticamente a todas las ubicaciones que haya seleccionado para el fragmento de código.

Ten en cuenta que el bloque personalizado que has creado no se mostrará como opción en el menú de bloques del editor Gutenberg.

Tendrá que configurar los ajustes del bloque visitando la página Fragmentos de código desde el escritorio de WordPress y haciendo clic en el enlace “Editar” situado bajo el fragmento de código del bloque.

Se abrirá la página “Editar fragmento de código”, donde podrá personalizar el bloque o cambiar su ubicación y las reglas de lógica condicional fácilmente.

Ahora, visite su sitio web para ver en acción el bloque personalizado que ha creado.

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

Método 2: Crear Bloques Personalizados para WordPress Usando el plugin de código personalizado Genesis (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.

En primer lugar, debe 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.

Hecho por la gente detrás del alojamiento WP Engine, este plugin proporciona a los desarrolladores herramientas fáciles para crear rápidamente bloques personalizados para sus proyectos.

Para este tutorial, construiremos un bloque Testimonials.

Paso 1: Crear un bloque personalizado para WordPress

En primer lugar, debe dirigirse a Bloques personalizados ” Añadir nueva página desde la barra lateral izquierda de su panel de administrador.

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

A partir de aquí, puede empezar por dar un nombre a su bloque.

Ahora, en la parte derecha de la página, encontrará las propiedades del bloque que puede configurar.

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

El slug se rellenará automáticamente basándose en 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 pueda encontrarse fácilmente.

Ahora es el momento de añadir algunos campos a tu bloque. Puede añadir distintos tipos de campos, como texto, números, direcciones de correo electrónico, URL, colores, imágenes, casillas de verificación, botones de opción, etc.

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

Basta con hacer 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 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 basándose en la etiqueta del campo. Utilizaremos este nombre de campo en el siguiente paso, así que asegúrate de que es ú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’ en el menú desplegable.
• Ubicación del campo: Puedes decidir si quieres añadir el campo al editor o al inspector.
• Texto de ayuda: Puede añadir algún texto para describir el campo. Esto no es obligatorio / requerido / necesario si está creando este bloque para su uso personal, pero puede ser útil para blogs de varios autores.

También puede ver algunas opciones adicionales basadas en 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, vamos a añadir otros 2 campos para nuestro bloque Testimonios al hacer clic en el botón ‘+’.

Si desea reordenar los campos, puede hacerlo arrastrándolos con el asa situada a la izquierda de cada etiqueta de campo. Para editar o borrar un campo en particular, debe hacer clic en la etiqueta del campo y editar las opciones en la columna derecha.

Una vez que haya terminado, sólo tiene que hacer clic en el botón “Publicar” situado en la parte derecha de la página para guardar su bloque Gutenberg personalizado.

Paso 2: Crear una plantilla de bloque personalizada

Aunque haya creado el bloque personalizado de WordPress en el último paso, no funcionará hasta que cree una plantilla de bloque.

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

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

Por otro lado, si su salida de bloque requiere que se ejecute algún PHP en segundo plano, entonces tendrá que crear manualmente un archivo de plantilla de bloque y subirlo a la carpeta de su tema.

Método 1: Utilizar el editor de plantillas incorporado

En la pantalla de edición de bloques personalizados, basta con cambiar a la pestaña “Editor de plantillas” e introducir el código HTML en la pestaña de marcado.

Puede escribir su HTML y utilizar dobles llaves para insertar valores de campo de bloque.

Por ejemplo, hemos utilizado el siguiente código HTML para el bloque de ejemplo que hemos creado 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, sólo tienes que cambiar a la pestaña ‘CSS’ para dar estilo a tu marcado de salida de bloque.

Este es el ejemplo de CSS que hemos utilizado 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: Subida manual de plantillas de bloques personalizadas

Este método se recomienda si necesita utilizar PHP para interactuar con sus campos de bloque personalizados. Deberá subir la plantilla del editor directamente a su tema.

En primer lugar, debe crear una carpeta en su ordenador y nombrarla con su slug de nombre de bloque personalizado.

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

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

Esta es la plantilla que hemos utilizado 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>

Tal vez haya advertido que hemos utilizado la función block_field( ) para obtener datos de un campo de bloque.

Hemos envuelto nuestros campos de bloque en el HTML que queremos utilizar para mostrar el bloque. También hemos añadido clases CSS para poder aplicar el estilo adecuado al bloque.

No olvides guardar el archivo dentro de la carpeta que creaste anteriormente.

A continuación, tienes que crear otro archivo con el editor de texto plano de tu ordenador y guardarlo como block.css dentro de la carpeta que has creado.

Utilizaremos este archivo para añadir el CSS necesario para dar estilo a nuestro bloque. Este es el CSS de muestra que hemos utilizado 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 los cambios.

Su carpeta de plantillas de bloques tendrá ahora dos archivos de plantilla en su interior.

A continuación, deberá subir la carpeta de bloques a su sitio web mediante un cliente FTP o la aplicación Administrador de archivos del panel de control de su cuenta de alojamiento de WordPress.

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

Si la carpeta de tu tema no tiene una carpeta llamada “bloques”, crea una nueva y llámala "bloques".

A continuación, tienes que subir la carpeta que has creado en tu ordenador a la carpeta de bloques.

Ya está. Ha creado correctamente los archivos de plantilla manual para su bloque personalizado.

Paso 3: Vista previa del bloque personalizado

Antes de poder obtener una vista previa de su HTML/CSS, deberá proporcionar algunos datos de prueba que puedan utilizarse para mostrar una salida de muestra.

Dentro del área de administrador de WordPress, edite su bloque y cambie a la pestaña “Vista previa del editor”. Aquí tienes que introducir algunos datos ficticios.

Estos datos no formarán parte de su bloque personalizado y solo se utilizarán para obtener una vista previa de los cambios realizados mediante HTML y CSS.

Una vez añadidos los datos, no olvide hacer clic en el botón “Actualizar” para guardar los cambios.

Si no hace clic en el botón “Actualizar”, no podrá ver la vista previa de su bloque personalizado.

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

Si todo le parece bien, puede volver a actualizar el bloque para guardar los cambios no guardados.

Paso 4: Usar su bloque personalizado en WordPress

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

Simplemente edita cualquier entrada o página en la que quieras utilizar este bloque. A continuación, haz clic en el botón “Añadir bloque” (+) de la esquina superior izquierda para abrir el menú de bloques.

Desde aquí, busque su bloque escribiendo su nombre o palabras clave y, a continuación, añádalo a la página/entrada.

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

Puede rellenar los campos del bloque según sea necesario.

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

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

Este es el aspecto del bloque Testimonios en nuestro sitio de prueba.

Bonificación: Cree plantillas personalizadas para sus entradas

Además de crear bloques personalizados, también puede añadir plantillas personalizadas para las entradas del blog o las páginas de su sitio web.

Una plantilla es una estructura / disposición / diseño / plantilla que puedes añadir a tus entradas para que tengan un aspecto diferente al de otras páginas y contenidos. Esto puede hacer que sus entradas sean más atractivas y visualmente atractivas y puede ayudar a generar más clientes potenciales.

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

En primer lugar, tendrás que hacer clic en el botón “Añadir bloque” (+) para añadir el bloque de grupo a la entrada. A continuación, puedes añadir cualquier bloque dentro del grupo, incluidos encabezados, medios y texto, imágenes de portada, etc.

Una vez creada la plantilla de la entrada, haz clic en el menú de tres puntos de la barra de herramientas del bloque, en la parte superior del mismo. A continuación, haz clic en el botón “Crear patrón”.

Después, tu plantilla de entradas se guardará como un bloque reutilizable. Puedes acceder a ella y añadirla a cualquier entrada abriendo el menú de bloques (+) y cambiando a la pestaña “Patrones”.

Sin embargo, tenga en cuenta que este método de creación de plantillas de entradas personalizadas permite una funcionalidad limitada. Para crear una plantilla personalizada más hermosa sin ningún código, puede utilizar SeedProd, que es el mejor maquetador de páginas del mercado.

Para más detalles, consulte nuestro tutorial sobre cómo crear plantillas personalizadas para una sola entrada en WordPress.

Esperamos que este artículo te haya ayudado a aprender cómo crear fácilmente bloques Gutenberg personalizados para tu sitio web de WordPress. Puede que también quieras ver nuestra guía sobre cómo crear un tema de WordPress personalizado desde cero o ver nuestras selecciones de expertos sobre los mejores temas de bloques para la edición completa del sitio.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.