• Programmazione » WordPress » Tutorial WordPress

Vediamo come cambiare la dimensione del testo utilizzando un po' di Javascript e markup HTML.

La possibilità di modificare le dimensioni del testo in WordPress è un’opzione aggiuntiva che dona maggiore usabilità alla piattaforma. Se è vero che i moderni browser incorporano in modo nativo opzioni di ingrandimento e riduzione de testo, è anche vero che molti utenti non hanno molta dimestichezza con le stesse.

Nel seguente tutorial vedremo come cambiare la dimensione del testo in WordPress con un piccola porzione di JavaScript e un po’ di markup HTML.

La prima cosa che dobbiamo fare è incollare il seguente codice nel footer o nell’header del tema:

<script type="text/javascript">function resizeText(multiplier) {  if (document.body.style.fontSize == "") {    document.body.style.fontSize = "1.0em";  }  document.body.style.fontSize = parseFloat(document.body.style.fontSize) + (multiplier * 0.2) + "em";}</script>

La parte appena compiuta è stata a più difficile. La seconda operazione da compiere è l’implementazione del markup HTML. Il codice che andremo a produrre può essere inserito in qualsiasi parte del nostro tema WordPress, tuttavia la maggior parte degli utenti lo “incolla” nella sidebar. Eccolo:

<a href="javascript:void(0);" onclick="resizeText(1)" id="plustext">rendi il testo più grande</a> | <a href="javascript:void(0);" onclick="resizeText(-1)" id="minustext">rendi il testo più piccolo</a>

Il markup in alto è solo un esempio di quello che è possibile fare: il markup del resize testi su WordPress può essere più strutturato, magari tramite fogli di stile e con l’aggiunta di bottoni o icone.

È anche possibile delimitare le singole aree che dovranno essere soggette a cambiamenti. Possiamo quindi decidere di applicare tali proprietà solo a parti del documento specificamente marcate, come gli ID dei vari DIV.

<script type="text/javascript"> var c = document.getElementById("content"); function resizeText(multiplier) { if (c.style.fontSize == "") { c.style.fontSize = "1.0em"; } c.style.fontSize = parseFloat(c.style.fontSize) + (multiplier * 0.2) + "em"; } </script>

Come si evince nella stringa

var c = document.getElementById("content"); 

la sola parte ad essere interessata dal cambiamento sarà il DIV che ha come ID il nome “content”.