SÄ hÀr Àndrar du teckensnittsstorlek pÄKlicka pÄ WordPress med JavaScript

SÄ hÀr Àndrar du teckensnittsstorlek pÄKlicka pÄ WordPress med JavaScript

Har du nÄgonsin stött pÄ en webbplats eller blogg som lÄter sina besökare Àndra teckenstorleken frÄn nÄgon +/- knapp i sidofÀltet? Normalt bör du aldrig behöva lÀgga till den hÀr funktionen eftersom alla större webblÀsare har zoom in / zoom ut-knapparna, men det finns fortfarande ett stort antal anvÀndare som inte kÀnner till den zoomfunktionen. NÄvÀl i den hÀr artikeln kommer vi att visa dig hur du kan ge dina anvÀndare möjlighet att Àndra teckenstorlek i WordPress med en enkel JavaScript-funktion och lite HTML.

LÄt oss först lÀgga till detta skript i din sidhuvud eller sidfot:

<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>

LÀgg sedan helt enkelt till den hÀr koden var som helst i ditt tema (de flesta lÀgger den i sidofÀltet)


<a href="javascript:void(0);" onclick="resizeText(1)" id="plustext">Make text bigger</a> | <a href="javascript:void(0);" onclick="resizeText(-1)" id="minustext">Make text smaller</a>

Du kan ocksÄ anvÀnda bilder som +/- ikoner eller andra om du vill. För att allt detta ska vara möjligt mÄste du ange teckenstorlek för ditt html-element.

Alternativt, om du vill begrÀnsa omrÄdet dÀr teckensnittsstorleken skulle ingÄ (till exempel: bara ditt innehÄllsomrÄde), Àndra sedan det ursprungliga javaskriptet till att vara ungefÀr sÄ hÀr:

<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>

Detta innebĂ€r att du bara Ă€ndrar teckensnittsstorleken i det element som har id = ”content”.

Letar du efter ett liveexempel? Kolla in Eric Wendelins blogg.

KĂ€lla: David Walsh