n-wp.ru — блог о WordPress
Скрипт для WordPress, позволяющий читателям на лету менять размер текста | n-wp.ru

Скрипт для WordPress, позволяющий читателям на лету менять размер текста

Скрипт для WordPress, позволяющий читателям на лету менять размер текста

Известно, что одной из самых востребованных на сегодняшний день CMS в среде специалистов по сайтостроению является система WordPress. А если дополнить ее скриптами на основе jQuery, то можно в результате получить систему с практически неограниченными возможностями.

Давайте предоставим читателям возможность на лету изменять размер шрифта, которым написан текст поста — это удобно для тех, кто читает посты на больших и маленьких экранах, а так же для тех, у кого есть проблемы со зрением. Создадим две ссылки для контроля изменения размеров текста, A+ и A-, кликая по которым, читатель может плавно изменяет размер шрифта.

Чтобы символы могли менять размеры, код следует обрабатывать с помощью элемента DIV определенного класса. Для примера будем использовать стандартную тему Twenty Twelve — выделим в файле single.php текст, размер которого должен изменяться, элементом DIV с классом resize:

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

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

Давайте заставим эти две ссылки работать. Для этого добавим jQuery к теме. В папке темы js создадим файл JavaScript с именем resize.js. Добавим в него код:

Этот скрипт меняет размер шрифта. Каждый клик по ссылке увеличивает/уменьшает шрифт на 2 px. Минимальный размер шрифта равен 8 px, максимальный — 100 px.

Связываем скрипт resize.js с классом resize элемента DIV. В файл functions.php добавляем сниппет с кодом:

Теперь с помощью кнопок читатель может на лету изменять размер шрифта, которым написан пост.

Источник: Creating a WordPress Post Text Size Changer Using jQuery

Комментировать

/* ]]> */