Cum de a schimba dimensiunea fontului onClick în WordPress cu JavaScript

Ați întâlnit vreodată un site sau un blog care îi permite vizitatorilor să modifice dimensiunea fontului de la un buton +/- în bara laterală? În mod normal, nu trebuie să adăugați această caracteristică, deoarece toate browserele majore au butoanele zoom / zoom out, dar există încă un număr bun de utilizatori care nu sunt familiarizați cu această caracteristică de zoom. Ei bine, în acest articol, vă vom arăta cum să oferiți utilizatorilor abilitatea de a schimba dimensiunea fontului în WordPress folosind o funcție simplă JavaScript și câteva coduri HTML.

Mai întâi permiteți adăugarea acestui script în antetul sau subsolul dvs.:

funcția resizeText (multiplicator) if (document.body.style.fontSize == "") document.body.style.fontSize = "1.0em";  document.body.style.fontSize = parseFloat (document.body.style.fontSize) + (multiplicator * 0.2) + "em"; 

Apoi pur și simplu adăugați acest cod oriunde în tema dvs. (majoritatea oamenilor au pus-o în bara laterală)

 Faceți textul mai mare Faceți textul mai mic 

De asemenea, puteți utiliza imagini, cum ar fi pictogramele +/- sau altele, dacă doriți. Pentru ca toate acestea să fie posibile, va trebui să specificați dimensiunea fontului pentru elementul dvs. html.

În mod alternativ, dacă doriți să limitați zona în care va fi inclus dimensiunea fontului (de exemplu: doar zona dvs. de conținut), schimbați javascript-ul original ca fiind ceva de genul:

 var c = document.getElementById ("conținut"); funcția resizeText (multiplicator) if (c.style.fontSize == "") c.style.fontSize = "1.0em";  c.style.fontSize = parseFloat (c.style.fontSize) + (multiplicator * 0.2) + "em";  

Aceasta înseamnă că numai dimensiunea fontului se modifică în elementul care are id = "content".

Căutați un exemplu live? Check out blogul lui Eric Wendelin.

Sursa: David Walsh