Створюємо інструмент для зміни розміру тексту прямо на постах 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. Додаємо посилання для зміни розмірів тексту

Наступний крок – це додавання двох посилань на сторінці, які будуть працювати як дві кнопки для зміни розмірів тексту. Ці посилання можна помістити будь-де на сторінці, але уникайте розміщення цих посилань у циклі. Ми помістили ці посилання у файл 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/