Окт
24
13

Как сделать кнопку вверх в WordPress (Back to top) через плагины

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

Можно, в принципе, создать кнопку наверх с помощью определенных скриптов и правки WordPress шаблона, однако есть вариант проще — плагины. Он идеально подойдет для тех, кому лень разбираться кодом, или тем, кто плохо ориентируется в вопросах веб-разработки. Кроме того, у модулей есть разные настройки для реализации тех или иных интересные фишек. А это тоже, согласитесь, весьма полезно. Из 10-ти плагинов, найденных для функции Back to top, я рассмотрю лишь 4, которые имеют достаточное число скачиваний и отвечают актуальным версиям системы WordPress.

Smooth Scroll Up

Плагин Smooth Scroll Up

Лекий и настраиваемый плагин Smooth Scroll Up позволяет добавить кнопку вверх для любого поста/страницы в WordPress. Скачали модуль более 40 тысяч раз, поддерживаются версии WP от 3.2 до 4.1. Последнее обновление было буквально недавно. Имеются переводы на разные языки (русского, украинского пока что нету).

Основные возможности Smooth Scroll Up:

  • Выбор разных элементов для кнопки вверх: текст, картинка, кнопка.
  • Выбор позиции для элемента Back to top: слева, справа, по центру.
  • Возможность указывать любой текст для кнопки наверх.
  • Задание расстояния от верха страницы, после которого появляется кнопка.
  • Анимация при скролинге (прокрутка, затемнение).
  • Отображение/скрытие на главной странице и мобильных устройствах.
  • Добавление события при клике.

Настройки кнопки вверх в Smooth Scroll Up

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

jQuery Smooth Scroll

Модуль jQuery Smooth Scroll

Модуль jQuery Smooth Scroll добавляет плавную прокрутку страницы после клика на кнопку вверх. Как и положено, после прохождения определенной точки на странице справа внизу появится элемент Back to top. Плагин скачали более 48 тысяч раз, официально поддерживается версия системы от 3.1 до 4.0. Модуль разработан на основе другого Scroll to Top, который (судя по всему) уже не столь актуален.

Основные фишки jQuery Smooth Scroll:

  • Автоматическое добавление кнопки после активации и отсутствие лишнего пункта меню в админке WordPress. Не зря в описании модуля сказано «активируйте и забудьте».
  • Плавная прокрутка, появление кнопки вверх в правом нижнем углу.
  • Легкая настройка с помощью правки css/js кода.
  • Все CSS и JS файлы сжаты для лучшего результата Google Page Speed.

Как видите, модуль jQuery Smooth Scroll имеет очень большое отличие от предыдущего. Здесь вообще нет настроек, но для кого это означает меньше мороки с изучением модуля.

WPFront Scroll Top

Плагин WPFront Scroll Top

Плагин WPFront Scroll Top, как и другие, позволяет пользователям сайта легко и быстро пролистывать его наверх с помощью специальной кнопки. Он полностью настраиваемый и работает на всех мобильных устройствах. Установок здесь несколько меньше — более 17 тысяч, поддержка для версий системы от 3.0 до 4.0.

Основные функции:

  • Собственно отображение кнопки вверх и прокрутка назад в начало страницы при клике.
  • Создание текстовой кнопки или картинки.
  • Добавление любого изображения (!) что захотите.
  • Скрытие на мелких устройствах и ifram’ах.
  • Фильтр для страниц/постов.

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

Настройки кнопки вверх в плагине WPFront Scroll Top

Scroll Back To Top

Scroll Back To Top

Последний плагин для рассмотрения — Scroll Back To Top. Выполняет все те же функции для кнопки вверх, которая появляется по мере прокрутки страницы вниз пользователем. Идеально подходит тем, кто не силен в HTML, CSS или jQuery. Модуль работает сразу после активации, но вы можете внести изменения в его настройки. Судя по скриншотам из админки разных опций хватает.

Настройки кнопки наверх Scroll Back To Top

Здесь и параметры для кнопки наверх (цвет, граница, фон, прозрачность), и задание расположения элемента Back To Top, и использование картинок или текста для него, плюс опции анимации при прокрутке и т.п. Поддерживаемые версии WordPress — от 3.0 до 3.9.2, скачан модуль более 18 тысяч раз.

Из этих четырех плагинов для кнопки наверх я бы и советовал вам выбирать. Очередность их в обзоре не является рейтингом, то есть не значит, что я рассматривал лучшие в начале или в конце статьи, они идут по мере ознакомления. Все, в принципе, зависит от ваших нужд. Если вы вообще далеки от разработки и WordPress, то проще всего установить Smooth Scroll Up и забыть. Желающим покопаться с настройками, подойдут два последних плагина. Первый — наиболее новый на данный момент. В общем, выбрать есть из чего.

рейтинг Оцените статью:
Ужасная статьяНичего интересногоТак себеНормальноХорошоКлассный постВ закладки!
(голосов - 3, средний балл: 7,00 из 7)
Загрузка...

категория Категории: Плагины;
теги Теги: , , , , .

комментариев 13 к статье “Как сделать кнопку вверх в WordPress (Back to top) через плагины”

  • Виктор   25.10.2014

    Хороший обзор.
    Предлагаю сделать 2 обзора по интересующей меня теме. Думаю этот вопрос будет интересен и другим.
    1. Задача такая. Есть сайт на WP (естественно), в котором сделана ошибка по группировке материала. Или иначе — пересмотрен проект. Нужно перегруппировать.
    Уточнение. Есть рубрика, в которой около 70 статей. Нужно сделать подрубрики. Получается, что страницы должны быть под новыми URL. И эти не одна страница.
    Как сделать так, чтобы подрубрики были организованы (URL части страниц изменены), но страницы с новыми URL не вылетели из индекса.
    Вроде понятно, что 301 редирект. Но это ведь не одна страница.
    Короче, нужен урок по массовому 301 редиректу. Хотя может есть и другой вариант.

    2. Как сделать на странице или в посте кликабельное оглавление (содержание) статьи?
    Я сейчас тупо пишу html код, но это очень неудобно с точки зрения последующих правок.
    Может есть какой-нибудь плагин?

  • Tod   25.10.2014

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

  • Vadar   28.10.2014

    Хорошая и очень удобная кнопочка!

  • Tod   30.10.2014

    Vadar, именно, а главное установка ее — сущий пустяк.

  • Максим   02.11.2014

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

  • Tod   03.11.2014

    Максим, в принципе, опция не сложная, можно и вручную добавить. Но я, если честно, постепенно привыкаю к плагинам, с ними все очень просто делается)

  • Елена Контиевская   16.08.2015

    Классный блог! Есть что почитать. Спасибо за быстрое решение моей задачи-поменять на моем новом шаблоне блога кнопочку ВВЕРХ. Выбрала плагин из предложенных вами в посте WPFront Scroll Top и очень довольна.
    Блог мой не перенасыщен плагинами…я сделала тщательную сортировку и оставила самые необходимые. И этот лишним не будет. Многие функции у меня вшиты в шаблон, так что поставила и настроила себе кнопочку за пару минут. Жму руку!..

  • Tod   17.08.2015

    Елена, спасибо. Рад, что информация вам пригодилась.

  • Строитель   07.09.2015

    Скажите, где можно найти плагин для такого же рейтинга постов как у Вас: Оцените статью

  • Tod   07.09.2015

    Строитель, в блоге используется плагин WP-PostRatings. Можете посмотреть статью о нем.

  • Александр   18.04.2016

    Поставил плагин WPFront Scroll Top и кнопку по цвету подобрал… Советую так как все пишут что очень удобно и посетителей привлекает…

  • Tod   18.04.2016

    Александр, согласен данные плагины — это реально удобно. По себе заметил, поэтому тоже установил)

  • vortex   21.08.2016

    WPFront Scroll Top — отличный плагин! Очень много настроек.

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


Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:

Последние посты
Лучшее в категории
Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости