Создаем инструмент для изменения размера текста прямо в постах WordPress

Мы уже знаем, что WordPress считается одной из самых популярных CMS в мире, и если дополнить эту популярность функциональностью jQuery, то может получиться сочетание, способно творить настоящие чудеса. В этом практическом руководстве речь пойдет о том, как применить пользу от jQuery в работе WordPress, создав front-end приложение для изменения размеров текстового поля в постах. Эта публикация — для новичков, которые только осваивают магические свойства jQuery под WordPress.

Демонстрация | Скачать ихсодники

Что, собственно, мы собираемся сделать

Как мы уже сказали, наша задача — написать front-end решение для изменения размеров шрифта в постах для удобства читателей. Представьте, что вы читаете пост в блоге, который показался вам не слишком удобным для прочтения большого массива текста из-за слишком мелкого шрифта. И вот тут появляется необходимость удобно увеличить или уменьшить шрифт так, чтобы при этом и сама структура поста сохранилась. Увеличение / уменьшение шрифта в размере определяется набором следующих факторов и инструментов, которые можно использовать для этой цели:

• Подстраивание текста под разрешение экрана.
• Запуск альтернативного размера текста по сравнению с тем, который по умолчанию предложен браузером.
• Увеличение четкости слов.
• Отдельный переключатель размеров текста удобнее, чем использование клавиатурных сочетаний Ctrl+ или Ctrl- в вашем браузере.
• Такое решение удобнее для тех, у кого нет физической возможности читать мелкие шрифты.

В этом руководстве мы создадим две ссылки для контроля размеров текста в постах: A+ и A-. Они будут увеличивать или уменьшать размеры текста в постах в зависимости от нужд пользователя.

Шаг 1. Решите, какую часть изменять в размере

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

Чтобы наш элемент мог менять размеры, мы должны обработать код при помощи класса div. В нашем примере для разработки мы используем тему Twenty Twelve, и вот как будет выглядеть наш файл single.php после добавления в него кода, который выделен ниже, для того, чтобы вставить его правильно в пост в рамках класса 'resize':

<?php
/**
 * The Template for displaying all single posts.
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
get_header(); ?>
    <div id="primary" class="site-content">
        <div id="content" role="main">
            <div class="resize">
            <?php while ( have_posts() ) : the_post(); ?>
                <?php get_template_part( 'content', get_post_format() ); ?>
            </div><!-- #resize -->
                <nav class="nav-single">
                    <h3 class="assistive-text"><?php _e( 'Post navigation', 'twentytwelve' ); ?></h3>
                    <span class="nav-previous"><?php previous_post_link( '%link', '<span class="meta-nav">' . _x( '&larr;', 'Previous post link', 'twentytwelve' ) . '</span> %title' ); ?></span>
                    <span class="nav-next"><?php next_post_link( '%link', '%title <span class="meta-nav">' . _x( '&rarr;', 'Next post link', 'twentytwelve' ) . '</span>' ); ?></span>
                </nav><!-- .nav-single -->
                <?php
                    // If comments are open or we have at least one comment, load up the comment template
                    if ( comments_open() || '0' != get_comments_number() )
                        comments_template( '', true );
                ?>
            <?php endwhile; // end of the loop. ?>
        </div><!-- #content -->
    </div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

И вот здесь мы добавляем div-класс resize таким образом, чтобы он учитывал тело публикации только в отдельно взятом посте нашего блога.

Для любого элемента в WordPress, для которого вы хотите изменять размеры текста, просто вставьте соответствующие классы div, которые будут применяться для работы jQuery.

Шаг 2. Добавляем ссылки для изменения размеров текста

Следующий шаг — это добавление двух ссылок на странице, которые будут работать как 2 кнопки для изменения размеров текста. Эти ссылки можно поместить где угодно на странице, но избегайте помещения этих ссылок в цикле. Мы поместили эти ссылки в файл single.php и связали их с двумя уникальными ID.

<?php
/**
 * The Template for displaying all single posts.
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
get_header(); ?>
    <div id="primary" class="site-content">
        <div id="content" role="main">
             <div class="resize">
            <?php while ( have_posts() ) : the_post(); ?>
                <?php get_template_part( 'content', get_post_format() ); ?>
              </div><!-- #resize -->
                <nav class="nav-single">
                    <h3 class="assistive-text"><?php _e( 'Post navigation', 'twentytwelve' ); ?></h3>
                    <span class="nav-previous"><?php previous_post_link( '%link', '<span class="meta-nav">' . _x( '&larr;', 'Previous post link', 'twentytwelve' ) . '</span> %title' ); ?></span>
                    <span class="nav-next"><?php next_post_link( '%link', '%title <span class="meta-nav">' . _x( '&rarr;', 'Next post link', 'twentytwelve' ) . '</span>' ); ?></span>
                </nav><!-- .nav-single -->
                <?php
                    // If comments are open or we have at least one comment, load up the comment template
                    if ( comments_open() || '0' != get_comments_number() )
                        comments_template( '', true );
                ?>
            <?php endwhile; // end of the loop. ?>
        </div><!-- #content -->
    </div><!-- #primary -->
<p><a id="increase-font" href="#">[ A+ ] </a>/<a id="decrease-font" href="#">[ A- ] </a> </p>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Шаг 3. Немного jQuery-магии

Теперь настало время добавить магию jQuery к нашей теме оформления, чтобы заработали наши ссылки для уменьшения или увеличения текста. В папке темы под названием js создайте файл JavaScript под названием resize.js. Теперь откройте файл и добавьте в него следующий код. Пояснения по коду — в комментариях к нему:

// 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');
    }
}

Если вы хотите узнать больше о jQuery, почитайте посты серии Learn jQuery in 30 Days от Джеффри Уэй.

Шаг 4. Связываем скрипт с работой WordPress

И вот финальный шаг. Мы должны связать скрипт resize.js в WordPress с нашими ссылками-кнопками для выполнения кода. По умолчанию в установленном WordPress уже есть библиотека jQuery. Нам просто нужно связать скрипт с темой оформления. Откройте ваш файл functions.php и добавьте в него следующий сниппет с кодом:

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' );

Вот и все! Теперь при просмотре постов вы можете увеличивать или уменьшать размер текста в постах с помощью ссылок A+ и A- на странице. Для более четкой настройки и корректного оформления можно использовать CSS, чтобы разместить ссылки и оформить их так, как это нужно вам.

Источник: WP.tutsplus.com

Алексей Шевченко

редактор wpcafe

Изучает сайтостроение с 2008 года. Практикующий вебмастер, специализирующий на создание сайтов на WordPress. Задать вопрос Алексею можно на https://profiles.wordpress.org/wpthemeus/