Мы уже знаем, что WordPress считается одной из самых популярных CMS в мире, и если дополнить эту популярность функциональностью jQuery, то может получиться сочетание, способно творить настоящие чудеса. В этом практическом руководстве речь пойдет о том, как применить пользу от jQuery в работе WordPress, создав front-end приложение для изменения размеров текстового поля в постах. Эта публикация — для новичков, которые только осваивают магические свойства jQuery под WordPress.
Демонстрация | Скачать ихсодники
Что, собственно, мы собираемся сделать
Как мы уже сказали, наша задача — написать front-end решение для изменения размеров шрифта в постах для удобства читателей. Представьте, что вы читаете пост в блоге, который показался вам не слишком удобным для прочтения большого массива текста из-за слишком мелкого шрифта. И вот тут появляется необходимость удобно увеличить или уменьшить шрифт так, чтобы при этом и сама структура поста сохранилась. Увеличение / уменьшение шрифта в размере определяется набором следующих факторов и инструментов, которые можно использовать для этой цели:
- Подстраивание текста под разрешение экрана.
- Запуск альтернативного размера текста по сравнению с тем, который по умолчанию предложен браузером.
- Увеличение четкости слов.
- Отдельный переключатель размеров текста удобнее, чем использование клавиатурных сочетаний Ctrl+ или Ctrl- в вашем браузере.
- Такое решение удобнее для тех, у кого нет физической возможности читать мелкие шрифты.
В этом руководстве мы создадим две ссылки для контроля размеров текста в постах: A+ и A-. Они будут увеличивать или уменьшать размеры текста в постах в зависимости от нужд пользователя.
Шаг 1. Решите, какую часть изменять в размере
Это один из важных шагов в разработке нашего решения. На этом этапе вы должны решить, что именно вы собираетесь связать с процедурой изменения размеров текста в постах. Вы, конечно, можете связать изменение размеров текста с главной страницей по умолчанию, но разумнее привязать его к странице single.php, что даст вам возможность корректировать размеры текста для каждого отдельно взятого поста.
Чтобы наш элемент мог менять размеры, мы должны обработать код при помощи класса div. В нашем примере для разработки мы используем тему Twenty Twelve, и вот как будет выглядеть наш файл single.php после добавления в него кода, который выделен ниже, для того, чтобы вставить его правильно в пост в рамках класса 'resize':
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <?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( '←', '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><!-- .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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <?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( '←', '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><!-- .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. Теперь откройте файл и добавьте в него следующий код. Пояснения по коду — в комментариях к нему:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | // 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 sizefunction 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 и добавьте в него следующий сниппет с кодом:
1 2 3 4 5 | 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
Комментарии к записи: 5
Вот нахрена дждумалу в вордпресс примешивать?
Осталось узнать где тут joomla и все станет на свои места.
P.S. что то мне кажется что Вы спутали jquery и joomla.
Все верно, joomla) там такая функция по дефолту стоит.
А как сделать чтобы запоминало выбранное увеличение, не подскажите?
Предыдущему оратору — это вполне нормальная функция и joomla тут не причем. Оно надо, например, для людей слабовидящих.
Спасибо, все отлично работает. Вопрос — а что нужно изменить в JS коде, чтобы ссылки меняли не размер шрифта, а высоту строки (line-height), вроде пробовал подставлять значение «line-height» вместо «font-size», но не работает?)))