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

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

Этот способ работает, если у вас подключена библиотека скриптов 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+ ] /[ A- ] 

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

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

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

Автор tiaurus 2182 Articles
Являюсь создателем n-wp.ru — блога о WordPress для новичков. Мне интересно многое, поэтому еще я сделал 123-box.ru — блог о программах для Windows, и tiaurus.info — блог о красоте.

2 Комментарии

Оставить комментарий

Ваш электронный адрес не будет опубликован.


*