In questo tutorial WordPress vedremo come inserire un comando (link) per cambiare la dimensione del testo agli articoli presenti nel famoso sistema di gestione contenuti. Permettere all’utente di modificare la dimensione del testo consente di aumentare l’usabilità della piattaforma, rendendo il prodotto conforme agli standard e quindi di una qualità maggiore.
Notabene: i moderni browser incorporano già funzioni di ingrandimento e riduzione del testo, tuttavia alcuni utenti la trovano non molto comoda. L’operazione di codifica supplementare per implementare questa nuova funzione è semplice e veloce, ed avviene tramite codice JavaScript.
[STEP 1] – La modifica del footer o dell’header
La prima cosa che dobbiamo fare è iniettare nel nostro header o nel nostro footer il seguente codice JavaScript:
[html]<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>[/html]
Il passo “più difficile” è stato compiuto: è stata inglobata una funzione che modifica le dimensioni del testo in WordPress.
[STEP 2] – Il posizonamento dei link
Ora viene la parte di stile: con un piccolo markup HTML indichiamo dove vogliamo che i link appaiano. Il posizionamento può avvenire nella parte del tema desiderata, tuttavia alcuni utenti inseriscono codifiche di questo tipo nella sidebar.
[html]<a href="javascript:void(0);" onclick="resizeText(1)" id="plustext">testo più piccolo</a> | <a href="javascript:void(0);" onclick="resizeText(-1)" id="minustext">testo più grande</a>[/html]
Il markup HTML può essere personalizzato a piacere con icone, pulsanti e altro.
[STEP 3] – Il resize di porzioni pagina determinate
È possibile definire un’area della pagina che dovrà essere soggetta al resize del testo: ad esempio possiamo stabilire che l’unica parte interessata dovrà essere il DIV content centrale, indicato con l’ID apposito.
[html]<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>[/html]
Attraverso questa stringa:
[html]var c = document.getElementById("content");[/html]
abbiamo specificato che l’unica parte ad essere oggetto delle modifiche sarà quella marcata con l’ID “content”.
