Descubre cómo incluir en el personalizador de WordPress la posibilidad de elegir la fuente del cuerpo y los encabezados para Genesis Sample mediante código.
Beneficios de insertar opciones en el personalizador de WordPress
Con el tiempo, WordPress está dándole cada vez más peso al personalizador con el objetivo de mejorar la experiencia de usuario.
Tanto es así, que Genesis está apostando por mover a él muchos de sus ajustes.
Y es que el personalizador ofrece muchas ventajas:
- Es intuitivo.
- Resulta muy fácil de usar.
- Permite visualizar los cambios a tiempo real.
Por lo tanto, si quieres dar más autonomía y control a tu cliente, merece la pena que introduzcas los elementos básicos en el personalizador de WordPress.
A raíz del tutorial que permitía modificar la fuente de cuerpo de texto en Genesis Sample desde el personalizador, un suscriptor me preguntó si también se podía agregar la opción de elegir la tipografía de los encabezados.
Dicho y hecho. 😉
Resultado final del tutorial
Cuando lo apliques, obtendrás un nuevo apartado en el personalizador llamado Fuentes, con 2 secciones:
- «Fuente de los títulos», con un desplegable para seleccionar la fuente de los encabezados (H1, H2…).
- «Fuente del cuerpo», que incluye un desplegable para escoger el texto del cuerpo.
¿Lo mejor de todo? Podrás ver los cambios a tiempo real.
Suena bien, ¿verdad?
Aprende paso a paso como conseguirlo:
Instrucciones para insertar la opción de elegir múltiples fuentes desde el personalizador en Genesis Sample
1. Modifica el archivo customize.php
En primer lugar, añade el siguiente código al fichero customize.php (situado dentro de la carpeta /lib/) en la línea 90:
Para ver este código y los otros 2017 snippets de esta web,
identifícate o suscríbete aquí.
Con este bloque agregas el nuevo apartado y sección de las fuentes en el personalizador.
Además, insertas un array con las tipografías que quieres que aparezcan en el desplegable del personalizador, tanto para los encabezados como para el cuerpo.
Usando el ejemplo superior, incluyes: Source Sans Pro, Open Sans, Oswald, Playfair Display, Montserrat y Raleway, con sus respectivas variaciones.
Por un lado te aseguras de añadir las tipografías del child theme:
- Sans Source Pro (títulos y cuerpo)
además de:
- Open Sans
- Oswald
- Playfair Display
- Montserrat
- Raleway
con sus respectivas variaciones.
Por supuesto, te invito a introducir o eliminar fuentes a este array según tus preferencias.
2. Vincula la tipografía con la visualización final en la web
Pega este snippet al final del fichero customize.php:
Para ver este código y los otros 2017 snippets de esta web,
identifícate o suscríbete aquí.
Con este bloque añades las funciones que permiten cambiar la fuente según se dictamine desde el personalizador de WordPress.
Además, también indicas que Source Sans Pro será la que se muestre por defecto, respetando el estilo original de Genesis Sample.
3. Cambiar las fuentes que se cargan en el tema
A continuación, añade este fragmento en el fichero appearance.php, situado en la carpeta /config/:
Para ver este código y los otros 2017 snippets de esta web,
identifícate o suscríbete aquí.
Con esto consigues que se cargue, no solo la fuente por defecto (Source Sans Pro), sino el resto de tipografías incluidas en el fichero del personalizador de WordPress, tanto para los encabezados como para el cuerpo.
Además, elimina o comenta la siguiente línea:
'fonts-url' => 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,600,700&display=swap',
4. Modifica los ajustes desde el personalizador
¡Ya lo tienes! Solo te queda adaptarlo a tu gusto.
Dirígete al nuevo y flamante apartado Fuente dentro del personalizador de WordPress y selecciona las tipografías desde el desplegable.
Así de simple. Tu cliente se va a quedar encantado. 😉
Conclusiones
Como ves, los pasos son muy similares a cuando agregamos solo la posibilidad de escoger la fuente del cuerpo desde el personalizador, pero con este código también añades la personalización de los encabezados.
Como resultado, tu nueva versión de Genesis Sample tendrá incorporada la sección Fuentes, desde donde podrás elegir tanto la tipografía del cuerpo como la de los encabezados.
Esto será muy útil para tus clientes, ya que les permitirá realizar cambios de forma sencilla y ver el efecto a tiempo real.
¿Tienes alguna pregunta o quieres darme otra sugerencia parecida a esta para futuros tutoriales? Déjala en los comentarios.
Ventajas de ser suscriptor.😉