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

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

Primero, agreguemos este script en el encabezado o pie de página:

123456 «text/javascript»>functionresizeText(multiplier) { if(document.body.body.style.fontSize == «») { document.body.style.fontSize = «1.0em»; } document.body.style.fontSize = parseFloat(document.body.style.fontSize) + (multiplier * 0.2) + «em»;}

Luego, simplemente agregue este código en cualquier parte del tema (la mayoría de la gente lo pone en la barra lateral)

1 «javascript:void(0); «onclick=»resizeText(1) «>Aumentar el texto | «javascript:void(0); «onclick=»resizeText(-1) «>Mejorar el texto

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

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

1 «text/javascript»> varc = document.getElementById(«content»); functionresizeText(multiplicador) { if(c.style.fontSize == «») { c.style.fontSize = «1.0em»; } c.style.fontSize = parseFloat(c.style.fontSize) + (multiplicador * 0.2) + «em»; }

Esto significa que sólo cambia el tamaño de la fuente en el elemento que tiene el archivo .

¿Buscando un ejemplo en vivo? Echa un vistazo al blog de Eric Wendelin.

Fuente: David Walsh

Deja un comentario