Создаем переключатель размера текста в WordPress с помощью jQuery опубликовал Радик Алиев категория  
просмотры 5 384

Создаем переключатель размера текста в WordPress с помощью jQuery

Привет Друзья! Мы уже знаем, что WordPress считается самой популярной CMS в мире, и если ее сочетать с jQuery, она способна творить чудеса. В этом обучающем материале мы обсудим пример того, что полезного можно сделать с помощью jQuery в WordPress, создав пользовательский переключатель размера текста.

В этом обучающем материале мы создадим переключатель размера текста, который увеличивает размер шрифта постов, делая тем самым текст удобным для чтения. Предположите, что вы просматриваете блог и читаете пост. Вы обнаруживаете, что вам сложно переходить на следующую строку поста из-за размера шрифта. Здесь возникает необходимость наличия переключателя размера шрифта для того, чтобы увеличить/уменьшить размер текста поста соответствующим образом. Увеличение/уменьшение размера шрифта желательно в следующих случаях:

  • Для подгонки текста под разрешение экрана вашего устройства
  • Для изменения размера текста, которое установлено в браузере по умолчанию
  • Для повышения читаемости слов
  • Это более удобно, чем использовать Ctrl+ и Ctrl- в браузере
  • Для людей с дефектами зрения, которые не могут различать мелкие буквы

Далее мы создадим две кнопки А+ и А- нажатия на которые будут увеличивать или уменьшать размер текста Вашего поста.


Шаг 1: Решаем, размер шрифта какой части сайта менять

Это самый важный шаг, во время которого вы должны решить, какой элемент должен быть связан с переключателем размера шрифта. Хотя вы можете разместить переключатель непосредственно на домашней странице ( index), гораздо лучше будет разместить его на странице single.php, чтобы его можно было использовать при просмотре определенного поста.

Для того, чтобы иметь возможность изменять размер элемента, мы должны разместить эту часть в уникальном div классе. Для наглядности я использую код шаблона Twenty Twelve, который присутствует в стандартной сборке WordPress. Вот как выглядит наш single.php после добавления кода, выделенного ниже, чтобы заключить пост в класс "resize".

Здесь мы разместили div-класс resize таким образом, чтобы он относился только к телу одного поста.

Разместите любой элемент WordPress, для которого нужна возможность изменять размер текста, в надлежащие div-классы для использования с jQuery, например это может быть сайдбар WordPress, о котором я рассказывал в предыдущем посте, поместите Ваш сайдбар в див с классом "resize"

Шаг 2: Добавление ссылок для изменения размера текста

Следующим шагом является добавление двух ссылок на странице, которые будут работать, как две кнопки для изменения размера текста. Вы можете разместить их где угодно на своей странице, но избегайте их размещения внутри цикла:

Я разместил их в самом низу перед сайдбаром и футером, в нашем файле single.php и присвоил им два уникальных идентификатора.

Шаг 3: Добавляем магию jQuery

Наступило время добавить магию jQuery нашей теме для того, чтобы заставить работать две ссылки увеличить/уменьшить. В папке js вашей темы создайте файл JavaScript под названием resizer.js. Если у Вас нет папки js создайте её. Теперь откройте этот файл и добавьте следующий код. Код снабжен пояснительными комментариями.

Шаг 4. Создаем ссылку на скрипт resizer в WordPress

Это заключительный шаг, в котором мы должны добавить ссылку на скрипт resizer.js в WordPress, для того, чтобы наш изменение размера текста работало. По умолчанию установка WordPress уже включает в себя библиотеку jQuery. Мы только должны указать на скрипт в теме. Откройте файл functions.php и добавьте следующую часть кода.

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

Теги:

1 комментарий

Оставить комментарий
  1. Akram Декабрь 4, 2014 at 9:47 пп #

    Привет!

    При нажатии на «Скачать исходники» вывод на 404 страницу с ошибкой, что материал удален :((( очень очень нужны исходники !

Добавить комментарий

vk_like_site