Кнопка «Вверх» для WordPress с помощью плагина Scroll to Top





Всем привет! Сегодня я на свой блог seomodern.biz добавил кнопку «Вверх» с помощью плагина Scroll to Top. Решил написать статью, как это сделать.

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

Рассмотрим, как установить кнопку «наверх» для сайта на WordPress с помощью плагина Scroll to Top Button.

Установка и настройка плагина кнопка «вверх» для WordPress — Scroll to Top Button

Плагин можно скачать на официальном сайте WordPress по этой ссылке.

Далее заходим в админку Вордпресс, выбираем Плагины — Добавить новый — Загрузить — Обзор (выбираем скачанный ранее архив) — Установить. Нажимаем кнопку «Активировать плагин». С более подробной инструкцией по установке плагинов для WordPress можно ознакомиться в этой статье.

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

Если картинка, установленная по-умолчанию, вас не устраивает, можно ее заменить. Для этого в админпанели WordPress перейдите в меню Параметры и выберите Scroll to Top. В открывшемся окне можно прописать ссылку, по которой вы хотите загрузить картинку, задать скорость прокрутки страницы вверх в милисекундах, задать, после какой строки кнопка должна появиться:

параметры плагина стрелка вверх

Если хотите, чтоб кнопка «вверх» располагалась справа или заменить изображение стрелки перед установкой плагина, для этого нужно распаковать архив с плагином, в котором находится папка image с одной картинкой стрелки и один файл — scrolltotop.php, в котором описываются функции, параметры и положение стрелки вверх.

 

Выбираем новую картинку для кнопки «вверх»

Найти картинку со стрелкой достаточно просто. Перейдите, например, в поисковую систему Гугл, введите запрос «кнопка вверх» и перейдите по вкладке «Картинки». Там будет множество стрелок в картинках. Найдите понравившийся вам файл в формате .png или нарисуйте стрелку самостоятельно и сохраните его в папку image, предварительно удалив предыдущий файл. Создайте архив заново. Плагин готов к установке.

 

Меняем расположение кнопки «вверх»

Открываем файл scrolltotop.php. Выбираем поиск или нажимаем Ctrl+F и вводим слово left. Нажимаем искать, пролистываем далее. Третье слово left заменяем на right в следующей строке:

кнопка вверх справа

Закрываем, сохраняем, создаем архив заново, устанавливаем его, активируем. Все готово! Теперь на вашем сайте кнопка «вверх» будет расположена справа.

Данный плагин устанавливается и настраивается достаточно просто. В одной из следующих статей я расскажу, как установить кнопку «вверх» на WordPress без плагина. На этом у меня все.

Подписывайтесь на обновления блога.

С уважением, Сергей Грицюк.


 
1 Star2 Stars3 Stars4 Stars5 Stars (4 votes, average: 5,00 out of 5)
Загрузка...

43 Комментариев

  1. Спасибо за подробное объяснение процесса, кнопочка мной успешно установлена и не возникло никаких сложностей, хотя я не специалист в этой области.

    1. Рад, что статья помогла. Часто что-то меняется и за актуальностью уследить сложно, так как на блоге достаточно много статей о разных плагинах, партнерках, сервисах. Но я постарался так описать весь процесс, чтоб даже в перспективе функциональных изменений все было понятно.

  2. Добрый день!

    Установила сначала другой плагин jQuery Smooth Scroll, не понравился, деактивировала, установила описанный в статье. Оказался то, что нужно! Но вот беда: даже после удаления первого плагина его стрелка все равно висит на сайте под стрелкой второго плагина. Как решить эту проблему?

    1. Если предыдущий плагин деактивировали и удалили, но кнопка не ищезла, то поищите папку удаленного плагина на хостинге в папке wp-content/plugins/ и удалите ее вручную.

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

    1. Я Тане уже говорил, но повторюсь: с того времени много воды утекло и статья сейчас неполноценна (хоть бы Гугл не заметил 🙂 ). Плагины разделились на разные версии. На момент написания статьи она действительно многим помогла решить вопрос с кнопкой вверх.

      Собственно этот нюанс может дать почву для размышлений оптимизаторам...

  4. Привет, Сергей! У меня вот такая проблема и постоянно с этим плагином. После обновления у меня пропадает из настроек Scroll to Top. Теперь я не могу поставить свою стрелочку. Уже раз 10 пробовала, нет, все одно и то же. Теперь у меня во «Внешний вид» стоит «Scroll to Top Button Settings», а там выбор, только темный или светлый и большой или маленький. В чем может быть проблема. Сейчас Scroll to Top Button обновился до версии 1.0, и стрелочка у меня теперь как у тебя на блоге... Вот в чем проблема...?

    1. Привет, Таня! Настройки действительно переместились во «Внешний вид».

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

      Вообще хочу вывести кнопку Вверх с помощью кода, но пока не придумал как.

      Сейчас нужно глянуть новый код плагина. Может че посоветую.

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

  5. Спасибо за статью! Установил с официального сайта ВП и ничего не стал менять! Все отлично работает!

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

  7. Тоже устанавливала кнопку вверх этим плагином, потом убрала, зачем нагружать блог лишними плагинами.

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

  8. Все написано понятно. Сделал стрелку с первого раза. Только в админке этот плагин не могу найти. Как его открыть, чтобы скорость подЪема стрелки увеличить?

    1. Админка плагина в данной версии не предусмотрена. Скорость можно поменять так же, как расположение самой стрелки — разархивировать, внести изменения в соответствующий файл, заархивировать и установить плагин. Сам скорость не менял. Будет время, посмотрю, как это делается и дополню статью.

  9. А зачем вообще устанавливать плагин? Создаем произвольный блок, который окрашиваем по виду кнопки (при желании задаем картинку). Потом просто указываем в CSS этому блоку position:fixed bottom 0 right 0 — и кнопка у нас ложится в то место что нам надо. Кроме того, указав фон при наведении, фон при клике можно вообще сделать её очень даже чувствительной.

    Плюсы такой реализации что не используются ява скрипты и не замусоривается сайт ненужными плагинами (которые тормозят загрузку страничек).

    1. Юрий, не все же так как вы разбирается в CSS, вернее нужно сказать, что большинство блоггеров не разбираются, а плагин поставил и задача решена.

      1. Абсолютно с Вами согласен, Рашида. У каждого свои пути решения задачи, хоть кому-то они могут показаться неидеальными.

  10. Спасибо вам большое, то что искал весь вечер и нашел только у вас. Рядом ведь копал, и не догадался слово left искать и заменить на right

    1. Рад, что статья помогла. Мне тоже не понравилось, что кнопка по-умолчанию слева и изменение ее положения не вывели в настройки плагина, поэтому решил написать об этом в статье, как изменить положение кнопки «Вверх» вручную, отредактировав код плагина.

      1. Да обычно все плагины, которые устанавливаю — приходится «допиливать» под себя — то отображение хромает, то еще чего... Разработчики не могут знать, что там мы себе придумали, и как бы оно хорошо выглядело...

        Хотя использование плагинов прекрасно подходит даже как шаблон для написания своих собственных 🙂

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

    1. Добавить в CSS нужно чтобы при в обычном состоянии прозрачность кнопки была opasity:0.5; а при div:hover {opasity:0.9;} — тогда в обычном состоянии кнопка будет полупрозрачной, а принаведении курсора — прозрачность будет убираться.

      А то в данный момент кнопка не реагирует на курсор (визуально) — что не есть особо хорошо, если рассматривать её со стороны пользователя.

      1. Есть пользователи, которые не догадываются, если в главном меню при наведении на кнопку разворачивается контекстное меню, то если кликнуть по этой кнопке, она будет вести на другую страницу. А Вы говорите о наведении на стрелку 🙂 За совет все равно спасибо.

        1. Да, и такое бывает — не все хотят разбираться с тонкостями исходного кода.

          Я раньше тоже не любил — но читать по пол дня форумы, чтобы решить проблему, при чем проблема снималась только частично надоело — вот и начал помаленьку копать...

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

          А вот по делу, адаптивную тему с нуля сверстать — сложновато 🙂

  12. После как отредоктировал плагин я обновил его ,и картинка исчезла.Кнопка стала как у вас на сайте как можно исправить, или просто плагин не объновлять ??

    1. Поиск должен вызываться нажатием клавиш Ctrl+F. Сохранить изменения — Ctrl+S.

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

      Более простой способ: залить на хостинг в папку с плагином в папку с картинкой свой файл со стрелкой с тем же названием.

  13. Спасибо!У меня получилось, правдо долго искал слово left но ничего нашол,было-бы хорошо если в статье написано как пользоватся пойском notepad+,а то я нашол так и не смог сохранить отредактированный плагин. Автор молоток

        1. Такс, а что изменение файлов кто-то производит на сервере? (Я думал все редактируют так как я в блокноте или специальных программах — а уже тогда на сервер по FTP синхронизируют...)

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

            1. При редактировании файла на сервере создаются копии через каждых несколько секунд — удаление которых возможно только копырсанием в базе данных. Новичкам очень удобно будет учиться копырсаться там?

              А потом еще и обижаются, что сайт подвисает...

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *