Кнопка вверх для сайта или блога — установка и настройка

Доброго времени суток, уважаемые читатели блога life-crazy.ru. Мы продолжаем изучать вордпресс, и сегодня хочу поделиться с вами опытом по установке кнопки вверх для сайта.  Зачем она нужна?

Кнопка вверх для сайта – это дополнительная примочка к вашему сайту или блогу, которая делает его удобней для пользователя.

Например: пришел к вам пользователь, с поисковых систем или с социальных сетей, неважно. Читает он статью, дочитывает до конца и хочет переместиться вверх к главному меню, нажимает на кнопочку вверх, которая находиться зачастую внизу справа, и плавно перемещается к главному меню сайта.

Фантастика, не правда ли? Если бы этой кнопки вверх на сайте не было, то пользователю пришлось бы крутить скролик (колесико на мышке), что в свою очередь неудобно, а для кого-то может и раздражительно. Я поделюсь с вами двумя способами.

Плагин Scroll to Top

Этот вариант очень простой. Нужно скачать плагин Scroll to Top, установить его и активировать. Практически сразу кнопка готова к использованию. Но рекомендую зайти в «настройки» данного плагина и подкорректировать положение кнопки под свой сайт. Настройки выглядят следующим образом.

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

Жмем кнопку «update options” и все, на этом закончена установка кнопки вверх при помощи плагина  Scroll to Top

Кнопка вверх для сайта без плагина

Я рекомендую устанавливать кнопку вверх на сайт именно кодом. Почему? Как уже не раз упоминалось, плагины тормозят работу самого блога, поэтому лучше избавляться от них. В предыдущей статье я делился опытом по выводу топ комментаторов без плагинов, можете ознакомиться.

Итак, как установить кнопку «вверх» без плагинов?  Не пугайтесь, ничего сложного в установке нет. Нужно будет проделать всего несколько шагов.

Скачивайте архив с кнопочками. Подключайтесь по FTP (статья о подключении к ftp при помощи filezilla) к вашему хостингу, и загрузите понравившуюся картинку к себе, далее проходите в папку с темой и ищите там файл footer.php, путь выглядит вот так: /Ваша корневая папка с блогом/Ваш сайт.ru/wp-content/themes/название вашей темы/footer.php

Откройте его текстовым редактором Notepad++, опускайтесь в самый низ и перед закрывающимся тегом , вставляйте следующий код:

<a id="toTop" href="#"><img src="//life-crazy.ru/wp-content/uploads/2013/02/skroll-to-top-arrow.jpg" alt="up" align="right" border="0" /></a><script type="text/javascript" src="http://ваш_сайт.ru/verx.js"></script><script type="text/javascript">// >![CDATA[
$(function() {
$("#toTop").scrollToTop();
});
// ]]></script>

В коде необходимо указать путь к картинке и путь к скрипту.

http://ваш_сайт.ru/ — это путь к вашему сайту, например: http://life-crazy.ru/.

Далее открывайте файл “Style.css” при помощи Notepad++, опускайтесь в самый низ и вставляйте следующий код:

#toTop {
width: 100px;
text-align: center;
padding: 5px;
position: fixed;
bottom: 10px;
right: 10px;
cursor: pointer;
color: #666666;
text-decoration: none;
}

Этот код отвечает за оформление кнопки, по желанию можно менять настройки. Переходите на сайт, обновляйте страницу, и кнопка будет работать, вот только при нажатии на неё, вас резко будет перекидывать вверх.

Чтобы добиться плавного перемещения, качайте архив “verx.rar” – там сидит jQuery скрипт, его нужно разархивировать и поместить в корневую папку с блогом, у меня это http://life-crazy.ru/verx.js. Далее необходимо перейти к файлу function.php, он находится в папке с вашей темой по адресу: /Ваша корневая папка с блогом/Ваш сайт.ru/wp-content/themes/название вашей темы/function.php

Открываем его для редактирования и сразу после открывающегося элемента ?php вставляйте код:

// smart jquery inclusion
if (!is_admin()) {
wp_deregister_script('jquery');
wp_register_script('jquery', ("//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false);
wp_enqueue_script('jquery');
}

Визуально у меня на блоге это выглядит так:

Все, теперь ваша кнопка имеет приятный вид и работает красиво — страница плавно перемещается с низу вверх.

Как изменить кнопку вверх?

Если у вас в шаблоне уже интегрированная эта кнопка, но визуально она вас не устраивает, вы с легкостью можете сменить её. Как это сделать? Покажу на примере своего блога.

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

Переходите на новую вкладку и в адресную строку вставляйте скопированный адрес, можно при помощи сочетания клавиш CTRL+V и жмите “Enter”.

Перед вами откроется отдельная картинка, вот эта картинка и будет ваша кнопка. Вам нужно посмотреть адрес к ней. Подключиться по FTP к хостингу, пройти по этому адресу и просто заменить имеющуюся картинку на желаемую.

Проследите, чтобы имена картинок совпадали.

На этом все ребятки, если у вас возникли вопросы, задавайте их в комментариях! Подписывайтесь на обновления блога и следите за новостями, впереди все самое интересное!

Успехов вам и процветания.

С Уважением, Михед Александр