Кнопка «вверх» без плагина

knopka-vverx-dlya-sajta-wordpress-bez-plagina
Дизайн сайта

Привет, Друзья. Кнопка вверх бывает актуальна, когда публикуемый текст несколько растянут. Страница далеко уходит вниз и чтоб вернуться к началу поста приходится крутить колесико мыши. А в наши задачи входит сделать удобным нахождение читателя на сайте. Есть такой термин — юзабилити. Он и охватывает все понятие удобства прибывания посетителя на веб-ресурсе. Сегодня мы и сделаем самостоятельно, без использования плагина (WordPress прекрасно позволяет такие редакции на сайте) кнопку вверх.

Установка кнопки вверх на сайт — вариант первый

Вариант «пятиминутка». Переходим на сайт Scrolltotop. И из предложенных вариантов кнопок вверх выбираем понравившуюся.

knopka-vverx-scrolltotop

Рядом с каждым вариантом кнопки есть скрипт-код. Копиреум его. Далее открываем с помощью текстового редактора NotePad++ (или более привычного для вас) находящийся в папке с установленным шаблоном сайта wp-content/themes/ваша_тема файл подвала сайта footer.php.  В нижней части страницы HTML, как раз перед тегом </ body>, вставляем скопированный код.

vstavljaem-kod-knopki-vverh

Рекомендую вставить код в нижней части страницы , чтобы оптимизировать время загрузки для вашего сайта. Сохраняйте изменения. После обновления страницы сайта выбранная вами кнопка «вверх» уже красуется в правом углу страницы.

Как вы заметили, скрипт кнопки содержит дополнительную ссылку на сайт Scrolltotop. О ненужных внешних ссылках вы уже познакомились из предыдущего поста моего блога Как найти и удалить внешние ссылки из шаблона (темы) WordPress. Здесь механизм удаления ссылки разработчика упрощается. Нам не нужно искать его. Просто удаляем из кода ненужную строку

<noscript>Not seeing a <a href="http://www.scrolltotop.com/">Scroll to Top Button</a>? Go to our FAQ page for more info.</noscript>

Вреда от скрипта кнопки нет. Есть незначительное снижение скорости открытия страницы. Все из-за того, что картинка загружается со стороннего сайта.

Установка кнопки вверх на сайт — вариант второй

Совершаем переход на сервис  iconfinder.com. Так же выбираем значок кнопки вверх из предложенных бесплатных (или платных, если желаете) вариантов. Скачиваем подходящую к дизайну сайта картинку в формате PNG.

  • Скачанный файл переименовываете, к примеру, в lift.png.
    В Notepad++ и создаем файл скрипта с именем lift.js и копируем в него приведенный ниже код Скроллинга:
/* Скрипт Скроллинга 
HTML на странице: <a id="gotop" href="#" onclick="top.goTop(); return false;"></a> 
------------------------------------*/
(function() {


function $(id){
	return document.getElementById(id);
}

function goTop(acceleration, time) {
	acceleration = acceleration || 0.1;
	time = time || 12;

	var dx = 0;
	var dy = 0;
	var bx = 0;
	var by = 0;
	var wx = 0;
	var wy = 0;

	if (document.documentElement) {
		dx = document.documentElement.scrollLeft || 0;
		dy = document.documentElement.scrollTop || 0;
	}
	if (document.body) {
		bx = document.body.scrollLeft || 0;
		by = document.body.scrollTop || 0;
	}
	var wx = window.scrollX || 0;
	var wy = window.scrollY || 0;

	var x = Math.max(wx, Math.max(bx, dx));
	var y = Math.max(wy, Math.max(by, dy));

	var speed = 1 + acceleration;
	window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));
	if(x > 0 || y > 0) {
		var invokeFunction = "top.goTop(" + acceleration + ", " + time + ")"
		window.setTimeout(invokeFunction, time);
	}
	return false;
}

//*
function scrollTop(){
	var el = $('gotop');
	var stop = (document.body.scrollTop || document.documentElement.scrollTop);
	if(stop>400){
		if(el.style.display!='block'){ 
			el.style.display='block'; 
			smoothopaque(el, 0, 100, 1); 
		}
	}
	else 
		el.style.display='none';
		
	return false;
}

// Плавная смена прозрачности
function smoothopaque(el, startop, endop, inc){
	op = startop;
	// Устанавливаем прозрачность
	setopacity(el, op);
	// Начинаем изменение прозрачности
	setTimeout(slowopacity, 1);
	function slowopacity(){
		if(startop < endop){
			op = op + inc;
			if(op < endop){
				setTimeout(slowopacity, 1);
			}
		}else{
			op = op - inc;
			if(op > endop){
				setTimeout(slowopacity, 1);
			}
		}
		setopacity(el, op);		
	};
};
// установка opacity
function setopacity(el, opacity){
	el.style.opacity = (opacity/100);
	el.style.filter = 'alpha(opacity=' + opacity + ')';
};

if (window.addEventListener){
	window.addEventListener("scroll", scrollTop, false);
	window.addEventListener("load", scrollTop, false);
}
else if (window.attachEvent){
	window.attachEvent("onscroll", scrollTop);
	window.attachEvent("onload", scrollTop);
}	


window['top'] = {};
window['top']['goTop'] = goTop;			
			
})();
  • В папку wp-includes/js и копируем созданный файл lift.js. Значок кнопки вверх lift.png — в папку корневого каталога img. Если ее нет, то создаем там же, где размещается папка  wp-includes.
  • В файле header.php (она находится в папке wp-content с установленным шаблоном WordPress) перед тегом </head> вставляем этот код:
<script type="text/javascript" src="http://адрес_вашего_сайта/wp-includes/js/lift.js"></script>

vstavljaem-kod-knopki-vverh-v-shapku-sajta

Не забудьте изменить Адрес_вашего_сайта на нужное значение.

  • В  footer.php перед </body> вставляем:
<a class="scrollTop" id="gotop" onclick="top.goTop(); return false;" href="#"></a>
  • Открываем файл style.css и в самый конец (чтоб в случае чего не путаться) вносите код стиля. Значения можете подобрать самостоятельно:
.scrollTop{ background:url(http://Адрес_вашего_сайта/img/lift.png) 0 0
 no-repeat;
 display:block;
 width:50px;
 height:50px;
 position:fixed;
 bottom:10px;
 left:95%;
 z-index:2000;
 } 
.scrollTop:hover{ background-position:100% 100%; }

Картинки кнопки вверх вы можете изменять в дальнейшем на любую другую. Главное не забывайте правильно называть. В нашем случае lift.

Способов установки кнопки вверх достаточно много. Умельцы постоянно придумывают что-то новое. Если есть желание, можете воспользоваться установкой плагина. Но к чему? Воспользуйтесь предоставленными методами и у вас будет своя кнопка вверх, которую сможете поменять в любой момент.

Успехов вам, Друзья. С уважением, Олег

 

 

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

gravatar
Дизайн сайта
Gravatar — ваш глобально распознаваемый аватар

Привет, Друзья. Что такое аватарка, полагаю, рассказывать будет лишним. Перейдем сразу к рассмотрению Gravatar, его настройке и использованию. Gravatar настраивается один раз (если вы консервативный пользователь интернета), изображение привязывается непосредственно к определенному электронному почтовому адресу и, в дальнейшем, где будет фигурировать ваш email (комментарии на форумах, на блогах и так далее), будет отображаться …

конструкторы социальных кнопок для блога
Дизайн сайта
ТОПовые конструкторы социальных кнопок для блога WordPress

Вряд ли можно представить сейчас хоть один сайт или блог без кнопок социальных сетей. Маленькие и большие кнопки «Поделиться«, быстрая регистрация аккаунтов в интернете, комментарии на сайтах и в группах соцсетей. Везде присутствует связь с социалкой. Огромное количество ищущих различную информацию собраны на Твиттере, Фейсбуке, ВКонтакте, Одноклассниках. Грех не воспользоваться возможностью …

Коды смайликов в WordPress
Дизайн сайта
Коды смайликов в WordPress без плагина и с плагином

Смешные рожицы в виде смайликов все чаще используются авторами статей для передачи эмоционального настроя и являются прекрасным способом украсить текст статьи. Для вывода смайлов можно воспользоваться установленным плагином (Speedy Smilies, WP Smiley), но к чему дополнительно нагружать базу данных, если есть возможность вставить коды смайликов в WordPress блог непосредственно в сам текст? …