Generic selectors
Только точные совпадения
Искать в заголовках
Искать в контенте
Искать в статьях
Искать на страницах
Filter by Categories
FAQ
Hostenko
Вдохновение
Видеоуроки
Новости
Плагины
Темы
Уроки
Хаки

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

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

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

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

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

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

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

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

Специализированный хостинг для сайтов на WordPress!

Чтобы наш элемент мог менять размеры, мы должны обработать код при помощи класса 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 и добавьте в него следующий сниппет с кодом:

Специализированный хостинг для сайтов на WordPress!
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
Специализированный хостинг для сайтов на WordPress!

Добавить комментарий

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

5 комментариев

сначала новые
по рейтингу сначала новые по хронологии

Спасибо, все отлично работает. Вопрос - а что нужно изменить в JS коде, чтобы ссылки меняли не размер шрифта, а высоту строки (line-height), вроде пробовал подставлять значение "line-height" вместо "font-size", но не работает?)))

А как сделать чтобы запоминало выбранное увеличение, не подскажите?

Предыдущему оратору - это вполне нормальная функция и joomla тут не причем. Оно надо, например, для людей слабовидящих.

Вот нахрена дждумалу в вордпресс примешивать?

Fdghujdfghjfgd

Осталось узнать где тут joomla и все станет на свои места.
P.S. что то мне кажется что Вы спутали jquery и joomla.

Все верно, joomla) там такая функция по дефолту стоит.