Меняем размер шрифта по клику в WordPress с помощью JavaScript

Вы когда-нибудь попадали на сайт или блог, который позволял своим посетителям изменять размер шрифта кнопками +/- в сайдбаре? Естественно, у вас не было необходимости добавлять эту функцию, потому что у большинства браузеров такая возможность встроена (Масштаб, клавиши Ctrl + +, Ctrl + -,Ctrl + 0), однако все щее большой процент людей не знают о ней. В этой статье мы расскажем вам как предоставить возможность вашим пользователям изменять шрифт в WordPress с помощью небольшой функции 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>

Затем просто добавьте следующий код в любое место вашей темы (большинство добавляют его в сайдбар)

<a href="javascript:void(0);" onclick="resizeText(1)" id="plustext">Сделать текст больше</a> | <a href="javascript:void(0);" onclick="resizeText(-1)" id="minustext">Сделать текст меньше</a>

Также можно использовать картинки вида +/- или любые другие, на ваше усмотрение. Для того, чтобы все это стало возможным, вам необходимо указать размер шрифта (font-size) для элементов в html .

Или же, если вы хотите ограничить область, где font-size будет применяться (к примеру, только область расположения основного контента), тогда измените оригинальный javascript на что-то вроде этого:

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

Изменения означают, что вы измените только размер шрифта для элемента, у которого id=”content”.