Aprende en este tutorial cómo crear un estilo de bloque personalizado que parezca una libreta o cuaderno cuadriculado en WordPress.
Ya sabes que soy muy partidario de sacarle partido a los estilos de bloques.
En este tutorial vas a ver cómo crear un estilo de bloque personalizado que simule ser un cuaderno cuadriculado, de los de tomar notas de toda la vida. Que combinado con una tipografía del estilo de escrita a mano puede conseguir un efecto muy artesano.
Este sería el resultado final:
Vamos a ver cómo conseguirlo:
Pasos para crear un estilo personalizado que parezca un cuaderno de cuadrícula
1. Registra el nuevo estilo
Añade el siguiente snippet al fichero functions.php o a tu plugin de funcionalidades:
Para ver este código y los otros 2063 snippets de esta web,
identifícate o suscríbete aquí.
Con este código estás registrando un nuevo estilo de bloque que se llama «Osom Handwritten Note» que mostrará un diseño de hoja de cuaderno cuadriculado.
En el mismo indicas el nombre del bloque al que vas añadir el nuevo estilo, en este caso el de párrafo (core/paraghaph) y defines 3 parámetros:
name: nombre interno que también otorgará la clase CSS.label: etiqueta utilizada para el nombre que se muestra en el editor.inline_style: CSS en línea que se aplicará.
Obviamente puedes personalizar estos parámetros a tu gusto. Ahora, vamos a ver qué debes tener en cuenta para modificar el CSS.
2. Personaliza el CSS
A la hora de registrar el nuevo estilo de bloque has otorgado un nombre (name) que se traduce en una clase CSS. Concretamente:
is-osom-handwritten-note
Por lo tanto, esa clase se añadirá cuando elijas ese estilo de bloque y es la que utilizas para indicarle que muestre el diseño de cuaderno cuadriculado.
Para ver este código y los otros 2063 snippets de esta web,
identifícate o suscríbete aquí.
Añadir el CSS en línea al tiempo que registras el bloque tiene dos ventajas muy interesantes:
- El CSS se aplica tanto en el frontend como en el backend, es decir, verás lo cambios también en el editor sin necesidad de hacer nada extra.
- El CSS solo se carga cuando se usa ese bloque, concretamente cuando se usa el estilo de bloque.
Y recuerda que esto es un simple ejemplo en que te puedes inspirar, puedes modificar el CSS para conseguir el efecto que quieras.
3. Selecciona el estilo de bloque
Lo único que te falta es añadir un bloque de párrafo y escribir lo que quieras.
Para que se aplique el nuevo estilo que has creado solo tienes que ir a Bloque > Estilos y seleccionarlo.
Conclusiones
Ya ves cómo con un poco de código puedes conseguir un diseño como si fuera un cuaderno de apuntes que puedes usar para darle un toque más artesano a tu web.
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. 😉
