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

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

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

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

    <div id="primary" class="site-content">
        <div id="content" role="main">
            <div class="resize">
            
                
            </div><!-- #resize -->
                <nav class="nav-single">
                    <h3 class="assistive-text"></h3>
                    <span class="nav-previous"><?php previous_post_link( '%link', '<span class="meta-nav">' . _x( '←', 'Previous post link', 'twentytwelve' ) . '</span> %title' ); ?></span>
                    <span class="nav-next"><?php next_post_link( '%link', '%title <span class="meta-nav">' . _x( '→', 'Next post link', 'twentytwelve' ) . '</span>' ); ?></span>
                </nav><!-- .nav-single -->
                
            
        </div><!-- #content -->
    </div><!-- #primary -->

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

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

    <div id="primary" class="site-content">
        <div id="content" role="main">
             <div class="resize">
            
                
              </div><!-- #resize -->
                <nav class="nav-single">
                    <h3 class="assistive-text"></h3>
                    <span class="nav-previous"><?php previous_post_link( '%link', '<span class="meta-nav">' . _x( '←', 'Previous post link', 'twentytwelve' ) . '</span> %title' ); ?></span>
                    <span class="nav-next"><?php next_post_link( '%link', '%title <span class="meta-nav">' . _x( '→', 'Next post link', 'twentytwelve' ) . '</span>' ); ?></span>
                </nav><!-- .nav-single -->
                
            
        </div><!-- #content -->
    </div><!-- #primary -->
<p><a id="increase-font" href="#">[ A+ ] </a>/<a id="decrease-font" href="#">[ A- ] </a> </p>

Давайте заставим эти две ссылки работать. Для этого добавим 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