Aprende en este tutorial cómo crear un bloque personalizado para WordPress utilizando el plugin Genesis Custom Blocks.
Aunque cada vez hay una mayor variedad de bloques disponibles en el repositorio de WordPress, en algunas ocasiones es más interesante poder crear uno personalizado.
Esto resulta especialmente útil en proyectos con requisitos muy particulares.
Pero crear un bloque para WordPress de forma nativa requiere ciertos conocimientos de Javascript y bastante tiempo.
¿Una solución?
👉 Genesis Custom Blocks, un plugin gratuito del repositorio de WordPress que te permite crear bloques personalizados con HTML, CSS y PHP.
Nota: no te dejes engañar por el nombre del plugin, porque puedes utilizarlo con cualquier tema de WordPress (es decir, no necesitas Genesis Framework).
En este tutorial vas a ver paso a paso cómo crear un bloque con Genesis Custom Blocks para añadir miembros de un equipo.
¡Y esto es solo un ejemplo de todo lo que puedes hacer con este plugin!
¿Empezamos?
Pasos para crear un bloque personalizado en WordPress con Genesis Custom Blocks
1. Crea un bloque en Genesis Custom Blocks
Una vez que hayas instalado y activado el plugin Genesis Custom Blocks, ve al menú de la derecha de WordPress:
«Bloques personalizados» > «Añadir nuevo»
Y aquí introduce el nombre del bloque.
A continuación, añade los campos que quieres que tenga el bloque. En este ejemplo vas a ver cómo crear un bloque que sirva para añadir miembros de un equipo con:
- Fotografía
- Nombre
- Posición
Para cada campo puedes elegir varias opciones como:
- Etiqueta del campo
- Nombre del campo
- Tipo de campo
- Ubicación del campo
- Anchura del campo
- Texto de ayuda
Rellena los 3 campos como ves en las capturas de pantalla:
Una vez que hayas terminado de añadir los campos también puedes elegir en las propiedades del bloque:
- Slug
- Icono
- Nombre
- Palabras clave
Es importante que utilices un icono y nombre intuitivos para que el bloque sea fácil de buscar e identificar desde el editor. Utiliza también las palabras clave para mejorar la búsqueda.
¿Ya lo tienes todo? Es hora de publicar el bloque. 😉
Y justo cuando lo hagas verás un aviso invitándote a dar el siguiente paso:
2. Crea una plantilla de bloque
Una vez has creado y publicado el bloque debes generar una plantilla donde se muestren los campos.
Para ello, crea una carpeta llamada block en la raíz de tu tema y dentro de ella añade un fichero llamado block-miembro-del-equipo.php con este snippet:
Para ver este código y los otros 2017 snippets de esta web,
identifícate o suscríbete aquí.
Si estás usando Genesis Sample, esta sería la ruta del bloque:
/wp-content/themes/genesis-sample/blocks/block-miembro-del-equipo.php
Es decir, la ruta será:
/wp-content/themes/tu-tema/blocks/block-slug-del-bloque.php
Solo tendrás que cambiar la parte en negrita.
En cualquier caso, el plugin te indica la ruta al publicar el bloque, así que te lo pone fácil. 😉
Como puedes comprobar, el código para mostrar los campos es bastante sencillo. Solo tienes que «llamar» al campo que has creado mediante PHP (usando block_field()
) y dotarle de la estructura HTML que quieres.
En este caso la estructura es:
- Un div que englobe todo (y añada el campo «Avanzado» donde añadir la(s) «Clase(s) CSS adicional(es)» al bloque)*
- Una imagen
- Un H2 con el nombre
- Un H3 con la posición
* el fragmento <?php block_field('className'); ?>
es el responsable de conseguir este punto.
3. Añade el bloque personalizado desde editor de WordPress
Una vez tienes listo el bloque y la plantilla, ya puedes buscar el bloque en el editor de WordPress.
Selecciona el bloque y rellena los campos:
En el apartado «Avanzado» de los ajustes del bloque, añade la clase CSS para personalizar mejor el resultado del bloque en la parte frontal de la web. En concreto, en este ejemplo se añade la clase miembro-equipo
.
Con esto ya tendrías suficiente para mostrar el contenido del bloque, pero con un poco de CSS puedes mejorar el resultado final.
4. Otorga estilos mediante CSS
Ahora solo te queda usar la clase de CSS que añadiste en el paso anterior para dar el diseño que quieres.
Si quieres seguir este ejemplo, añade lo siguiente al final del fichero style.css:
Para ver este código y los otros 2017 snippets de esta web,
identifícate o suscríbete aquí.
Y este sería el resultado final combinando el bloque nativo de columnas con el bloque personalizado de equipo que acabas de crear con Genesis Custom Blocks:
Esto es un simple ejemplo de lo que puedes conseguir creando tus propios bloques personalizados.
Así que, ¡dale rienda suelta a tu imaginación! 😉
Conclusiones
Si sumas las posibilidades que te otorga el editor de bloques de WordPress con la capacidad de crear bloques personalizados, ya casi no habrá límites para lo que puedes hacer con él.
¿Mejor aún? Ahora ya sabes cómo crear bloques personalizados sin tener que usar Javascript, solo usando PHP (más un poco de HTML y CSS) gracias al plugin Genesis Custom Blocks.
Si tienes alguna duda te leo en los comentarios. Y si quieres dejarme una sugerencia para futuros tutoriales, envíamela a través del formulario de contacto.
Todo ventajas de ser suscriptor. 😉