Кнопка наверх на сайте WordPress

Flying House Up

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

Пусть я и не самый многословный блоггер, но тем не менее встречаются и у меня длинные посты. Так что будем повышать юзабилити.

Опять-таки я рассмотрю два способа: первый с использованием скрипта и более простой — для этих целей воспользуемся плагином, так сказать для новичков.

Отмечу отдельно, что некоторые задачи предпочтительно решать правкой кода, делается это не очень сложно и блог не будет нагружаться плагинами. Как и в случае с постраничной навигацией, кнопка «Наверх» как раз тот самый случай.

Устанавливаем кнопку «Наверх» без использования плагинов

Нам потребуется сам скрипт, скачиваем здесь. И картинка с кнопкой. Для этих целей воспользуйтесь поисковой системой, картинок там великое множество. Можно также при желании нарисовать кнопку самому.

Редактировать будем следующие файлы:

  • header.php
  • footer.php
  • style.css

Можете заранее открыть их текстовым редактором Notepad++.

1. Разархивируйте скачанный архив с файлом arrow.js, подключитесь к сайту по FTP. Закачайте данный файл на сервер в wp-includes/js.

2. Переходим к файлу header.php, находим закрывающийся тег </head> и добавляем код:

<script type="text/javascript" src="http://wpnotes.ru/wp-includes/js/arrow.js"></script>

Понятно, что заменяете адрес сайта на свой.

3. На очереди файл footer.php, перед закрывающимся тегом </body> вставляем:

<a id="gotop" onclick="top.goTop(); return false;" href="#"></a>

4. Находим картинку со стрелкой и помещаем ее в папку с изображениями. Если у вас ее еше нет, то создайте. Пусть ето будет папка images.

Сразу обратите на размеры понравившегося изображения, в случае чего можо изменить данные параметры в том же редакторе Paint. У себя я выставил размер 80 x 80.

5. Теперь задаем параметры для вашей кнопки в файле style.css. 

.scrollTop{
 background:url(http://wpnotes.ru/images/arrow_up.png) 0 0 no-repeat;
 display:block;
 width:80px;
 height:80px;
 position:fixed;
 bottom:10px;
 right:10px;
 z-index:2000;
 }
 .scrollTop:hover{
 background-position:100% 100%;
 }

Не забудьте изменить путь до изображения, а при необходимости ширину (width) и высоту (height) изображения.

Сохраните изменения во всех трех файлах и можете проверить появляется ли кнопка на сайте при прокручивании вниз, а также ее работоспособность.

Кому интересно поэкспериментировать со скоростью прокрутки наверх, то можете поиграться со значениями в файле arrow.js.

Используем плагин для создания кнопки «Наверх»

Самыми популярными являются Scroll to Top  и Dynamic «To Top» Plugin.

Рассмотрим второй вариант. После установки и активации , кнопка сразу появляется у вас на сайте. Перейдем в настройки плагина: «Внешний вид» → «To Top».

Русского языка к сожалению нет, но и так все понятно. Мы можем настроить:

  • скорость прокрутки, чем больше значение, тем медленнее страница прокручивается
  • дистанцию при достижении которой, показывается кнопка
  • позиция — любой угол сайта
  • можно задать как графическое изображение, так и прописать любой текст
  • настройка внешнего вида: цвет фона, цвет, ширина и радиус края кнопки
  • единственный минус — свое изображение вы задать в настройка не можете

настройка плагина Dynamic to Top

Если вы не сильны в правке кода или боитесь пока это производить, то данный плагин отличная альтернатива.

На сегодня все, удачи в улучшении юзабилити ваших сайтов.

Понравилась статья? Поделитесь с друзьями:


 

Навигация по записям