Så här ändrar du teckensnitt påClick i WordPress med JavaScript

Har du någonsin stött på en webbplats eller blogg som låter deras besökare ändra teckensnittstorlek från någon +/- knapp i sidofältet? Normalt borde du aldrig behöva lägga till den här funktionen eftersom alla större webbläsare har zoom in / zoom-ut-knapparna, men det finns fortfarande ett stort antal användare som inte känner till zoomfunktionen. Tja i den här artikeln kommer vi att visa dig hur du kan ge dina användare möjligheten att ändra teckensnittstorleken i WordPress med en enkel JavaScript-funktion och lite HTML.

Först kan vi lägga till det här skriptet i din rubrik eller sidfot:

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

Lägg sedan enkelt till den här koden var som helst i ditt tema (de flesta lägger det i sidofältet)

 Gör texten större | Gör text mindre 

Du kan också använda bilder som +/- ikoner eller andra om du vill. För att allt detta ska vara möjligt måste du ange typsnittstorleken för ditt HTML-element.

Alternativt, om du vill begränsa det område där fontstorleken skulle inkluderas (till exempel: bara ditt innehållsområde), ändra sedan det ursprungliga javascript för att vara något så här:

 var c = document.getElementById ("innehåll"); funktion resizeText (multiplikator) if (c.style.fontSize == "") c.style.fontSize = "1.0em";  c.style.fontSize = parseFloat (c.style.fontSize) + (multiplikator * 0.2) + "em";  

Det betyder att du bara ändrar teckensnittstorleken i det element som har id = "content".

Letar du efter ett levande exempel? Kolla in Eric Wendelins blogg.

Källa: David Walsh