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

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

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

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

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

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


    

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

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


    

[ A+ ] /[ A- ]

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

 
jQuery(document).ready(function() {
    jQuery('#increase-font').click(function(event) {
        event.preventDefault();
        jQuery('.resize').each(function() {
            changeTextSize(this, change);
        });
    });
    jQuery('#decrease-font').click(function(event) {
        event.preventDefault();
        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 = min) {
        jQuery(element).css('font-size', newSize + 'px');
    }
}

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

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

function some_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', 'some_resize_text' );

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

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

Оставьте первый комментарий

Оставить комментарий

Ваш электронный адрес не будет опубликован.


*


Яндекс.Метрика