n-wp.ru — блог о WordPress

Создание ссылок для изменения размера текста на странице

Инструкция о том, как сделать ссылки для изменения размера шрифта на страницах блога. Используется jQuery-скрипт.

Иногда бывает удобно предоставить посетителям две кнопки для изменения размера шрифта на просматриваемой странице. Можно, конечно, подключить специальный плагин, делающий это, а можно и без него обойтись.

Этот способ работает, если у вас подключена библиотека скриптов jQuery. Откройте папку используемой вами темы, и создайте в ней папку js — в нее будет записан скрипт. Что, такая папка уже существует? Значит используйте уже существующую. Создайте в папке js текстовый файл resize.js, и вставьте в него этот код:

Это код, плавно увеличивающий размер шрифта на странице блога. Минимальный размер шрифта — 8px, максимальный 56px, шаг изменения — 1px. Эти параметры записаны в строчке

— их можно поменять. Текст, размер которого изменяется, должен иметь класс resize.

Теперь нужно этот скрипт подключить. Для этого вставьте в файл functions.php:

Обычно изменять размер шрифта требуется на отдельной странице поста. Значить нужно внедрить в файл single.php, отвечающий за то, как выглядит пост, две ссылки, кликая по которым можно уменьшать или увеличивать размер шрифта:

Скрипт изменяет размер шрифта не всего текста на странице, а только того, который выводится с помощью элемента с классом resize. Значит нужно добавить этот класс к элементу, текст которого должен меняться. Например, файл single.php дефолтной темы Twenty Twelve, выводит содержимое поста в элементе

Если к нему добавить класс resize, то скрипт будет менять размер текста, который этот элемент содержит:

Таким образом можно регулировать изменение размеров шрифта текста на странице, позволяя изменять размер одного текста, и при этом оставлять размер другого текста постоянным.

2 комментария