Кнопки изменения размера текста

Обратил внимание на то, что некоторые дети при чтении статей увеличивают масштаб сайта, т.к. плохо видят. Правда не все знают как это делается (Ctrl++ — увеличить, Ctrl+— — уменьшить). Для удобства решил добавить такие кнопки на страницы сайта (изменяется только шрифт статьи, масштаб остальных элементов остается прежним).

Для достижения нужного результата не будем использовать плагины (коих насчитывается несколько), просто изменим некоторые параметры шаблона:

1. Для начала нужно «обернуть» тело заметки в класс resize, в моем шаблоне это файл single.php:
   
   PHP

   <div class="uk-text-justify resize"><?php the_content(''); ?></div>

   1	<div class="uk-text-justify resize"><?php the_content(''); ?></div>

2. Добавляем в этот же файл ссылки изменения масштаба:
   
   PHP

   <a id="increase-font" href="#" data-uk-tooltip alt="Увеличить шрифт" title="Увеличить шрифт"><i class="uk-icon-plus-sign-alt"></i> </a> <a id="decrease-font" href="#" data-uk-tooltip alt="Уменьшить шрифт" title="Уменьшить шрифт"><i class="uk-icon-minus-sign-alt"></i> </a>

   1 2	<a id="increase-font" href="#" data-uk-tooltip alt="Увеличить шрифт" title="Увеличить шрифт"><i class="uk-icon-plus-sign-alt"></i> </a> <a id="decrease-font" href="#" data-uk-tooltip alt="Уменьшить шрифт" title="Уменьшить шрифт"><i class="uk-icon-minus-sign-alt"></i> </a>

   или вариант без «выкрутасов» 🙂
   
   PHP

   <a id="increase-font" href="#">[ A+ ] </a>/<a id="decrease-font" href="#">[ A- ] </a>

   1	<a id="increase-font" href="#">[ A+ ] </a>/<a id="decrease-font" href="#">[ A- ] </a>

3. Создаем файл resize.js со следующим содержимым:
   
   Java

   // This prevents the execution of the code before the document is finished loading. jQuery(document).ready(function() { // The 'A+' element in the page is associated with the jQuery click() event. jQuery('#increase-font').click(function(event) { // This prevents the default action of the click() event from being triggered. event.preventDefault(); // The jQuery each() event interates over each elements belonging to the 'resize' class jQuery('.resize').each(function() { // Call to a custom function to increase the text size changeTextSize(this, change); }); }); // The 'A-' element in the page is associated with the jQuery click() event. jQuery('#decrease-font').click(function(event) { // This prevents the default action of the click() event from being triggered. event.preventDefault(); // The jQuery each() event interates over each elements belonging to the 'resize' class jQuery('.resize').each(function() { // Call to a custom function to decrease the text size changeTextSize(this, -change); }); }); }); // Three variables have been used to define range of the text size and the increment/decrement value respectively. var min = 8, max = 100, change = 2; // Defines a custom function with two parameters determining the element to be resized and the size 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'); } }

   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 39

   // This prevents the execution of the code before the document is finished loading. jQuery(document).ready(function() {     // The 'A+' element  in the page is associated with the jQuery click() event.     jQuery('#increase-font').click(function(event) {         // This prevents the default action of the click() event from being triggered.         event.preventDefault();         // The jQuery each() event interates over each elements belonging to the 'resize' class         jQuery('.resize').each(function() {             // Call to a custom function to increase the text size             changeTextSize(this, change);         });     });     // The 'A-' element  in the page is associated with the jQuery click() event.     jQuery('#decrease-font').click(function(event) {         // This prevents the default action of the click() event from being triggered.         event.preventDefault();         // The jQuery each() event interates over each elements belonging to the 'resize' class         jQuery('.resize').each(function() {             // Call to a custom function to decrease the text size             changeTextSize(this, -change);         });     }); }); // Three variables have been used to define range of the text size and the increment/decrement value respectively. var min = 8, max = 100, change = 2; // Defines a custom function with two parameters determining the element to be resized and the size 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. В файл functions.php темы добавляем следующий код:
   
   Java

   function wptuts_resize_text () { // The array('jquery') is used to create dependency on the jQuery library in order to use it properly. wp_enqueue_script( 'resize', get_template_directory_uri() . '/js/resize.js', array( 'jquery' ) ); } add_action( 'wp_enqueue_scripts', 'wptuts_resize_text' );

   1 2 3 4 5

   function wptuts_resize_text () {     // The array('jquery') is used to create dependency on the jQuery library in order to use it properly.     wp_enqueue_script( 'resize', get_template_directory_uri() . '/js/resize.js', array( 'jquery' ) ); } add_action( 'wp_enqueue_scripts', 'wptuts_resize_text' );

На этом все 😉 (оригинал статьи)