Кнопка возврата наверх на веб-сайте – это важный элемент интерфейса, который позволяет пользователям быстро вернуться к началу страницы одним нажатием. Обычно она расположена в правом нижнем углу экрана и появляется после того, как пользователь прокрутит страницу вниз. В WordPress можно реализовать кнопку возврата вверх как с помощью плагинов, так и путем добавления кода в шаблоны. В этой статье мы рассмотрим оба подхода.
Первый способ – использование плагинов. Существует множество плагинов, которые упрощают создание кнопки «Наверх». Например, такие плагины, как «WP to Top», «Scroll Back to Top Button» или «Simple Scroll to Top Button». Они предлагают настройки для изменения внешнего вида кнопки, такие как цвет, размер и анимация появления.
Второй способ – добавить код в файл шаблона вашей темы. Для этого вам нужно добавить следующий код в файл footer.php вашей темы:
<a href="#" class="scroll-to-top">↑</a>Затем добавьте CSS для стилизации кнопки:
.scroll-to-top { position: fixed; bottom: 30px; right: 30px; display: none; background-color: #000; color: #fff; padding: 10px; border-radius: 5px; text-align: center; } .scroll-to-top:hover { background-color: #555; }И добавьте JavaScript, чтобы кнопка появлялась при прокрутке страницы:
<script>
jQuery(document).ready(function($) {
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$('.scroll-to-top').fadeIn();
} else {
$('.scroll-to-top').fadeOut();
}
});
$('.scroll-to-top').click(function() {
$('html, body').animate({scrollTop: 0}, 600);
return false;
});
});
</script>Таким образом, вы можете выбрать подходящий для вас метод добавления кнопки возврата наверх на ваш сайт WordPress. Не забудьте протестировать кнопку на различных устройствах и браузерах, чтобы убедиться, что она работает корректно.
Плагины WordPress для добавления кнопки Вверх
С помощью плагинов можно легко и быстро добавить кнопку возврата наверх. Некоторые из них имеют продвинутые настройки для дизайна, анимации, выбора места расположения и многое другое. Другие плагины очень просты и после установки сразу добавляют кнопку без дополнительных настроек.
Плагин Simple Back To Top
Этот плагин очень прост и предлагает лишь одну настройку – возможность загрузки иконки кнопки. Установите плагин и активируйте его. В меню Настройки появится новый пункт Back To Top — SBTT, где можно изменить иконку кнопки возврата.
Можно загружать только файлы формата jpg и png.
По умолчанию кнопка закреплена в правом нижнем углу экрана с отступами 10 пикселей с правой и нижней сторон. Если необходимо изменить ее положение, вам нужно будет редактировать CSS-стили.
Кнопка имеет CSS-класс .sbttBacktotop. В файле style.css вашей темы добавьте следующий код:
.sbttBacktotop { margin: 25px; }
Теперь кнопка будет находиться на расстоянии 25 пикселей от краев экрана.
Плагин WPFront Scroll Top
Этот мощный плагин предлагает множество настроек для кнопки возврата наверх. После его установки и активации откройте настройки в разделе Настройки > Scroll Top.
Функции плагина:
- Кнопка появляется после прокрутки установленного количества пикселей.
- Прокрутка страницы вверх выполняется с анимацией.
- Может вести к любому элементу, указанному в настройках.
- Возможен выбор иконок из набора, можно использовать иконку из FontAwesome или сделать кнопку текстовой.
- Можно загрузить свою иконку.
- Есть возможность указать ширину экрана, при которой кнопку следует скрыть.
- Кнопку можно скрывать или показывать на определенных страницах сайта.
- Асинхронная загрузка скриптов плагина.
- И многое другое.
Все настройки разделены на несколько секций:
- Отображение – все параметры отображения кнопки на сайте.
- Расположение – настройки местоположения кнопки.
- Фильтр – возможность указания страниц, на которых кнопка будет показываться или скрываться.
- Кнопка с изображением – выбор картинки для кнопки из представленного набора.
- Текстовая кнопка – данный раздел активируется, если в опции Стиль выбрана «Текстовая кнопка».
- Кнопка Font Awesome – опции для задания иконки из коллекции FontAwesome.
Поиграйте с параметрами и создайте кнопку, которая будет идеальна для вас!
Помимо вышеупомянутых плагинов, существуют также и другие решения, такие как ScrollBack и WP Back To Top Button, которые могут предложить дополнительные функциональности и возможности кастомизации. Некоторые из них поддерживают адаптивный дизайн и могут автоматически подстраиваться под размеры экрана устройства. Выбор подходящего плагина зависит от ваших предпочтений в дизайне и функционале, который вы хотите реализовать на своем сайте.
Кнопка Вверх без плагина
Добавление кнопки без использования плагина также достаточно просто и несет определенные преимущества. Вы можете настроить внешний вид кнопки по своему усмотрению, выбрать ее расположение и добавить любую анимацию. В общем, полная кастомизация 🙂.
Код для добавления HTML-кнопки
Для начала необходимо вставить код кнопки в структуру страницы, для чего воспользуйтесь хуком wp_footer.
add_action('wp_footer', 'add_scroll_to_top'); function add_scroll_to_top() { ?>
Кнопка содержит SVG-иконку стрелки вверх. Вы можете использовать свою иконку при помощи тега img или встроить SVG напрямую.
Этот код следует добавить в файл functions.php вашей темы.
Если ваша тема регулярно обновляется, изменять файлы следует в дочерней теме.
Стилизация с помощью CSS
На данный момент кнопка добавлена в самом низу страницы под подвалом. Для того чтобы закрепить ее к правой стороне, добавьте стили. Откройте файл style.css вашей темы и добавьте в конце следующий код:
.scroll-to-top { position: fixed; background-color: rgba(13,13,13,0.4); color: #fff; height: 52px; width: 52px; right: 30px; bottom: 30px; border-radius: 50%; cursor: pointer; display: none; z-index: 9999; }.scroll-to-top__icon { display: inline-flex; align-items: center; justify-content: center; height: 100%; width: 100%; }.scroll-to-top:hover { background-color: rgba(13,13,13,0.7); }
Теперь кнопка будет прикреплена к правому краю экрана, однако пока она не видима, так как наш код активирует ее отображение только после прокрутки на заданное расстояние вниз.
Код на JavaScript
В JavaScript файле шаблона, где расположены ваши скрипты, добавьте следующий код:
(function ($) { const $scrollToTop = $('.scroll-to-top'), offsetTop = 100; $(window).on('scroll', function () { if ($(this).scrollTop() > offsetTop) { $scrollToTop.fadeIn(); } else { $scrollToTop.fadeOut(); } }); $scrollToTop.on('click', function () { $('html, body').animate({ scrollTop: 0 }, 600); return false; }); })(jQuery);
Для работы этого скрипта необходима библиотека jQuery.
Вы можете настроить значение переменной offsetTop на третьей строке. Это значение определяет, после какого количества пикселей прокрутки кнопка станет видимой.
В результате получится такая кнопка возврата наверх:
После проверки функциональности кнопки вы можете продолжить ее оформление: изменить цвета, иконку, размер и расположение. Все это осуществляется с помощью CSS-стилей, которые вы добавили на предыдущем шаге.
Дополнительные советы
Чтобы обеспечить лучшую доступность, рекомендуется добавить атрибут aria-label к кнопке:
<div class="scroll-to-top" aria-label="Вернуться к началу страницы">
Это поможет пользователям, использующим экранные считыватели, понять назначение кнопки.
Также имеет смысл добавить плавный переход при прокрутке страницы, чтобы улучшить пользовательский опыт. Это можно сделать с помощью CSS:
html { scroll-behavior: smooth; }
Таким образом, ваша кнопка будет не только функциональной, но и эстетически приятной для пользователей. Экспериментируйте с различными эффектами и стилями, чтобы сделать ее уникальной на вашем сайте!
Кнопка Вверх в настройках темы
В дополнение к основным способам рассмотрим еще один метод создания кнопки возврата наверх в WordPress.
Многие разработчики тем включают в свои шаблоны дополнительные модули, которые позволяют расширить функциональность без необходимости установки плагинов. В качестве такого модуля может быть предусмотрена активация кнопки возврата.
Например, на моем тестовом сайте использован шаблон Blogus. Заходя в раздел Внешний вид > Настроить и открыв секцию Настройка темы, можно заметить настройки Прокрутка.
Это и есть модуль, который отвечает за кнопку возврата наверх. В нем можно включить или отключить кнопку и изменить ее иконку.
Проверьте настройки вашей темы: возможно, в ней уже есть встроенный модуль для кнопки возврата наверх.
Если в вашей теме нет такого модуля, не отчаивайтесь. Вы всегда можете добавить кнопку возврата вручную, добавив код в файл footer.php вашей темы. Например, вы можете использовать следующий код:
<a href="#" class="back-to-top">Вверх</a>
Далее добавьте соответствующий CSS и JavaScript для стилизации и функциональности кнопки. Таким образом, вы сможете создать уникальную кнопку возврата наверх, которая будет соответствовать общему дизайну вашего сайта.
Также стоит обратить внимание на адаптивность вашей кнопки. Убедитесь, что она корректно отображается на мобильных устройствах и не мешает пользователям при просмотре контента. Возможно, вам стоит рассмотреть различные варианты анимации для плавного возврата к началу страницы.
На завершение, не забудьте протестировать функциональность кнопки на разных браузерах и устройствах, чтобы обеспечить наилучший пользовательский опыт.