Wordpress

WordPress кнопка вверх: 8 плагинов и одна хитрость

09.05.2021

Содержание

Кнопка Вверх — Новичкам о WordPress и SEO

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

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

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

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

без прокрутки колесика мыши.

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

Сегодня я хочу вам предложить очень не плохой плагин, который практически не создает нагрузки на ваш сайт и сервер. Со стильными копками и плавной прокруткой! Это плагин «Кнопка вверх». Результат его работы, «кнопку вверх»  вы можете видеть в правом нижнем углу этой страницы.

Установка плагина Кнопка Вверх.

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

После этого распаковать его и закачать папку плагина на свой сервер, с помощью ftp клиента или средствами установки плагинов WordPress.

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

http://Ваш_сайт.ru/wp-content/plugins/scrolltotop/image/UP13.png — не забудьте заменить Ваш_сайт.ru на свой домен, а имя файла картинки, на ту которая вам понравится и подходит под ваш дизайн.

Другие параметры плагина можно не менять.

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

Удачи Вам и процветания!

Кнопка Вверх для WordPress — плагин Dynamic To Top Options.

Здравствуйте, уважаемые читатели! Когда-нибудь задумывались над тем, как сделать кнопку Вверх для WordPress? Нет? Очень зря. Ведь это не только красивая, но и очень полезная вещь. Такая кнопка появляется в правом нижнем углу при прокрутке страницы вниз. Нажимаем на нее, и страница плавно возвращается к своему началу. Реализовать подобный эффектный переход наверх в WordPress можно с помощью плагина Dynamic To Top Options. О нем то я сегодня и расскажу.

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

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

Установка плагина Dynamic To Top Options стандартна. Скачайте последнюю версию, распакуйте и загрузите на сервер в директорию /wp-content/plugins. Активируйте и переходите к настройкам, которые в отличии от большинства других плагин, находятся в разделе «Внешний вид» — «To Top».

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

Первый раздел настроек называется Behavior, что означает свойства.

Scroll time — задает время прокрутки страницы к началу. Измеряется в миллисекундах.

Fade-in distance — расстояние от верхнего края страницы, начиная с которого появляется кнопка «вверх!».

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

Position — позиция кнопки на странице. На выбор 4 позиции:

  • top left — левый верхний угол
  • top right — правый верхний
  • bottom left — нижний левый угол
  • bottom right — соответственно нижний правый

Prevent on mobile — отображать или нет кнопку вверх в браузерах мобильный устройств.

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

Text version — позволяет написать на кнопке текст. После установки галочки, появится следующие поля:

  • Button text — текст, используйте простые и понятные слова — «Вверх!» «В начало страницы», «Наверх!», «К началу», «Up!», «Полетели!» и так далее;

    • [ad]

  • Font size — размер шрифта
  • Text color — цвет теста. Нажмите select для наглядного выбора цвета;
  • Bold Text — жирное начертание;
  • Text shadow — тень от букв;
  • Text shadow color — цвет тени.

Top/bottom padding — отступ сверху и снизу от текста или изображения внутри кнопки до ее границ.

Sides padding — аналогично предыдущему, только определяет отступ слева и справа.

Background color — задний цвет кнопки.

Border color — цвет границы.

Border width — ширина границы.

Border radius — определяет радиус скругления — от квадратной формы до круглой.

Inset highlighting — использование CSS3 для отображения цвета кнопки. Лично я не почувствовал разницы с использованием CSS3 и без.

Shadow — отображает тень, используя CSS3.

Не забудьте сохранить внесенные изменения. Если этот плагин чем-то не понравился и хочется нечто большего, то вы вполне можете добавить кнопку вверх на сайт самостоятельно. Это не так уж и сложно, как может показаться на первый взгляд. Главное — верить в свои силы!

Спасибо за внимание! Подписывайтесь на ленту новостей блога FairHeart.ru. Берегите себя!

Лучший способ выразить благодарность автору — поделиться с друзьями!

Узнавайте о появлении нового материала первым! Подпишитесь на обновления по email:

Следите за обновлениями в Twitter и RSS.

Плагин кнопки «Наверх» как вконтакте для WordPress

Долго думал, стоит ли в заголовке писать, что кнопка «как в вконтакте», в принципе в этой кнопке нет ничего от вконтакте кроме двух идей: перехода на предыдущую страницу и идеи прокрутки вниз. Короче решил, что лучше не писать 🙂

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

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

А пока что — качайте (ссылка внизу поста).

Что уже реализовано на данный момент: (есть такая вот страница с настроечками)

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

Планы по доработке плагина:

  • различные варианты расположения кнопки по отношению к сайту
  • возможность отключать автоматическую подстройку кнопки под монитор пользователя
  • использование различных вариантов оформления кнопки, не залезая в код
  • настройка таких параметров, как скорость прокрутки и эффект анимации прокрутки (easing), возможность отключения эффектов вообще
  • создания собственной страницы плагина с документацией, FAQом и прочее

Я протестировал кнопку на двух стандартных темах в WordPress, Twenty Ten 1.4 и Twenty Eleven 1.3

Что делать, если кнопка не работает?

  • обновить кэш
  • убедиться, что в теме подключены wp_head() и wp_footer()
  • как можно подробнее описать свою проблему в комментариях к этому посту, я обязательно отвечу в течение дня

Миша

Недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.

Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.

Плагин Кнопка Вверх. Как увеличить пребывание посетителей на блоге.

Встречайте новый, полезный плагин, Кнопка Вверх.

Я разработала этот плагин специально для пользователей шаблона “AB-Inspiration“.

Для чего этот плагин?

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

Зачем?

Позвольте объяснить.

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

Гуляя вы зашли далеко и пора возвращаться домой.

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

Так происходит и на блоге.

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

Это может быть для него очень скучным и … читатель просто напросто может закрыть блог и уйти.

Вам знакома эта ситуация?

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

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

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

Поэтому ваши читатели дольше будут оставаться у вас на блоге. Факт!

Как он работает ?

Какие он имеет настройки? 

Плагин заменяет ссылку «Вверх» в футере шаблона “AB-Inspiration” на плавающую Кнопку Вверх, с настройками на любой ваш вкус.

Делая самостоятельно и просто настройки плагина «Кнопка Вверх» Вы легко можете:

1. Выбрать  внешний вид кнопки из уже готовых вариантов картинок;

2. Загрузить,  свое произвольное изображение;

и кнопка будет выглядеть так:

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

например так:

4. Написать на кнопке любой текст, что хотите, при этом выбрав шрифт и цвет текста

например так:

5. Расположить  Кнопку Вверх на экране компьютера:

слева,

справа, 

 

 или по центру

но и это еще не все.

6. Сделать кнопку простым выбором выпадающего меню:

– непрозрачной,  для четкой видимости,

вот такой:

– средней прозрачности, приятной для острого глаза :),

такой:

 

и легкой прозрачности, еле заметной, ненавязчивой.

такой:

и..это еще все.

7.  наконец,  есть возможность выбрать 5-ть уровней скорости прокрутки страницы:

очень быстро и быстро,

 

средне, медленно,

и очень медленно, но приятно…

Как установить плагин на блог?

Это просто.

Плагин загружается как обычно все плагины, через админку блога, в разделе “Плагины”.  Далее Вы активируете сам плагин и его лицензию.

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

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

ВАЖНО!  “Кнопка Вверх”  создана только для пользователей шаблона “AB-Inspiration“.

Посмотреть работу плагина Кнопка Вверх можно на моем блоге (справа красная кнопка со словом “вверх”), а также здесь.

Ваши выгоды  использования плагина:

  1. сделает блог более интерактивными и привлекательным;
  2. создаст удобные и комфортные условия для посетителя блога;
  3. придаст изюминку дизайну блога;
  4. увеличит прибывание посетителей на блоге.

Кстати, интересно, какая из настроек блога показалась вам наиболее привлекательна.

Примечании! В новой версии многофункционального шаблона-конструктора AB-Inspiration Кнопка Вверх встроена.

Плагин Кнопка Вверх. Как увеличить пребывание посетителей на блоге.

   2 голоса
Средняя оценка: 3 из 5

Кнопка вверх для сайта на WordPress с плагином и без него

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

Мнения о том, действительно ли так необходима кнопка наверх для сайтов, разделились. Многие считают, что это перебор, излишнее украшение, но большинство веб-мастеров всё-таки устанавливают кнопки наверх для сайта или блогов.

Как установить кнопку вверх на сайт WordPress

Кнопка вверх для сайта на WordPress устанавливается несколькими способами. Первый и наиболее простой способ – это установка при помощи плагинов. Самыми популярными плагинами считаются:

  • jQuerySmoothScroll – после установки и активации данного плагина кнопка на верх добавляется на сайт автоматически в нижнем правом углу.
  • SmoothScrollUp – русифицированный плагин с минимальными настройками, который позволяет сделать плавную прокрутку вверх при нажатии.
  • WPFrontScrollTop – данный плагин дает возможность выбора изображения для этого элемента из встроенной галереи. Но даже если не нашлось подходящей картинки для кнопки вверх в базе, можно прописать ссылку на свою иконку. У плагина есть незначительный недостаток — он полностью на английском языке.
  • ScrollBackToTop – аналогично плагину WPFrontScrollTop, плагин позволяет выбрать, как будет выглядеть кнопка вверх на сайте. В любое время у администратора есть возможность изменить дизайн и настройки.

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

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

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

Кнопка «Вверх» для WordPress — БЛОКНОТ ПАРТНЕРА

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

Данный пост посвящен установке и настройке плагина Simple Scroll to Top Button для сайта или блога, разработанного на движке WordPress.

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

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

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

Находим в установленных плагинах наш плагин и нажимаем кнопку «Настройки».

Открывается страница настроек внешнего вида кнопки «вверх».
Страница настройки плагина «кнопка вверх»

 

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

В настройках можно задать размер самой кнопки, её прозрачность, время скроллинга.

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

Кнопка этого плагина устанавливается с правой стороны открываемой страницы в нижней её части.

Смотрите видео с установкой и настройкой плагина Simple Scroll to Top Button ( кнопка «вверх»).

Добавьте кросс-браузерную кнопку «Scroll to Top» на ваш вебсайт. Она будет совместима и работать со всеми основными браузерами, а также будет работать с любой темой!
Версия 4.6 | Автор: Артур Гарегинян

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

Как установить кнопку «вверх» — плагин Scroll to Top

Здравствуйте читатели моего блога! После смены темы моего сайта я обратил внимание что испарилась кнопка «наверх».

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

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

Поэтому я озаботился установкой кнопкой «Вверх» на сайт.

Содержание статьи

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

Проштудировав интернет, оказалось, что есть несколько вариантов решения данной проблемы:

  1. Установка кнопки с помощью кода
  2. Установка плагина Scroll to Top

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

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

Установка плагина Scroll to Top

Заходим в меню и настраиваем по пунктам

  1. Если нас не устраивает стандартное изображение кнопки идущее с плагином, прописываем путь к своей картинке
  2. Скорость пролистывания вверх, можно оставить пустым (настройки по умолчанию)
  3. Номер строки после которой должна появляться кнопка, можно оставить пустым

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

Устанавливаем новые координаты кнопки

Как я сделал у себя, возможно это и не самый правильный вариант, но у меня все получилось и работает. Для того чтобы изменить местоположение кнопки «Вверх» идем меню Плагины -> Редактор далее в выпадающем меню выбираем наш плагин Scroll to Top и не забываем подтвердить нажав Выбрать

Выбираем плагин для редактирования кода

В тексте кода находим такой текст (примерно на 1/3 от начала кода):

controlattrs: {offsetx:20, offsety:70}

и соответственно меняем координаты вывода по X — offsetx и Y — offsety (по умолчанию стоит x=5, y=5) После всех манипуляций кнопка выглядит красиво и находится на своем месте.

Кнопка вверх

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

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

Жду Ваших комментариев. Подписывайтесь на обновления блога. Буду благодарен, если Вы поделитесь этим постом в социальных сетях!

Дмитрий Леонов | leonov-do.ru

 

Подпишитесь на рассылку с блога

Поделиться в социальных сетях

WPFront Scroll Top — плагин для WordPress

Плагин

WPFront Scroll Top позволяет посетителю легко вернуться к началу страницы с полностью настраиваемыми параметрами и изображением. Плагин WPFront Scroll Top имеет следующие функции.

Характеристики

  • Отображает кнопку, когда пользователь прокручивает страницу вниз.
  • Прокручивает страницу обратно вверх с анимацией.
  • Ссылка на элемент на странице.
  • Ссылка на другую страницу с помощью URL.
  • Кнопка «Создать текст, изображение или Font Awesome».
  • Установите любое изображение, которое хотите.
  • Скрыть на маленьких устройствах.
  • Скрыть в окнах iframe.
  • Фильтр страниц / сообщений.
  • Автоматически скрывать.
  • Асинхронный JavaScript.

Посетите страницу WPFront Scroll Top Settings для получения подробных описаний параметров.

  • Страница настроек.
  1. Щелкните Плагины / Добавить новый в панели администратора WordPress.
  2. Найдите «WPFront Scroll Top» и установите.

-или-

  1. Загрузите пакет .zip.
  2. Распакуйте в подкаталог «wpfront-scroll-top» в локальном каталоге плагинов WordPress.
  3. Обновите страницу плагина и активируйте плагин.
  4. Настройте плагин с помощью ссылки Scroll Top в меню «Настройки».

«WPFront Scroll Top» — это программное обеспечение с открытым исходным кодом. Следующие люди внесли свой вклад в этот плагин.

авторов
2.0.4
2.0.3
  • Устарелые исправления jQuery.
  • Исправления совместимости.
  • Исправление конфликта SiteGround.
2.0.2
  • Исправляет работоспособность сайта WordPress 5.2, wp_version_check, конфликт.
2.0.1
  • Ссылка на элемент.
  • Ссылка на страницу.
  • Легко выбирайте изображение из медиатеки.
  • Улучшения производительности.
1.6,2
  • Требуется минимум PHP 5.3.
  • Исправления ошибок.
  • Меню перемещено в меню «Настройки».
  • Исправления совместимости с PHP 7.2.
1.6.1
1,6
  • Поддержка иконок Font Awesome.
  • Новые значки изображений.
  • Настройка перемещения меню в разделе «Настройки».
  • Повышение производительности.
  • Улучшение пользовательского интерфейса.
  • Исправления совместимости с PHP 7.
1,5
  • JavaScript асинхронный.
  • Минифицированные файлы.
  • Языковые файлы удалены.
1,4,5
  • Добавлен украинский перевод. Спасибо Иванке Скакун.
1,4,4
  • Исправление совместимости с темой Zerif.
1.4.3
1.4.2
  • Исправления ошибок.
  • Добавлен немецкий язык.
1.4.1
  • Исправления ошибок
  • Русский язык добавлен
1,4
  • Атрибут ALT изображения
  • Языковые переводы
1.3
  • Автоматически скрывать
  • Скрыть на wp-admin
  • Скрыть в окнах iframe
  • Фильтр страниц / сообщений
1,2
  • Вариант текстовой кнопки
  • Исправления ошибок
1.
1.1
  • Улучшения стабильности
  • Новая структура меню
1,1
  • Новая возможность скрыть на мобильных устройствах
  • Исправлены конфликты с другими плагинами
1.0.1
1,0

Добавление кнопки возврата к началу страницы на вашем сайте WordPress — Goedemorgen

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

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

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

На вашем сайте WordPress может быть кнопка «прокрутить вверх», и есть два способа добавить ее: либо использовать плагин, либо написать собственный код. Если вы используете тему Goedemorgen, вы можете отобразить эту кнопку без добавления каких-либо плагинов или написания кода.Тема имеет встроенную функцию отображения кнопки «вернуться к началу».

Метод №1: Использование плагина WordPress

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

Вернуться к началу

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

Скачать

Динамический подключаемый модуль «Наверх»

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

Скачать

WP Передняя прокрутка вверх
Плагин

WPFront Scroll Top позволяет посетителю легко вернуться к началу страницы с полностью настраиваемыми параметрами и изображением. Плагин WPFront Scroll Top имеет следующие функции.

Скачать

Плавная прокрутка вверх

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

Скачать

Верхняя часть Smart Scroll
Плагин

Smart Scroll Top предназначен для отображения настраиваемой и гибкой кнопки Back To Top на вашем сайте WordPress.Он поставляется с неограниченным выбором цвета, переключателем положения и настраиваемым текстом.

Скачать

Топор ScrollTo Top

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

Скачать

Прокрутка к верхней кнопке

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

Скачать

Метод № 2: Добавление собственного кода

В этом методе мы собираемся написать код, который добавит эффект плавного перехода наверх на ваш сайт WordPress.Обратите внимание, что текущий метод требует редактирования файлов темы, поэтому не рекомендуется делать это на вашем рабочем (рабочем) сайте. Более того, если вы планируете внести изменения в свою тему, лучше всего использовать дочернюю тему для WordPress, чтобы вы могли сохранить свои изменения после обновления темы.

Готовы? Давайте добавим код!

Сначала создайте файл JavaScript и сохраните его как back-to-top.js . Скопируйте и вставьте код в файл, который вы можете найти ниже, в первом блоке кода.Поместите этот файл в папку JavaScript вашей темы, которая находится в wp-content / themes / theme_name / js . Если в вашей теме нет папки js , тогда создайте папку для вашего файла JavaScript.

Во-вторых, откройте файл functions.php и добавьте код, который находится во втором блоке кода. Этот код добавит кнопку на ваш сайт WordPress и загрузит файл JavaScript, который вы создали ранее.

В-третьих, добавьте стиль кнопки (вы можете найти его ниже, в третьем блоке кода) в таблицу стилей вашей темы.

https://gist.github.com/dashkevych/7c92d92f88aaa56f13bc99f7c92b7d78

Как вы думаете, кнопка «Вернуться в начало» полезна для сайта? Дайте нам знать, оставив комментарий ниже.

Как сделать кнопку возврата наверх в WordPress

После установки вы сможете найти плагин на вкладке Settings на вашей панели инструментов под названием Scroll Top .

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

Непрозрачность кнопки — также отличный вариант, который позволяет сделать кнопку ярче, когда она не активна . Это дает приятный анимационный эффект.

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

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

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

Плагин

WPFront Scroll Top также содержит огромного количества изображений, которые вы можете выбрать, чтобы настроить стиль кнопки в соответствии с темой вашего веб-сайта.Если ни одно из изображений в этом списке вам не подходит, , вы также можете выбрать одно из своих . Для этого вам нужно сначала добавить изображение в Media Library , чтобы оно появилось в списке доступных кнопок изображений. Другой вариант — добавить свое изображение, вставив собственный URL-адрес.

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

11 лучших плагинов WordPress. Наверх

Если вы запускаете веб-сайт WordPress, вы, вероятно, предлагаете комбинацию короткого и длинного контента.В зависимости от того, каким типом сайта вы управляете, этот длинный контент может принимать форму длинного сообщения в блоге или страницы продукта, на которой перечислены десятки продуктов электронной коммерции.

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

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

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

Лучшие плагины для WordPress

  1. WP Передняя прокрутка вверх
  2. К началу
  3. Кнопки плавной прокрутки страницы вверх / вниз
  4. Вернуться к началу Pro
  5. ID Вернуться к началу
  6. Плавная кнопка возврата наверх
  7. Nicescrollr
  8. Кнопка простой прокрутки к верхней части
  9. Наверх / ID
  10. Нажмите, чтобы начать
  11. Лучи меня Скотти

1.

WPFront Scroll Top

WPFront Scroll Top — это плагин Back to Top с наивысшим рейтингом в каталоге WordPress. Этот инструмент подключает несколько настроек для точного управления тем, как кнопка «Вернуться к началу» выглядит и ведет себя на вашем сайте. Вы можете установить размер кнопки, время ее появления на странице и время, необходимое для прокрутки назад к верхней части страницы после того, как посетитель нажимает кнопку. Вы также можете скрыть его на экранах определенных размеров.

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

2. К началу

To Top — еще один популярный и высоко оцененный плагин Back to Top для WordPress. Как и WPFront Scroll Top, To Top предлагает несколько настроек для управления внешним видом и поведением кнопки Back to Top на вашем сайте.

В качестве кнопки можно установить значок или изображение. Если вы выберете значок, вы можете выбрать один из трех типов, а затем настроить цвет, цвет фона, размер и границу.У вас не будет этих вариантов, если вы выберете изображение.

Вы также можете настроить плагин, чтобы скрыть кнопку Back to Top на маленьких экранах, изменить ее расположение на странице или скрыть ее через определенный период времени на странице.

3. Кнопки плавной прокрутки страницы вверх / вниз

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

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

4. Вернуться к началу Pro

Back to Top Pro — уникальный плагин для WordPress. С помощью этого плагина вы можете добавить кнопку «Вернуться к началу» и несколько других опций, включая «Назад», домашнюю страницу, электронную почту, корзину и кнопку мессенджера Facebook.

Этот плагин также предлагает несколько настроек для настройки стиля, размера, цвета и положения этих кнопок.

5. ID Вернуться к началу

ID Back to Top — ранее известный как Scroll Top — это один из самых простых плагинов Back to Top для WordPress. Вы можете установить тип кнопки «Вернуться к началу» (значок или текст), а также ее положение, цвет, скорость и расстояние. Если вы выберете кнопку со значком, вы можете выбрать один из трех вариантов на странице настроек плагина.

Если вам нужен больший контроль над внешним видом и поведением кнопки «Вернуться к началу» и вы знаете, как кодировать, вам также предоставляется возможность добавить собственный CSS.

6. Плавная кнопка возврата наверх

Плагин Smooth Back To Top Button — это легкое и настраиваемое решение для добавления кнопки Back to Top на ваш сайт WordPress. Как и другие плагины в этом списке, вы можете изменить тип значка, продолжительность прокрутки, параметр цвета и положение кнопки на странице настроек плагина. Вы также можете скрыть кнопку на небольших экранах.

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

7. Nicescrollr

Nicescrollr — еще один бесплатный плагин Back to Top для WordPress. Что отличает его от других плагинов в этом списке, так это то, что он позволяет вам добавлять кнопку Back to Top и полосу прокрутки на передней и задней части вашего сайта. Также он предлагает наибольшее количество настроек. Вы можете изменить размер кнопки, скорость прокрутки и включить более продвинутые функции, такие как плавная прокрутка и прокрутка с отскоком, и многое другое.

8. Простая прокрутка к началу

Simple Scroll to Top Button — это простой в использовании плагин, который предлагает вам некоторый контроль над кнопкой Back to Top на вашем сайте.

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

9. Вернуться к началу / ID

Back to Top / ID — это плагин премиум-класса, который позволит вам добавить настраиваемую кнопку Back to Top на ваш сайт WordPress. Вы можете выбрать из более чем 32 анимационных эффектов, восьми предустановленных цветовых схем, шести положений кнопок и четырех макетов кнопок, чтобы создать и настроить кнопку «Вернуться к началу».

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

10. Нажмите, чтобы начать

Click to Top — это многофункциональный плагин для добавления кнопки Back to Top на ваши сообщения и страницы. Вы можете выбрать одно из двух положений кнопок, два стиля кнопок, 13 значков прокрутки и 55 эффектов наведения. Вы также можете установить кнопку как значок или текст и выбирать из неограниченного количества цветов и цветов фона.

11. Лучше меня Скотти

Плагин Beam me up Scotty позволяет быстро и легко добавить кнопку Back to Top на ваш сайт WordPress. В настройках плагина вы можете настроить размер, цвет, стиль и прозрачность кнопки «Вернуться к началу». Вы также можете установить цвет и прозрачность наведения, чтобы кнопка меняла внешний вид, когда пользователь наводит на нее указатель мыши. Вы также можете скрыть кнопку, когда пользователь не выполняет прокрутку, или настроить ее так, чтобы она скрывалась по прошествии определенного времени.

Сделайте так, чтобы читатели меньше просматривали ваш сайт

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

Примечание редактора: этот пост был первоначально опубликован в октябре 2019 года и был обновлен для полноты.

Добавьте динамическую кнопку «Вернуться наверх» на свой сайт WordPress

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

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

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

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

Прежде чем начать

Пример кнопки «Вернуться вверх», которую мы будем создавать.

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

Во-первых, перед тем, как начать, вы должны сделать одно невероятно важное действие.

Шаги по настройке кнопки просты, но для этого потребуется отредактировать файлы темы. По этой причине важно сделать резервную копию файлов style.css, и functions.php в теме, в которой должна отображаться кнопка. Пока вы это делаете, сделайте резервную копию всего сайта на всякий случай и потому что это хорошая привычка.

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

Все готово? Пошли!

Скопируйте и загрузите скрипт

Получите доступ к файлам вашего сайта через FTP или cPanel и перейдите в папку JavaScript вашей темы, которая находится в wp-content> themes> your-theme> js .

Местоположение этого файла может отличаться от темы к теме, но обычно вы найдете его здесь. Если в вашей теме нет папки js , создайте ее.

В этой папке создайте новый файл с именем topbutton.js . Вы можете назвать этот файл как хотите, но если вы все же измените имя, имейте в виду, что вам также нужно будет изменить каждую ссылку на него в добавляемом коде. В любом случае добавьте в новый файл следующий код:

Вы можете настроить скорость прокрутки кнопки вверх, изменив число рядом с var speed = вверх. Чем выше число, тем медленнее будет автоматическая прокрутка.

Точно так же вы можете настроить скорость затухания анимации, отредактировав число рядом с var duration = и количество пикселей, прокручиваемых на странице, когда появляется кнопка, путем редактирования значения для var offset = .

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

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

Сделайте кнопку

Нажмите на изображение загруженной кнопки в медиатеке, чтобы найти URL-адрес, необходимый для выполнения этого шага.

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

После того, как вы загрузили файл изображения, вы можете найти нужный URL, просмотрев медиабиблиотеку и нажав на миниатюру своей кнопки.Появится встроенное всплывающее окно, а справа вы найдете ссылку.

Если вам не нравится идея добавления изображения, и вы предпочитаете добавить текст, это тоже возможно.

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

Не закрывайте эту страницу и переходите к следующему шагу.

Отредактируйте файл

style.css

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

В качестве альтернативы, если вы ранее установили плагин, такой как Simple Custom CSS, вы можете добавить код прямо в предоставленную область. Не забудьте нажать кнопку сохранения!

Не забудьте заменить ссылку на изображение в этом фрагменте кода URL-адресом вашей кнопки, который вы указали на предыдущем шаге. Если вы не измените ссылку, кнопка не появится, так что не забудьте этот шаг.

4. Отредактируйте

functions.php

Чтобы созданный вами файл JavaScript имел какой-либо эффект, вам необходимо сообщить WordPress, что вы хотите использовать этот файл. Вы можете сделать это, создав так называемый сценарий постановки в очередь в файле functions.php вашей темы.

Лучшее место для добавления следующего кода — в самый конец файла, так будет меньше шансов, что он будет мешать другому коду.

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

Добавить ссылку на кнопку

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

Вы можете поместить эту ссылку в каждый шаблон страницы, который у вас есть, или в файл header.php , но поскольку кнопка появится внизу страницы, давайте поместим ее в нижний колонтитул.Это сохранит простоту и комфорт на случай, если вы решите внести изменения в будущем.

Я поместил ссылку над тегом нижнего колонтитула в файле footer.php при тестировании этой кнопки в теме по умолчанию Twenty Fifteen.

Откройте файл footer.php , который, скорее всего, находится в папке wp-content> themes> your-theme .

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

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

CSS в настоящее время установлен на фиксированное положение в 5 пикселей от нижней и правой стороны окна, поэтому в настоящее время это не должно быть проблемой. Вот ссылка, которую вам нужно будет добавить в нижний колонтитул .php файл:

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

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

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

Последние мысли

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

Scroll Back to Top автоматически добавляет на ваш сайт кнопку «Назад вверх» — кодирование не требуется.Если вы хотите изменить размер, цвет, расположение и другие параметры кнопки, это вполне возможно. Вы можете получить доступ к параметрам настройки через панель администратора в разделе «Настройки »> «Вернуться к началу» . Это очень простой в использовании плагин, который к тому же отлично выглядит. Это, безусловно, прекрасная альтернатива написанию собственного решения.

Теперь вы готовы улучшать впечатления посетителей от каждого клика.

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