Кнопки изменения размера текста
Обратил внимание на то, что некоторые дети при чтении статей увеличивают масштаб сайта, т.к. плохо видят. Правда не все знают как это делается (
Для достижения нужного результата не будем использовать плагины (коих насчитывается несколько), просто изменим некоторые параметры шаблона:
- Для начала нужно «обернуть» тело заметки в класс
resize
, в моем шаблоне это файлsingle.php
:
1<div class="uk-text-justify resize"><?php the_content(''); ?></div> - Добавляем в этот же файл ссылки изменения масштаба:
12<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<a id="increase-font" href="#">[ A+ ] </a>/<a id="decrease-font" href="#">[ A- ] </a> - Создаем файл
resize.js
со следующим содержимым:
123456789101112131415161718192021222324252627282930313233343536373839// 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' classjQuery('.resize').each(function() {// Call to a custom function to increase the text sizechangeTextSize(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' classjQuery('.resize').each(function() {// Call to a custom function to decrease the text sizechangeTextSize(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 sizefunction 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');}} - В файл
functions.php
темы добавляем следующий код:
12345function 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' );
На этом все 😉 (оригинал статьи)