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

Опубликовано: 01.09.2018

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

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

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

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

Как полностью изменить страницу входа в консоль WordPress

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

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

Как создать сайт на wordpress: пошаговая видеоинструкция

Шаг 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> <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( '←', '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> <?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> </div> <?php get_sidebar(); ?> <?php get_footer(); ?>

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

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

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

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

Шаг 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 , чтобы разместить ссылки и оформить их так, как это нужно вам.