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

Ми вже знаємо, що WordPress вважається однією з найпопулярніших CMS у світі, і якщо доповнити цю популярність функціональністю jQuery, то може вийти поєднання, здатне творити справжні чудеса. У цьому практичному посібнику мова піде про те, як застосувати користь від jQuery у роботі WordPress, створивши front-end додаток для зміни розмірів текстового поля у постах. Ця публікація – для новачків, які лише освоюють магічні властивості jQuery під WordPress.

демонстрація | Завантажити їхсодники

Що, власне, ми збираємося зробити

Як ми вже сказали, наше завдання – написати front-end рішення зміни розмірів шрифту в постах для зручності читачів. Уявіть, що ви читаєте пост у блозі, який здався вам не надто зручним для прочитання великого масиву тексту через дрібний шрифт. І ось тут виникає необхідність зручно збільшити або зменшити шрифт так, щоб при цьому і сама структура посту збереглася. Збільшення/зменшення шрифту у розмірі визначається набором наступних факторів та інструментів, які можна використовувати для цієї мети:

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

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

Крок 1. Вирішіть, яку частину змінювати у розмірі

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

Щоб наш елемент міг змінювати розміри, ми маємо обробити код за допомогою класу DIV. У прикладі для розробки ми використовуємо тему Двадцять дванадцять, і ось як виглядатиме наш файл single.php після додавання до нього коду, виділеного нижче, для того, щоб вставити його правильно в пост в рамках класу 'змінити розмір':

<?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-клас змінити розмір таким чином, щоб він враховував тіло публікації лише в окремому посту нашого блогу.

Для будь-якого елемента 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 в 30 днів від Джеффрі Уей.

Крок 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/