Descubre cómo incluir en el personalizador de WordPress la posibilidad de escoger la tipografía principal en Genesis Sample mediante código.
Actualización: Te recomiendo usar este tutorial más actualizado en el que además de la fuente del cuerpo podrás seleccionar también la de los encabezados.
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 modo de ejemplo, aquí vas a aprender cómo agregar la opción de elegir la fuente del cuerpo desde el personalizador en Genesis Sample.
Resultado final del tutorial
Cuando lo apliques, obtendrás un nuevo apartado en el personalizador llamado Fuente. Dentro del mismo, encontrarás la sección «Fuente del cuerpo» con un desplegable donde seleccionar la tipografía. ¿Lo mejor de todo? Podrás ver los cambios a tiempo real.
Instrucciones para insertar la opción de escoger la fuente 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 en la línea 90:
Para ver este código y los otros 2055 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.
Usando el ejemplo superior, incluyes en el desplegable: Source Sans Pro, Open Sans, Oswald, Playfair Display, Montserrat y Raleway, con sus respectivas variaciones.
Por supuesto, te invito a introducir o eliminar fuentes a este array según tus preferencias.
2. Edita el fichero functions.php
Pega este snippet al final de functions.php:
Para ver este código y los otros 2055 snippets de esta web,
identifícate o suscríbete aquí.
Con este bloque añades la función que permite 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.
A continuación, sustituye este fragmento en functions.php:
Para ver este código y los otros 2055 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 array anterior.
3. 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 la tipografía principal del tema desde el desplegable.
Así de simple. Tu cliente se va a quedar encantado. 😉
Conclusiones
Aunque necesitas añadir y modificar varios snippets, siguiendo este tutorial paso a paso conseguirás agregar la posibilidad de escoger la fuente del cuerpo desde el propio personalizador de WordPress en Genesis Sample.
Como resultado, tu nueva versión de Genesis Sample tendrá incorporada la sección Fuente, donde podrás elegir la tipografía principal del child theme.
Esto será muy útil para tus clientes, ya que les permitirá realizar cambios de forma sencilla y ver el efecto a tiempo real.
Si además de seleccionar la fuente del cuerpo también quieres decidir la de los encabezados, solo tienes que decírmelo en los comentario para que prepare un tutorial.
Ventajas de estar dentro de Código Genesis.😉
