Лучшие инструменты для создания кнопки вверх на сайте WordPress

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

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

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

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

jQuery Smooth Scroll
JSS

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

кнопка вверх визуально
работа jQuery Smooth Scroll

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

Simple Back To Top

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

Выбор стрелки
Выбор стрелки сзображением
  • В разделе Настройки появится раздел Back To Top – SBTT
  • Выбираем новую картинку путем нажатия «Выберите файл»
  • Нажимаем Save

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

WPFront Scroll Top

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

Настройки WPFront Scroll Top
Панель WPFST

Что умеет WPFront:

  1. Установка интервала от верхнего края прокрутки, когда появится кнопка
  2. Установка размеров вручную
  3. Настройки появления и исчезновения, например, если страница стоит без движения более 3 секунд то объект исчезает
  4. Отключение возврата на малых экранах
  5. Разный вывод на экран: картинкой, текстом или Font Awesome
  6. Действие кнопки не только может перекидывать наверх сайта, но может перекрутит на необходимый раздел в статье, либо сослаться на другую запись WordPress
  7. Отступы от края и множество вариантов позиционирования
  8. Настройка внешнего вида исключит проблему с использованием CSS

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

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

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

<button type="button" class="scrolltop js-scrolltop">Наверх</button>
тег buton
Вставка в footer

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

<script type="text/javascript">
jQuery(function($)
 {
var $scroll_btn = $(".js-scrolltop");

    $scroll_btn.click(function () {
        return $("body,html").animate({
            scrollTop: 0
        }, 500);
    });
});
	</script>
js скрипт
javascript в подвале

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

.scrolltop {
  padding: 20px;
  position: fixed;
  bottom: 40px;
  right: 10px;
  border: none;
  background: #007ACC;
  text-align: center;
}
css для кнопки наверх
Вставка стилей в style.css

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

Оформление кнопки
Показ самописной кнопки на сайте

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

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

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

Ntrcn