Cómo cambiar el tamaño de fuente onClick en WordPress con JavaScript

¿Alguna vez te has topado con un sitio o blog que les permite a sus visitantes cambiar el tamaño de fuente desde algún botón +/- en la barra lateral? Normalmente, nunca debería tener que agregar esta función porque todos los navegadores principales tienen los botones de acercar / alejar, pero todavía hay un buen número de usuarios que no están familiarizados con esa función. En este artículo, le mostraremos cómo dar a sus usuarios la posibilidad de cambiar el tamaño de fuente en WordPress utilizando una función de JavaScript simple y algo de HTML..

Primero vamos a agregar este script en su encabezado o pie de página:

function resizeText (multiplicador) if (document.body.style.fontSize == "") document.body.style.fontSize = "1.0em";  document.body.style.fontSize = parseFloat (document.body.style.fontSize) + (multiplicador * 0.2) + "em"; 

Luego simplemente agregue este código en cualquier lugar de su tema (la mayoría de las personas lo colocan en la barra lateral)

 Hacer el texto más grande | Hacer el texto más pequeño 

También puede usar imágenes como iconos +/- u otros si lo desea. Para que todo esto sea posible, debe especificar el tamaño de fuente para su elemento html.

Alternativamente, si desea limitar el área donde se incluiría el tamaño de la fuente (por ejemplo: solo su área de contenido), cambie el javascript original para que sea algo como esto:

 var c = document.getElementById ("contenido"); function resizeText (multiplicador) if (c.style.fontSize == "") c.style.fontSize = "1.0em";  c.style.fontSize = parseFloat (c.style.fontSize) + (multiplicador * 0.2) + "em";  

Esto significa que solo cambia el tamaño de fuente en el elemento que tiene el id = "contenido".

¿Buscas un ejemplo en vivo? Echa un vistazo a el blog de Eric Wendelin.

Fuente: David Walsh