Comment changer la taille de la police onClick dans WordPress avec JavaScript

Avez-vous déjà rencontré un site ou un blog permettant aux visiteurs de modifier la taille de la police à partir d’un bouton +/- dans la barre latérale? Normalement, vous ne devriez jamais avoir à ajouter cette fonctionnalité car tous les principaux navigateurs disposent des boutons de zoom avant / zoom arrière, mais de nombreux utilisateurs ne sont pas encore familiarisés avec cette fonctionnalité de zoom. Dans cet article, nous allons vous montrer comment donner à vos utilisateurs la possibilité de modifier la taille de la police dans WordPress à l'aide d'une simple fonction JavaScript et de HTML..

Premièrement, ajoutons ce script dans votre en-tête ou votre pied de page:

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

Ensuite, ajoutez simplement ce code n'importe où dans votre thème (la plupart des gens le mettent dans la barre latérale)

 Agrandir le texte | Réduire le texte 

Vous pouvez également utiliser des images telles que les icônes +/- ou autres si vous le souhaitez. Pour que tout cela soit possible, vous devez spécifier la taille de la police pour votre élément html.

Sinon, si vous souhaitez limiter la zone dans laquelle la taille de la police serait incluse (par exemple, uniquement votre zone de contenu), modifiez le code JavaScript d'origine pour qu'il ressemble à ceci:

 var c = document.getElementById ("contenu"); function resizeText (multiplier) if (c.style.fontSize == "") c.style.fontSize = "1.0em";  c.style.fontSize = parseFloat (c.style.fontSize) + (multiplicateur * 0.2) + "em";  

Cela signifie que vous ne modifiez que la taille de la police dans l'élément ayant id = "contenu"..

Vous cherchez un exemple en direct? Découvrez le blog d'Eric Wendelin.

Source: David Walsh