Шаг №63.Как сделать кнопку вверх для сайта на wordpress?

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

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

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

Итак давайте не тянуть время, и как можно скорее уже установим кнопку вверх на Ваш сайт.

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

Для успешной установки кнопки вверх для сайта Вам необходимо совершить 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://wpcreate.ru/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)Теперь можете насладиться новой кнопкой вверх на своем сайте.

Будете ли Вы на своем сайте устанавливать кнопку вверх?

  • http://hdkinodom.ru Алекандр

    Доброго времени суток! У меня на сайте почему о не работает, сделал все как было у вас написано! в чем может быть проблема?

    • http://wpcreate.ru Артем Петрусенко

      Я смотрю у Вас уже получилось?

      • http://hdkinodom.ru Алекандр

        Да, спасибо! Но только у вас на блоге нашел именно этот вариант кнопки «вверх», на других сайтах только обычный вариант! Спасибо вам, теперь ваш подписчик!

      • http://hdkinodom.ru Алекандр

        Артем, еще вопрос как сделать кнопку на левую сторону?

        .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%;
        }
        • http://wpcreate.ru Артем Петрусенко

          Да, можно либо вообще убрать это свойство, либо выставить значение в 0 процентов.

      • http://moyaumnichka.ru/ Veronika

        Спасибо огромное!!! Эта реализация кнопочки самая лучшая!
        Долго искал вариант без подключения галерей и нашел только у Вас.
        Я правда немного изменила её вид,
        вот она во всей красе на моём любимом блоге: http://moyaumnichka.ru/ 😳

        • http://www.asia3000.ru Владимир

          Скажите, пожалуйста, а как Вы сделали так, что при наведении на картинку кнопки курсора она реагирует движением вверх, а не вниз, как в исходном варианте??? 😕

        • http://cleapa.com/ Андрей

          Нет кнопочки то! 😀

  • http://gamefatal.com/ Елена

    Спасибо большое, все получилось!

    • http://wpcreate.ru Артем Петрусенко

      Пожалуйста, обращайтесь еще если будут возникать проблемы!

      • http://www.asia3000.ru Владимир

        Скажите, пожалуйста, а как сделать так, чтобы при наведении на картинку кнопки курсора она (кнопка) реагировала движением вверх, а не вниз, как в исходном варианте??? Так как это реализовано выше в комментарии Veronika (http://moyaumnichka.ru/).

  • http://klatz.me Kot

    Привет, Артём. Спасибо за статью, всё работает!
    Есть косяк: при уменьшении области просмотра кнопка «вверх» отображается некорректно. Поэтому, я считаю, лучше задавать позицию кнопки не в % от левого края окна ,а в px от правого края, хотя конечно всё зависит от конкретной задачи.
    Думаю, задержусь у тебя на блоге. Есть что почитать интересного. Спасибо за статью еще раз!

    • http://wpcreate.ru Артем Петрусенко

      Да, согласен лучше позиционировать в пикселях. Для разных задач, разные подходы)

  • http://renesmee.ru Ольга

    Как жаль( но у меня не выходит и что только не меняла, а так хотелось бы такую стрелку

  • http://strojka-sovety.in.ua/ Александр

    спасибо Большое!!!

  • http://lgg12.ru Геннадий

    Здравствуйте. У меня на блоге почему о не работает, сделал все как было у вас написано, в чем может быть проблема? С уважением Геннадий.

  • http://lgg12.ru Геннадий

    Здравствуйте. Стрелка наверх появилась, работает, но после нажатия появляется квадратик, вокруг стрелки. С уважением Геннадий.

  • http://lgg12.ru Геннадий

    Я вас побеспокою еще подробностью, квадратик сразу исчезает при переходе или переключении с главной станицы на страницу автора.

  • http://lgg12.ru Геннадий

    И на браузере гугл хром квадратик не появляется, только выскакивает на Enternet Explorer

  • http://ncuxolog.astrakraft.ru/ Светлана

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

  • http://a-beautifullife.ru Ольга

    Артем, все сделала, только когда перехожу к статье — то там кнопки нет, добавила в редактор single, не помогло, подскажите плиз!))) 🙁

    • http://a-beautifullife.ru Ольга

      Артем, подскажите пжл что делать, если в самой статье стрелка не выходит, а на главной странице она есть??? 😥

      • http://wpcreate.ru Артем Петрусенко

        Видимо вы код разместили только в файле index.php, а надо было в футере.

        • http://a-beautifullife.ru Ольга

          Нет, Артем, я сделала как у вас написано, в index.php не размещала вообще. Добавила код только в header.php, footer.php и style.css 🙁
          А что нужно добавлять в index.php?

          • http://a-beautifullife.ru/ ольга

            Спасибо, я так и не дождалась ответа!!!!((((

  • http://nuni.kz Elmira

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

    • http://wpcreate.ru Артем Петрусенко

      Здравствуйте Elmira, убедитесь что графический файл находится в правильной папке.Скорее всего проблема именно в этом.

  • http://intim-sexchop.ru Сергей

    Не хочет появляться стрелка, хоть убей, все перепробывал, на разных шаблонах.

  • http://slavesofsystem.ru/ Роман

    Это единственный способ, из всех мной перепробованных, который заработал. Спасибо!

  • http://www.asia3000.ru Владимир

    Большое спасибо!!!

  • http://ateljemod.ru Александр

    Артём, спасибо. Ваш рецепт как всегда вовремя. С удовольствием учусь у Вас в освоении WP. Ещё раз спасибо.
    P.S. В style.css рекомендую согласовать размеры с иконкой. То есть если (width:50px; height:50px;) отличаются от фактического размера устанавливаемой выбранной иконки.

    • http://wpcreate.ru Артем Петрусенко

      Отличное замечание!

    • http://www.romanmers.com Ирина

      Александр, спасибо большое за Ваш комментарий, он очень помог!

  • http://kuxnyvostoka.ru/ Дмитрий

    Большое спасибо всё получилось! Кнопку правда переделывал на основе вашей так как если с сайта сразу ставить там одна картинка и она криво работает, у вас же она в двух видах на одном файле. Так что сейчас всё ровно.

  • Vellena

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

  • http://ateljemod.ru Александр

    Для желающих добавить какую то надпись при наведении на указатель (ну например: «Свистать всех наверх», » В начало страницы» или «Нажми и попадешь на верх») Рекомендую в footer.php вставлять строку в таком варианте: .
    P.S. Хотя это на любителя. Можно и без надписи.

  • Александр

    Здравствуйте, сделал все как в описании стрелка почему то не появилась, хотя в том месте где она должна быть указатель мыши меняется, в чем может быть причина?

    • Марина

      Спасибо Вам!
      Все получилось!!

  • http://prosto-edem.ru/ Valena

    Спасибо, установила себе стрелочку!
    Ребят, у кого не получается, посмотрите, может, у вас папки по-другому называются. Например, у меня папка называется не wp-includes/js, а просто wp-includes; не img, а images. Поменяла в строках названия на свои и все получилось 😉

  • http://borderruns.org Владимир

    Артем, у меня получается так что задний цвет фона закрывает стрелку видимо или сливается с ней, т.е кнопка как бы есть, но не видима, и даже срабатывает подъем на верх))
    как это можно поправить?
    можете вот тут глянуть на моей блоге http://borderruns.org/nash-blog/

  • Alex

    Здравствуй, Артём!
    Спасибо за урок, все заработало! )

  • http://bo4ariki.ru Юлия

    Спасибо Вам! Все четко и ясно, сделала за пару минут без заморочек 😉

  • http://fitdeal.ru/ Ольга Суворова

    Все проделала, как Вы описали, и ничего не произошло…Кнопки не появлись. 🙁 Да и у Вас, как я вижу, на блоге их нет.

  • Анна

    Нет, не получается. Квадратик подсвечивается, работает, но стрелка не видна. Прописала полный путь к картинке: easy-physic.ru/public_html/wp-includes/images
    Что делать? Причем в style.css размеры меняю — меняются! То есть просто не нашел картинку… 😮

  • http://vedruslan.com/ Руслан

    Спасибо БОЛЬШОЕ! 🙂 У меня всё получилось! Смотрите! Видимо после обновления wordpress нужно редактировать — header.php, footer.php, style.css.. Поэтому на этом блоге нет этой стрелки.

  • Lisa

    А почему сейчас эту кнопку с сайта удалил, Артем?

  • http://zborov.ru Максим

    Спасибо за помощь! ❗ ➡

  • http://zborov.ru Максим

    Артем подскажи пожалуйста, каким образом ты выводишь и подсвечиваешь код в статьях? У меня сейчас установлен плагин Wp-Syntax, тоже подсвечивает и выводит вроде бы красиво, но когда копируешь к пример код css и вставляешь к себе в файл, получается не по строчкам, а всё в одну кашу.. И это впоследствии очень затрудняет настройку. 😡 Буду благодарен за помощь!

  • http://arti-box.com Вадим

    А может ли мешать показу кнопки задний фон? А то что то с кодом у меня не вышло. Решил поставить плагин «Scroll to Top Button» и тоже кнопки нет. Что может быть?

  • http://tradingmylife.ru Данила

    Артем, присоединяюсь ко всем благодарным. Все просто и быстро получилось. Еще случайно получилось сделать эффект небольшого движения стрелки при наведении курсора (поиграл со значениями width и height). Если сама стрелочка больше указанных границ, то она немного перемещается. Вот смотрите, какая у меня красивая кнопка вышла http://tradingmylife.ru.
    Да и еще. В строчке

    background:url(http://Адрес_сайта/img/arrows.png) 0 0 no-repeat;

    можно поменять img на image, если картинки хранятся в ней и в этой же строчке можно менять название скачанной картинки, не переиминовывая ее в arrows.png каждый раз. 😉

  • http://tradingmylife.ru Данила

    Еще вопрос появился. Как сделать, чтобы стрелка позиционировалась по центру между краем монитора и самим блоком с записями. У себя я выставил в процентах от левого края, но на разных мониторах смотрится по-разному. Хотелось бы чтобы всегда одинаково отображалось. Или от блока с записями в пикселях как выставить.

  • http://alladanilina.com Alla

    Артём, установила стрелку. Но почему-то она не пропадает, когда находишься на верху страницы. Что делаю не так?

  • http://free-pc.ru Марат

    Почему-то не работает. И у Вас на блоге ее уже нет?

    • http://free-pc.ru Марат

      Все получилось! Спасибо!

  • Догадливый

    У меня не получалось до тех пор, пока не догадался, что в в style код должен быть не «background:url(http://Адрес_сайта/img/arrows.png) 0 0 no-repeat;», а background:url(http://Адрес_сайта/wp-includes/img/arrows.png) 0 0 no-repeat;

  • http://www.romanmers.com Ирина

    Работает! Спасибо!

  • Ербол

    Артем, у меня получилось установить, спасибо! НО на landing page почему-то не получилось. Я использую wPPage. В чем может быть проблема?

  • Эдик Северный

    Братан, здарова! Как сам? А где у тебя реализовано эта кнопка, не могу найти… 🙁

  • http://babuwka.ru Екатерина

    Спасибо, со второй попытки получилось поставить стрелку вверх 🙂

  • http://lifennov.ru Максим

    Не работает кнопка. 🙁

  • http://www.adi-club.ru Петр

    А не легче установить плагин для ворждпресс,я вот установил вот такой «totop-link»

  • Юрий

    Можно сделать проще без JS: 1. код ссылки
    тут href= значение id самого верхнего тега в контенте на странице.
    2. В стилях добавить к выше указанным:
    .scrollTop{ opacity: 0.2; }
    .scrollTop:hover{ opacity: 1.0; }
    можно еще значение bottom: ; увеличить, а то стрелка на футере сидит внизу.