КНОПКА ВВЕРХ WORD PRESS ЛУЧШИЕ ПЛАГИНЫ

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

Можно, в принципе, создать кнопку наверх с помощью определенных скриптов и правки WordPress шаблона, однако есть вариант проще — плагины.

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

Smooth Scroll Up

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

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

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

JQuery Smooth Scroll

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

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

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

WPFront Scroll Top

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

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

Scroll Back To Top

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

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

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

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

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

Сегодня я познакомлю вас с лучшими плагинами с помощью которых вы сможете установить кнопку Back to top (Scroll To Top) на свой сайт или блог. Плагины подобраны по наибольшему скачиванию модулей пользователями платформы WP. Напомню, все плагины можно установить стандартным способом, из админки, через поиск и загрузчик плагинов. Скачивать ни чего не надо. Установил, активировал, настроил и всё.

Простой плагин jQuery Smooth Scroll

Плагин jQuery Smooth Scroll

Модуль для плавной прокрутки обратно вверх. Данный плагин автоматически добавляет кнопку вверх (стрелка), после установки и активации модуля.  Кнопка вверх появится в правом нижнем углу сайта. Как говорится, установил и забыл.  Установили плагин уже более 50 700 раз. Все файлы CSS и JS сжимаются, чтобы получить высокий балл в Google Page Speed.

А вот так выглядит наша кнопочка:

Кнопка вверх на сайте WP

Легкий плагин Smooth Scroll Up — плавная прокрутка вверх

Легкий плагин Smooth Scroll Up

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

Опции для настройки плагина Smooth Scroll Up

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

Плагин WPFront Scroll Top

Добавляем кнопку прокрутки вверх

Модуль WPFront Scroll Top позволяет посетителю легко прокручивать назад до верхней части страницы с полностью настраиваемыми параметрами и изображением. Данный плагин имеет больше настроек и главное, очень большой выбор иконок (изображений) самой кнопки. А так же можно обойтись и без картинки:

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

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

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

Плагин Scroll Back To Top — кнопка на вверх

Плагин Scroll Back To Top

Модуль Scroll Back To Top также имеет ряд настроек и выбора как будет выглядеть кнопка на верх:

Настройка плагина Scroll Back To Top

И собственно выбор самой кнопки:

Выбор кнопки на вверх

А вот пример кнопочек на сайте WordPress стрелка вверх:

Пример кнопок вверх на сайте

И ещё, пара.

Simple Scroll to Top Button

Кнопка Scroll to Top для ВордПресс

Простой в использовании, с интуитивно понятным интерфейсом, плагин WordPress, который дает вам возможность легко и безопасно добавить кнопку «Scroll to Top» на ваш сайт WordPress. Кнопка «Scroll to Top» появляется в правом нижнем углу веб-сайта, когда посетители прокручивают страницу.

Этот плагин дает вам более полный контроль над кнопкой вверх, её можно настроить на странице настроек модуля. Вы можете выбрать, где будет отображаться кнопка, например, домашняя страница или все страницы. Вы можете настроить стиль кнопки. Plagin переведён на русский язык. Разберётесь с лёгкостью:

Разделы Настройки и Предварительный просмотр

Совместим со всеми темами WordPress. Просто установи, настрой и начинай наслаждаться своей модной кнопкой «Scroll to Top». Плавающая кнопка на сайте сбоку ВордПресс:

Стрелка наверх на сайте

А вот есть и такие: кнопки плавной прокрутки вверх / вниз

Smooth Scroll Page Up/Down Buttons

Если одной стрелки вам мало, то можно установить две: вверх и вниз. Плагин Smooth Page Scroll Up / Down Buttons для WordPress добавляет кнопки на каждую страницу вашего сайта, которые можно использовать для плавной прокрутки вверх или вниз. Это может быть особенно удобно для страниц с большим количеством текста / контента. Есть станицы с настройками. Например, расположение Buttons, используйте любой из 4 шаблонов макета. Установите скорость, с которой страницы должны прокручиваться:

Экран настроек расположения Buttons

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

Вступление

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

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

Пример кнопок можно забрать

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

Для установки кнопки «Наверх» нужно сделать четыре несложных шага.

Поместить нужную картинку для кнопки на сайт

Работает кнопка наверх в виде картинки при помощи скрипта. Скрипт скрывает кнопку, если посетитель находится вверху окна, и плавно показывает картинку при начале прокрутки страницы вниз и опять скрывает кнопку при возвращении наверх.

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

Вставить код кнопки «Наверх» в файл footer. php вашего шаблона

Соблюдайте безопасность при редактировании шаблона.

В коде, ниже, замените адрес картинки и адрес скрипта на ваши адреса, зафиксированные в пунктах 1 и 2.

Задать стиль CSS своей созданной кнопки

Предлагаю следующий стиль для кнопки «Наверх» :

Примечание: Если не размещать скрипт (toTop.js) в каталоге сайта, то кнопка все равно появится. Только она будет постоянно видна ,и при нажатии на нее будет перескакивать наверх, а не скользить.

наиболее распространенная ошибка это неправильно указанные пути в коде до скрипта и до картинки.

На этом все, Кнопка наверх в виде картинки установлена.

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

Плагин Dynamic “To Top” Plugin

Официальная страница плагина Dynamic “To Top” Plugin (). Плагин размещает кнопку «Наверх» на сайте. Устанавливается плагин любым из способов установки плагинов wordpress. Язык плагина английский.

Настройки плагина Dynamic “To Top” включают:

Скриншоты плагина Dynamic “To Top” Plugin

Плагин Scroll To Top

Официальная страница плагина Scroll To Top (). Плагин для размещения кнопки «Наверх» на сайте. Установка плагина стандартная. Язык английский.

Примечание: Сестра плагина Scroll To Top, плагин кнопка «Вниз» под названием ScrollTo Bottom. Официальная страница плагина: .

Плагин Skysa Scroll-to-Top App

Официальная страница плагина Skysa Scroll-to-Top Add (https://wordpress.org/extend/plugins/skysa-scroll-to-top-app/). Плагин для установки панели Skysa внизу страниц сайта. В бесплатной версии в панели устанавливается только стрелка «Наверх» с пользовательской надписью.

В бесплатной версии плагина практически нет настроек. Только бар со стрелкой и пользовательской надписью. Перед покупкой pro версии дают 15-дневный срок для тестирования.

Скриншоты плагина Skysa Scroll-to-Top App

Если вам НЕ нужны красивые и «навороченные» кнопки «Наверх», а достаточно простой надписи, то достаточно безопасно вставить нижеследующий код в любое место шаблона своего сайта (например, footer.php), где хотите показать надпись “Наверх” или любую запись понятную пользователю:

Все! Больше делать ничего не нужно.

Такая надпись «Наверх» не конфликтует с плагинами, ее можно использовать, как дополнительную кнопку «Наверх».

Для дополнения информации, приведу список еще 5 плагинов для реализации на сайте кнопки “Наверх”. Поддержка и обновление плагинов постоянно меняется, поэтому говорить о них можно только, на момент использования.

Другие статьи раздела

WordPress МанияПлагиныКнопка Вверх WordPress. Лёгкий плагин

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

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

Плагин для WordPress: кнопка на вверх

Хотя некоторые товарищи специально такие кнопки не ставят, утверждая, что читатели сайта/блога пусть лишний раз увидят рекламу или информацию в сайдбаре прокручивая страницу вручную. Мне кажется сначала надо создать все условия для своих читателей, чтобы они потом захотели вернуться к вам назад. Ладно, это их личное дело, а мы не такие.

Плагин Scroll Top

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

Кнопка вверх для сайта WordPress

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

Вы получите такие функции, как неограниченный выбор цвета, значок шрифта.

И так, чтобы установить волшебные кнопки на свой любимый блог, зайдите — Плагины — Добавить новый. В окно поиска введите Scroll Top. На открывшейся странице с результатами и найдите искомый нами, кликнете «Установить»:

Установить и активировать плагин

После успешной установки, незабываем нажать  «Активировать».

Далее, для настройки кнопки вверх переходим: Настройки — Scroll Top и делаем ваши изменения (если потребуется):

Настройка плагина Scroll Top

Нажимаем «Сохранить изменения». Готово. Кнопка вверх установлена автоматически. Зайдите в блог/сайт и попробуйте: при прокрутке страницы вниз кнопочка плавно появиться справа или слева страницы сайта.

Поменять дизайн и настройки кнопки можно в любое время, как и все установленные у вас плагины. Работать с ВордПресс просто великолепно, почему я раньше не перешёл на него. На Blogger просидел больше двух лет. Лучше поздно, чем никогда. Теперь всех своих читателей блогов на блоггер переманиваю на популярную и любимую платформу WordPress.

На этом у меня всё. Позвольте мне, не надолго попрощаться с вами. Удачи.

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

Кнопка вверх для сайта с плагином jQuery Smooth Scroll

Поклонникам простоты и скорости подойдет плагин кнопки jQuery Smooth Scroll ссылка на WordPress.org. Установить можно из админки, изображение модуля выглядит так.

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

работа jQuery Smooth Scroll

Что делать если CSS и JS не знакомы администратору сайта. Тогда разберем другой инструменты.

Simple Back To Top

Пойдем от простого к сложному, Simple Back To Top имеет одну функцию – изменять значок кнопки вверх. Ставится так же из панели WordPress стандартным поиском.

Выбор стрелки сзображением

Если картинка будет круглая, то обязательно делайте с прозрачным фоном в формате PNG.

Решение типа все включено, плагин WPFront Scroll Top имеет множество настроек и гибкость в выводе кнопки наверх. На скриншоте только часть панели WPFront.

Что умеет WPFront:

Отличный инструмент, помогающий сделать на WordPress еще одну интересную функцию.

Создаем back to top без плагина

Без плагина кнопку на верх сделать не сложно, стоит придерживаться инструкции. Мы написали код, сейчас разберем его составляющие. Разделим конфигурацию на три кода, первый – тег button. Внутри тега атрибут class и текст, выводимый на блоге. Вставляем в файл темы WordPress на то место, где хотим его видеть, например, правый нижний угол, тогда записываем код в файл footer активной темы перед закрывающим тегом body.

Вставка в footer

Следующая запись это JS код, вставляем так же перед закрывающим тегом body, все скрипты должны располагаться в подвале сайта. Не забываем нажать Обновить.

javascript в подвале

Третий код это CSS стили, подобрали нейтральный синий цвет. Вставляем в файл style.css активной темы WordPress.

Вставка стилей в style.css

Если сделали по инструкции, то на сайте появится кнопка с надписью наверх.

Заканчиваю статью, разобрались как сделать кнопку, ведущую вверх страницы в CMS WordPress с помощью двух способов: без плагина и с ним, успехов!