Приветствую друзья.Сегодня мы поговорим с Вами о том как установить кнопку вверх для сайта. На свой сайт я установил такую кнопку возврата к верху страницы не сразу, а после нескольких просьб со стороны читателей моего блога. И на самом деле, как это я раньше не додумался сделать такую простую и практичную вещь. Приложив немного усилий Вы улучшите юзабилити(удобство) своего сайта в разы, и облегчите жизнь пользователям и читателям Вашего сайта.
Посмотреть как выглядит и что делает кнопка для возврата вверх страницы можете посмотреть на любой странице моего сайта.Попробуйте прокрутить колесико мыши вниз и в правом нижнем углу увидите стрелочку зеленого цвета, нажав на нее страница поднимется в самый вверх.
Как понятно из названия статьи такую кнопку вверх очень удобно использовать, если Вы пишите очень длинные статьи на сайте, или у Вас очень много комментариев оставляют пользователи.
Итак давайте не тянуть время, и как можно скорее уже установим кнопку вверх на Ваш сайт.
Установка кнопки вверх на сайт.
Для успешной установки кнопки вверх для сайта Вам необходимо совершить 5 простых действия.
1)Скачайте архив с изображениями стрелки и скриптом к себе на компьютер и разархивируйте его.
2)Подключитесь по ftp к сайту и загрузите файл arrow.js в папку wp-includes/js а файл arrows.png в паку img, если такой папки нет то создайте ее в корне сайта, так что бы папка img находилась в той же директории что и папка wp-includes.
3)Теперь откройте файл header.php который находится в папке с Вашим шаблоном, найдите в нем тег </head> и перед ним добавьте строку :
<script type="text/javascript" src="http://Адрес_сайта/wp-includes/js/arrow.js"></script>
Замените строку адрес_сайта на свой адрес сайта, у меня эта строка выглядит вот так:
<script type="text/javascript" src="http://wp.infohub.su/wp-includes/js/arrow.js"></script>
После чего сохраните файл.
4) Откройте файл footer.php найдите тег </body> и вставьте перед ним строку:
<a class="scrollTop" id="gotop" onclick="top.goTop(); return false;" href="#"></a>
После чего сохраните файл.
5)Откройте файл style.css который также лежит в папке с шаблоном и добавьте в конец строки:
.scrollTop{
background:url(http://Адрес_сайта/img/arrows.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%;
}
Обратите внимание, также как и в одном из предыдущих пунктов в строке адрес_сайта нужно изменить на Ваш адрес сайта.
Вот и все, после сохранения всех файлов, и загрузки их обратно на хостинг, можете проверить установленную кнопку вверх на сайте.
Редактирование внешнего вида кнопки вверх для сайта.
Если Вы дошли до этого пункта, значит Вы уже проделали предыдущую инструкцию по установке кнопки вверх для сайта, и Вам хочется немного большего, изменить внешний вид кнопки вверх. Я понимаю такое желание, так как та кнопка что используется у меня подойдет только для темных дизайнов сайтов, но ничего страшного.Сейчас я расскажу как установить произвольную кнопку вверх для сайта.
1) Идем на уже знакомый из предыдущих уроков сервис iconfinder.com и по запросу arrow находим огромное количество различных стрелок.
2) Выбираем наиболее подходящую стрелочку вверх, и скачиваем ее в формате png к себе на компьютер.
3)Переименуйте файл в arrows.png
4)Загрузите ее в папку img на хостинге, вместо той что мы загрузили в первой части инструкции.
5)Теперь можете насладиться новой кнопкой вверх на своем сайте.
Будете ли Вы на своем сайте устанавливать кнопку вверх?