Home » WordPress » Cómo crear un bloque personalizado para WordPress en 10 minutos

Cómo crear un bloque personalizado para WordPress en 10 minutos

Recientemente he creado un sitio web para una clínica privada utilizando WordPress. Para simplificar al máximo la administración del sitio web, añadí algunos bloques personalizados de WordPress. Aquí te mostraré cómo crear un bloque de WordPress simple por ti mismo.

Usando las herramientas adecuadas puedes crear un bloque personalizado del editor Gutenberg de WordPress en solo unos minutos. Aquí te explico cómo hacerlo.

Cómo crear un bloque personalizado de WordPress sin salir del panel de administración de WordPress

Para crear un bloque personalizado en WordPress necesitarás descargar un plugin gratuito para WordPress llamado Bloques personalizados de Génesis. No te preocupes, no necesitas usar un tema basado en Genesis Framework para usar este plugin – funciona con cualquier tema que soporte bloques de WordPress.

Primer paso – instalar el plugin de bloques personalizados de WordPress

Vaya a Plugins >> Añadir nuevo, e instale el plugin Genesis Custom Blocks.

how to use genesis Custom Blocks

Una vez activado el plugin encontrará su configuración en el panel de administración de WordPress >> Bloques personalizados .

Segundo paso – crear campos de bloques personalizados de WordPress

Una vez activado el plugin ve a Custom Blocks >> Add New para empezar a construir tu primer bloque personalizado del editor Gutenberg.

create new wordpress block

Ahora estás en la pestaña Constructor donde harás la estructura real del bloque y definirás su nombre:

  • Introduce el nombre del bloque personalizado de WordPress en la parte superior
  • Seleccione el icono de un bloque: su nombre y su icono se mostrarán en la página o en la entrada para los editores del sitio web.
  • Los editores de WordPress normalmente buscan un bloque introduciendo su nombre. Puede especificar palabras clave adicionales para asegurarse de que los editores del sitio web encontrarán el bloque que necesitan de la forma más fácil posible.
  • Seleccione si el bloque debe mostrarse en las páginas, en las entradas o en ambos tipos de contenido.
custom gutenberg block in wordpress

El bloque de WordPress es básicamente una lista de campos. En este ejemplo crearemos cuatro campos en nuestro bloque:

  1. Campo de imagen para la imagen del doctor
  2. Campo de texto para el nombre del médico
  3. Campo de texto para una breve biografía del médico
  4. Campo de archivo para el CV del doctor – el editor del sitio web podrá subir un archivo PDF directamente en el bloque.

Para crear un nuevo campo, haga clic en el botón + y seleccione la configuración del campo:

  • Introducir etiqueta de campo
  • Introduzca el nombre del campo / slug (se utilizará en la plantilla html)
  • tipo de campo
  • anchura del campo

Algunos bloques tienen opciones adicionales como marcador de posición, texto de ayuda, etc. Así que usted puede incluso añadir instrucciones de cómo utilizar el campo directamente en el editor de WordPress.

how to create custom wordpress block

Una vez que haya añadido todos los campos pulse Publicar.

wordpress custom block in admin panel

Después de publicar el bloque personalizado se le notificará que puede añadir este archivo a su tema (haciendo clic en el icono del cuadrado rojo), o puede cambiar a la pestaña Editor de plantillas y crear el bloque HTML y el código CSS allí.

how to create custom wordpress block

Tercer paso – crear el código HTML y CSS del bloque personalizado de WordPress

Una vez que tenemos nuestra estructura de bloque de WordPress personalizado en su lugar, lo siguiente que necesitamos es crear una plantilla HTML para ello. La plantilla se utiliza para mostrar el bloque personalizado a los visitantes del sitio web.

Una vez que esté en la pestaña Editor de plantillas, haga clic en Marcado y cree la estructura HTML que desee.

Best WordPress hosting 2024

Para mostrar los valores de campo, encierre el slug del campo entre 2 corchetes. Por ejemplo {{doctor-image}}, {{cv-file}}, etc.

Puede consultar más información sobre el uso y marcado de campos en la documentación oficial del plugin aquí.

wordpress custom block html

Para añadir estilos CSS a su bloque, haga clic en CSS en la misma pestaña del Editor de Plantillas.

wordpress custom block styling

Eso es todo – su bloque personalizado de WordPress está listo para usar.

Si alguna vez quieres editar el estilo, el marcado html o los campos personalizados, siempre puedes editar tu bloque personalizado de WordPress en la lista de Bloques Personalizados. Así que no te preocupes si no estás seguro de cómo debe ser tu bloque – puedes actualizarlo más tarde.

Cómo usar el bloque personalizado de WordPress en páginas y entradas

Para empezar a usar tu bloque creado en WordPress sólo tienes que ir a la página o entrada que quieras, y añadir el bloque de la misma forma que añades cualquier otro bloque.

Haz clic en + donde quieras que aparezca el bloque, introduce el nombre del bloque y elígelo.

create custom block in wordpress

Rellena tu nuevo bloque. Los datos serán visibles de la misma forma que en los bloques nativos de WordPress, por lo que los administradores del sitio web de tu cliente no tendrán ningún problema para utilizarlos.

wordpress custom blocks

Puedes añadir tantos bloques personalizados como quieras en la misma página o entrada.

¡Disfruta de tu nuevo bloque personalizado en WordPress!

Como ves, añadir nuevos bloques personalizados en WordPress es realmente fácil y sencillo. Sólo necesitas el plugin adecuado, algunos conocimientos básicos de HTML y CSS, y podrás construir cualquier cosa con WordPress sin engorrosos constructores de páginas de terceros.

how to create custom gutenberg blocks in wordpress

Puede crear tantos bloques personalizados de WordPress como desee, añadirles estilos desde el panel de administración de WordPress y crear sitios web personalizados de WordPress sin salir del panel de administración de WordPress.

Tags:

Fathom analytics - privacy focused cookie-free website analytics

Most popular tutorials


Get our latest WordPress news and special offers from RockSolidWP!

Only useful WordPress and WooCommerce tips and tricks and exclusive offers for our readers once a month. No marketing nonsense.

Looking for reliable yet affordable WordPress hosting?
Hostinger is the way to go!

Get 10% OFF by using code IMAKEITWORK