Привет Друзья! Мы уже знаем, что WordPress считается самой популярной CMS в мире, и если ее сочетать с jQuery, она способна творить чудеса. В этом обучающем материале мы обсудим пример того, что полезного можно сделать с помощью jQuery в WordPress, создав пользовательский переключатель размера текста.
В этом обучающем материале мы создадим переключатель размера текста, который увеличивает размер шрифта постов, делая тем самым текст удобным для чтения. Предположите, что вы просматриваете блог и читаете пост. Вы обнаруживаете, что вам сложно переходить на следующую строку поста из-за размера шрифта. Здесь возникает необходимость наличия переключателя размера шрифта для того, чтобы увеличить/уменьшить размер текста поста соответствующим образом. Увеличение/уменьшение размера шрифта желательно в следующих случаях:
- Для подгонки текста под разрешение экрана вашего устройства
- Для изменения размера текста, которое установлено в браузере по умолчанию
- Для повышения читаемости слов
- Это более удобно, чем использовать Ctrl+ и Ctrl- в браузере
- Для людей с дефектами зрения, которые не могут различать мелкие буквы
Далее мы создадим две кнопки А+ и А- нажатия на которые будут увеличивать или уменьшать размер текста Вашего поста.
Шаг 1: Решаем, размер шрифта какой части сайта менять
Это самый важный шаг, во время которого вы должны решить, какой элемент должен быть связан с переключателем размера шрифта. Хотя вы можете разместить переключатель непосредственно на домашней странице ( index), гораздо лучше будет разместить его на странице single.php, чтобы его можно было использовать при просмотре определенного поста.
Для того, чтобы иметь возможность изменять размер элемента, мы должны разместить эту часть в уникальном div классе. Для наглядности я использую код шаблона Twenty Twelve, который присутствует в стандартной сборке WordPress. Вот как выглядит наш single.php после добавления кода, выделенного ниже, чтобы заключить пост в класс "resize".
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?php get_header(); ?> <div id="primary" class="site-content"> <div id="content" role="main"> <strong> <div class="resize"></strong> <strong> <?php while ( have_posts() ) : the_post(); ?></strong> <strong> <?php get_template_part( 'content', get_post_format() ); ?></strong> <strong> </div><!-- #resize --></strong> <nav class="nav-single"> // вывод информации в файле single.php .... // я не привёл весь код шаблона, чтобы не занимать место, полностью код Вы можете просмотреть в исходниках <?php endwhile; // end of the loop. ?> </div><!-- #content --> </div><!-- #primary --> <?php get_sidebar('primary'); ?> <?php get_footer(); ?> |
Здесь мы разместили div-класс resize таким образом, чтобы он относился только к телу одного поста.
Шаг 2: Добавление ссылок для изменения размера текста
Следующим шагом является добавление двух ссылок на странице, которые будут работать, как две кнопки для изменения размера текста. Вы можете разместить их где угодно на своей странице, но избегайте их размещения внутри цикла:
|
1 2 3 |
<?php while ( have_posts() ) : the_post(); ?> <?php endwhile; // end of the loop. ?> |
Я разместил их в самом низу перед сайдбаром и футером, в нашем файле single.php и присвоил им два уникальных идентификатора.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?php get_header(); ?> <div id="primary" class="site-content"> <div id="content" role="main"> <strong> <div class="resize"></strong> <strong> <?php while ( have_posts() ) : the_post(); ?></strong> <strong> <?php get_template_part( 'content', get_post_format() ); ?></strong> <strong> </div><!-- #resize --></strong> <nav class="nav-single"> <nav class="nav-single"> // вывод информации в файле single.php .... // я не привёл весь код шаблона, чтобы не занимать место, полностью код Вы можете просмотреть в исходниках ?> <?php endwhile; // end of the loop. ?> </div><!-- #content --> </div><!-- #primary --> <strong><p><a id="uveli4ivaem-font" href="#">[ A+ ] </a>/<a id="umenjwaem-font" href="#">[ A- ] </a> </p></strong> <?php get_sidebar('primary'); ?> <?php get_footer(); ?> |
Шаг 3: Добавляем магию jQuery
Наступило время добавить магию jQuery нашей теме для того, чтобы заставить работать две ссылки увеличить/уменьшить. В папке js вашей темы создайте файл JavaScript под названием resizer.js. Если у Вас нет папки js создайте её. Теперь откройте этот файл и добавьте следующий код. Код снабжен пояснительными комментариями.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
// Для начала предотвращаем исполнение кода, прежде чем документ завершил загрузку. jQuery(document).ready(function() { // Элемент 'A+' связан с событием jQuery click(). jQuery('#uveli4ivaem-font').click(function(event) { // Предотвращает заданное по умолчанию действие событие click() до его вызова . event.preventDefault(); // jQuery each() событие повторяет действие ко всем элементам принадлежащим класу 'resize' jQuery('.resize').each(function() { // Вызываем к пользовательскую функцию для увеличения размера текста changeTextSize(this, change); }); }); // Элемент 'A-' связан с событием jQuery click(). jQuery('#umenjwaem-font').click(function(event) { // Предотвращает заданное по умолчанию действие событие click() до его вызова . event.preventDefault(); // jQuery each() событие повторяет действие ко всем элементам принадлежащим класу 'resize' jQuery('.resize').each(function() { // Вызываем к пользовательскую функцию для увеличения размера текста changeTextSize(this, -change); }); }); }); // Три переменные были использованы для определения диапазона размера текста и увеличения / уменьшения значения соответственно. var min = 8, max = 100, change = 2; // Определяет пользовательскую функцию с двумя параметрами, определяющими изменение размера function changeTextSize(element, value) { // текущий размер var currentSize = parseFloat(jQuery(element).css('font-size')); // новый размер плюс текущий var newSize = currentSize + value; if (newSize <= max && newSize >= min) { //подсчёт и присваивание нового размера jQuery(element).css('font-size', newSize + 'px'); } } |
Шаг 4. Создаем ссылку на скрипт resizer в WordPress
Это заключительный шаг, в котором мы должны добавить ссылку на скрипт resizer.js в WordPress, для того, чтобы наш изменение размера текста работало. По умолчанию установка WordPress уже включает в себя библиотеку jQuery. Мы только должны указать на скрипт в теме. Откройте файл functions.php и добавьте следующую часть кода.
|
1 2 3 4 |
function wpandyou_resize_text () { wp_enqueue_script( 'resizer', get_template_directory_uri() . '/js/resizer.js', array( 'jquery' ) ); } add_action( 'wp_enqueue_scripts', 'wpandyou_resize_text' ); |
Вот и все. Теперь, когда вы или Ваши пользователи просматриваете пост, вы можете увеличивать и уменьшать размер шрифта поста, используя ссылки A+ и A- на странице. Вы можете использовать свой собственный CSS для того, чтобы корректно разместить и придать нужный стиль двум ссылкам на вашем, это могут быть картинки, да всё, что угодно Друзья.
Привет!
При нажатии на «Скачать исходники» вывод на 404 страницу с ошибкой, что материал удален :((( очень очень нужны исходники !