Descubre en este tutorial 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
El personalizador de WordPress es el sitio perfecto para añadir algunas opciones de los temas.Tanto es así, que Genesis ha apostado 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.
En un tutorial anterior te expliqué una manera de conseguir este resultado, pero en los nuevos temas que estamos preparando para OsomPress estamos usando una estrategia un poco más sofisticada.
Te la explico en este tutorial.
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. Añade las fuentes que quieres que estén disponibles
Para empezar, añade este fragmento en el fichero appearance.php, situado en la carpeta /config/:
Para ver este código y los otros 2057 snippets de esta web,
identifícate o suscríbete aquí.
Con la primera parte asignas las fuentes por defecto. En este ejemplo la original de Genesis Sample (3.4), Source Sans Pro, y además registras en un array las fuentes que quieres que que estén disponibles desde el personalizador de WordPress. En este caso:
- Open Sans
- Oswald
- Playfair Display
- Montserrat
- Raleway
Por supuesto, te invito a introducir o eliminar fuentes a este array según tus preferencias.
En la segunda parte sustituyes la llamada estática a Google Fonts por una llamada dinámica en la que obtendrá la fuente elegida y la cargará adecuadamente.
2. Muestras las nuevas fuentes desde el personalizador de WordPress
A continuación, en el fichero customize.php situado en la carpeta /lib/, sustituye:
$appearance = genesis_get_config( 'appearance' );por:
$appearance = genesis_get_config( 'appearance' );
$array_fonts = $appearance['array-fonts'];Y añade el siguiente código en la línea 94:
Para ver este código y los otros 2057 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.
Además, también indicas que Source Sans Pro será la que se muestre por defecto, respetando el estilo original de Genesis Sample.
3. Vincula la tipografía con la visualización final en la web
Pega este snippet al inicio del fichero output.php situado en la carpeta /lib/:
Para ver este código y los otros 2057 snippets de esta web,
identifícate o suscríbete aquí.
Con este bloque consigues que cuando se cambie la fuente desde el personalizador de WordPress se muestre en la web.
4. Modifica los ajustes desde el personalizador
¡Ya lo tienes! Solo te queda adaptarlo a tu gusto.
Dirígete al nuevo y flamante apartado Fuentes dentro del personalizador de WordPress y selecciona las tipografías desde el desplegable.
Así de simple. Tu cliente se va a quedar encantado. 😉
Conclusiones
Después de aplicar este tutorial, tu nueva versión de Genesis Sample (3.4) 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. 😉
