Come cambiare la dimensione del carattere onClick in WordPress con JavaScript

Ti sei mai imbattuto in un sito o blog che consente ai visitatori di cambiare la dimensione del carattere da qualche pulsante +/- nella barra laterale? Normalmente, non dovresti mai aggiungere questa funzione perché tutti i principali browser hanno i pulsanti di ingrandimento / riduzione, ma c'è ancora un buon numero di utenti che non hanno familiarità con quella funzione di zoom. Bene in questo articolo, ti mostreremo come dare ai tuoi utenti la possibilità di cambiare la dimensione del font in WordPress usando una semplice funzione JavaScript e alcuni HTML.

Prima di tutto, aggiungi questo script nell'intestazione o nel piè di pagina:

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

Quindi aggiungi semplicemente questo codice ovunque nel tuo tema (la maggior parte delle persone lo mette nella barra laterale)

 Ingrandisci il testo | Rendi il testo più piccolo 

Puoi anche usare immagini come +/- icone o altri se vuoi. Affinché tutto ciò sia possibile, è necessario specificare la dimensione del carattere per il proprio elemento html.

In alternativa, se si desidera limitare l'area in cui sarebbe inclusa la dimensione del font (ad esempio: solo l'area del contenuto), quindi modificare il javascript originale in modo che sia simile al seguente:

 var c = document.getElementById ("content"); function resizeText (moltiplicatore) if (c.style.fontSize == "") c.style.fontSize = "1.0em";  c.style.fontSize = parseFloat (c.style.fontSize) + (moltiplicatore * 0,2) + "em";  

Ciò significa che solo la modifica della dimensione del carattere nell'elemento con ID = "contenuto".

Stai cercando un esempio dal vivo? Dai un'occhiata al Blog di Eric Wendelin.

Fonte: David Walsh