Известно, что одной из самых востребованных на сегодняшний день CMS в среде специалистов по сайтостроению является система WordPress. А если дополнить ее скриптами на основе jQuery, то можно в результате получить систему с практически неограниченными возможностями.
Давайте предоставим читателям возможность на лету изменять размер шрифта, которым написан текст поста – это удобно для тех, кто читает посты на больших и маленьких экранах, а так же для тех, у кого есть проблемы со зрением. Создадим две ссылки для контроля изменения размеров текста, A+ и A-, кликая по которым, читатель может плавно изменяет размер шрифта.
Чтобы символы могли менять размеры, код следует обрабатывать с помощью элемента DIV определенного класса. Для примера будем использовать стандартную тему Twenty Twelve – выделим в файле single.php текст, размер которого должен изменяться, элементом DIV с классом resize:
<div id="primary" class="site-content"> <div id="content" role="main"> <div class="resize"> </div><!-- #resize --> <nav class="nav-single"> <h3 class="assistive-text"></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 --> </div><!-- #content --> </div><!-- #primary -->
Таким образом, мы можем изменять размеры текста и любого другого элемента, нужно только добавить к нему подобный класс.
На этом шаге будем добавлять две ссылки на страницу. Они будут служить кнопками, изменяющими размер текста. Их можно размещать в любом месте страницы, за исключением циклов. В нашем случае ссылки будут помещены в файл single.php.
<div id="primary" class="site-content"> <div id="content" role="main"> <div class="resize"> </div><!-- #resize --> <nav class="nav-single"> <h3 class="assistive-text"></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 --> </div><!-- #content --> </div><!-- #primary --> <p><a id="increase-font" href="#">[ A+ ] </a>/<a id="decrease-font" href="#">[ A- ] </a> </p>
Давайте заставим эти две ссылки работать. Для этого добавим jQuery к теме. В папке темы js создадим файл JavaScript с именем resize.js. Добавим в него код:
jQuery(document).ready(function() { jQuery('#increase-font').click(function(event) { event.preventDefault(); jQuery('.resize').each(function() { changeTextSize(this, change); }); }); jQuery('#decrease-font').click(function(event) { event.preventDefault(); jQuery('.resize').each(function() { changeTextSize(this, -change); }); }); }); var min = 8, max = 100, change = 2; function changeTextSize(element, value) { var currentSize = parseFloat(jQuery(element).css('font-size')); var newSize = currentSize + value; if (newSize = min) { jQuery(element).css('font-size', newSize + 'px'); } }
Этот скрипт меняет размер шрифта. Каждый клик по ссылке увеличивает/уменьшает шрифт на 2 px. Минимальный размер шрифта равен 8 px, максимальный – 100 px.
Связываем скрипт resize.js с классом resize элемента DIV. В файл functions.php добавляем сниппет с кодом:
function some_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', 'some_resize_text' );
Теперь с помощью кнопок читатель может на лету изменять размер шрифта, которым написан пост.
Источник: Creating a WordPress Post Text Size Changer Using jQuery
