Кнопка вверх для сайта или блога. Улучшаем юзабилити сайта!
Life-crazy.ru | блог о SEO
и заработке в Интернет


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

Доброго времени суток, уважаемые читатели блога 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++, опускайтесь в самый низ и перед закрывающимся тегом </body>, вставляйте следующий код:

<a id="toTop" href="#"><img src="http://ваш_сайт.ru/путь к картинке/картинка.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', ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false);
wp_enqueue_script('jquery');
}

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

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

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

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

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

изменениекнопки

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

изменение кнопки2

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

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

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

Смотрим видео для полного представления картины 😉

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

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

Метки: ,


Комментарии
  1. Рашида Гарифулина  |  15.03.2013 в 16:27  |  Цитировать

    Полезная статья, как только соберусь изменить кнопку вверх, загляну к Вам

    Ответить
    • Михед Александр  |  17.03.2013 в 14:59  |  Цитировать

      Спасибо 🙂 конечно приходите — с удовольствием помогу вам в этом деле)

      Ответить
  2. Юрий  |  01.06.2013 в 02:58  |  Цитировать

    Как сделать, чтобы кнопка плавно отпускался как у тебя,  а то у меня она появляется в самом внизу.  

    Ответить
    • Михед Александр  |  01.06.2013 в 07:11  |  Цитировать

      Аналогично, сейчас сделаю видео-урок 😉

      Ответить
      • Юрий  |  01.06.2013 в 07:27  |  Цитировать

        Хорошо, буду благодарен =) 

        Ответить
        • Михед Александр  |  01.06.2013 в 08:16  |  Цитировать

          Готово Юрий, можете смотреть, видео после поста 😉

          Ответить
          • Юрий  |  01.06.2013 в 08:29  |  Цитировать

            Спасибо большое. Сейчас себе сделаю 😉

  3. Танечка  |  03.06.2013 в 08:15  |  Цитировать

    спасибо за видео за пост очень познавательно

    Ответить
  4. Сергей  |  12.10.2013 в 15:59  |  Цитировать

    Тоже собирался себе на блог такую кнопку поставить. Но поменял шаблон, а там кнопка уже есть =)

    Ответить
  5. Алла  |  22.04.2014 в 00:51  |  Цитировать

    Спасибо, все сделала как вы написали (без плагина), но почему-то у меня кнопка появляется сразу и переход по ней не плавный...Подскажите, что не так. Не хочется ставить плагин, но видно придется...

    Ответить
    • Михед Александр  |  25.04.2014 в 10:27  |  Цитировать

      Доброго времени суток, Алла. Как вижу у вас сейчас стоит плагин, поставьте пожалуйста опять кодом, я просмотрю исходный код и подскажу в чем может быть причина.

      Ответить
  6. Алла  |  22.04.2014 в 01:12  |  Цитировать

    P.S. Проверила правильность по видео...путь прописан верно, в Notepad++ код подсвечивается верно...

    Ответить
  7. Sveta  |  26.08.2014 в 10:43  |  Цитировать

    Приветствую! Спасибо по подробное описание. Установила кнопку. Но почему-то она отображается просто как значок картинки, не отображая стрелку, во вторых она наверху не исчезает. Подскажите, в чем причина.

    Ответить
    • Михед Александр  |  27.08.2014 в 01:46  |  Цитировать

      Приветствую, Светлана, вы подключили скрипт? Проверьте путь к скрипту.

      Ответить
      • Sveta  |  27.08.2014 в 09:05  |  Цитировать

        Скрипт подключен, путь указала проверила. Ничего не изменилось

        Ответить
        • Михед Александр  |  27.08.2014 в 09:14  |  Цитировать

          А дайте ссылочку, взгляну в чем дело)

          Ответить
          • Sveta  |  29.08.2014 в 09:45  |  Цитировать

            Отправила на e-mail. Надеюсь и жду ответа =)

          • Михед Александр  |  29.08.2014 в 11:53  |  Цитировать

            Получил, сегодня отпишу, немного позже

  8. Sveta  |  01.09.2014 в 06:17  |  Цитировать

    Спасибо, отправила на почту

    Ответить
  9. Sveta  |  01.09.2014 в 14:53  |  Цитировать

    Супер *YAHOO* все получилось, спасибо что нашли время и подсказали

    Ответить
    • Михед Александр  |  02.09.2014 в 01:45  |  Цитировать

      Рад помочь, Светлана, будут вопросы — обращайтесь 🙂

      Ответить
  10. Дмитрий  |  13.06.2015 в 05:22  |  Цитировать

    Сделлал стрелочку, спасибо за статью! Но вот какая старанная штука получилассь... Видно её только в Мазиле. В хроме, и в Макстоне стрелочка не появляется(( Даже на всякий случай всех охотников рекламы и банеров отключил, и всё равно не помогло(( В чём может быть дело?

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

up