Создание ссылок для изменения размера текста на странице

Иногда бывает удобно предоставить посетителям две кнопки для изменения размера шрифта на просматриваемой странице. Можно, конечно, подключить специальный плагин, делающий это, а можно и без него обойтись.

Этот способ работает, если у вас подключена библиотека скриптов jQuery. Откройте папку используемой вами темы, и создайте в ней папку js — в нее будет записан скрипт. Что, такая папка уже существует? Значит используйте уже существующую. Создайте в папке js текстовый файл 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 = 56, change = 1;
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');
	}
}

Это код, плавно увеличивающий размер шрифта на странице блога. Минимальный размер шрифта — 8px, максимальный 56px, шаг изменения — 1px. Эти параметры записаны в строчке

var min = 8, max = 56, change = 1;

— их можно поменять. Текст, размер которого изменяется, должен иметь класс resize.

Теперь нужно этот скрипт подключить. Для этого вставьте в файл functions.php:

function resize_text () {
	wp_enqueue_script( 'resize', get_template_directory_uri() . '/js/resize.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'resize_text' );

Обычно изменять размер шрифта требуется на отдельной странице поста. Значить нужно внедрить в файл single.php, отвечающий за то, как выглядит пост, две ссылки, кликая по которым можно уменьшать или увеличивать размер шрифта:

<a title="Увеличить шрифт" id="increase-font" href="#">[ A+ ] </a>/<a title="Уменьшить шрифт" id="decrease-font" href="#">[ A- ] </a>

Скрипт изменяет размер шрифта не всего текста на странице, а только того, который выводится с помощью элемента с классом resize. Значит нужно добавить этот класс к элементу, текст которого должен меняться. Например, файл single.php дефолтной темы Twenty Twelve, выводит содержимое поста в элементе

<div id="primary" class="site-content">

Если к нему добавить класс resize, то скрипт будет менять размер текста, который этот элемент содержит:

<div id="primary" class="site-content resize">

Таким образом можно регулировать изменение размеров шрифта текста на странице, позволяя изменять размер одного текста, и при этом оставлять размер другого текста постоянным.