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.
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.
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.
El bloque de WordPress es básicamente una lista de campos. En este ejemplo crearemos cuatro campos en nuestro bloque:
- Campo de imagen para la imagen del doctor
- Campo de texto para el nombre del médico
- Campo de texto para una breve biografía del médico
- 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.
Una vez que haya añadido todos los campos pulse Publicar.
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í.
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.
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í.
Para añadir estilos CSS a su bloque, haga clic en CSS en la misma pestaña del Editor de Plantillas.
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.
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.
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.
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.
