Как создать кнопку прокрутки «Вверх» в WordPress

Когда дело доходит до сохранения и расширения читательской аудитории вашего сайта WordPress, поддержание хорошего пользовательского опыта (UX) имеет решающее значение. Таким образом, если ваш контент длинный, вы можете добавить кнопку «прокрутить вверх», чтобы сэкономить время.

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

В этой статье мы более подробно рассмотрим, что такое прокручиваемая ссылка «наверх» (и чем она полезна для UX). Затем мы познакомим вас с обоими способами добавления их на ваш сайт WordPress. Давайте погрузимся!

Кнопка возврата наверх

Ни для кого не секрет, что объемный контент становится все более популярным в Интернете. Это имеет смысл, так как длинный контент предоставляет больше возможностей для передачи подробной информации, демонстрации большего количества изображений и повышения поисковой оптимизации (SEO). Однако простое создание длинного контента и игнорирование UX, скорее всего, оттолкнет ваших читателей.

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

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

Добавление кнопки прокрутки «Вверх» с помощью HTML

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

Прежде чем вы начнете, помните, что вы будете играть с кодом под капотом. Таким образом, рекомендуется использовать дочернюю тему при добавлении кнопки через HTML (а также при резервном копировании вашего сайта). Давайте взглянем!

Шаг 1

Первым шагом будет доступ к файлам вашего веб-сайта WordPress через протокол передачи файлов (FTP), чтобы найти папку JavaScript. В этом примере мы будем использовать FTP-решение FileZilla, так как оно удобно, безопасно и доступно для любой платформы.

После того, как вы добавили учетные данные своего сайта, перейдите к wp-content> themes> yourtheme> js (ваша тема — это тема, которую вы выбрали для своего сайта):

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

Шаг 2

Затем вам нужно создать новый файл с именем topbutton.js в папке js . Чтобы сделать это в FileZilla, щелкните правой кнопкой мыши нижний правый квадрант и выберите « Создать новый файл ». Когда файл откроется в вашем любимом текстовом редакторе, вставьте следующий код:

 jQuery (документ) .ready (функция ($) {
    смещение переменной = 100;
    переменная скорость = 250;
    продолжительность вар = 500;
        $(окно).scroll(функция(){
            если ($(this).scrollTop() < смещение) {
                      $('.topbutton') .fadeOut(длительность);
            } еще {
                      $('.topbutton') .fadeIn(длительность);
            }
        });
     $('.topbutton').on('щелчок', function(){
            $('html, body').animate({scrollTop:0}, скорость);
            вернуть ложь;
            });
});

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

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

Шаг 3

Теперь вам нужно создать кнопку. Вы можете создать его с нуля или загрузить с сайта, такого как Font Awesome. Затем загрузите свое изображение в WordPress через Медиатеку и скопируйте его URL:

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

Шаг №4

Ваш файл style.css содержит все элементы дизайна вашего сайта, такие как шрифты, цвета и многое другое. Чтобы получить к нему доступ, перейдите в « Внешний вид» > «Редактор» в WordPress и откройте вкладку «Таблица стилей» . Затем вам нужно будет вставить следующий фрагмент:

 .верхняя кнопка {
     высота: 50 пикселей;
     ширина: 50 пикселей;
     положение: фиксированное;
     справа: 5 пикселей;
     внизу: 5 пикселей;
     Z-индекс: 1;
     background-image:url("http://example.com/wp-content/uploads/2015/01/topbutton.png");
     повторение фона: без повторения;
     дисплей:нет;
}

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

Шаг № 5

Теперь вам нужно сообщить WordPress, что вы хотите использовать созданный вами файл JavaScript. Оставаясь на странице Editor , откройте вкладку Theme Functions (functions.php) :

Затем вставьте следующий скрипт постановки в очередь:

 функция my_scripts_method() {
     wp_enqueue_script(
           'пользовательский скрипт',
           get_stylesheet_directory_uri() . '/js/topbutton.js',
           массив('jquery')
     );
}

add_action('wp_enqueue_scripts', 'my_scripts_method');

Не волнуйтесь, если вы не понимаете текст — WordPress поймет, что очень важно! Когда будете готовы, нажмите «Обновить файл» .

Шаг № 6

Наконец, чтобы добавить кнопку в нижний колонтитул веб-страницы, перейдите к файлу нижнего колонтитула темы (footer.php) на экране редактора и вставьте следующий фрагмент кода (в идеале перед закрывающим тегом div, чтобы обеспечить оптимальное расстояние):

 <a href="#" class="topbutton"></a>

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

Добавление кнопки прокрутки «Вверх» с помощью плагина

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

К началу

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

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

WPFront Scroll Top

Хотя WPFront Scroll Top не так многофункционален, как To Top, это универсальный вариант для рассмотрения. Вы можете установить практически любое изображение для своей кнопки, добавить элементы Font Awesome и даже настроить форму значка.

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

Прокрутка страницы до идентификатора

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

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

Надежная и доступная поддержка WordPress с движком WP

В WP Engine наша команда экспертов стремится помочь вам сохранить UX вашего сайта WordPress на высшем уровне. Наш специализированный ресурсный центр содержит множество статей, обзоров советов и идей по улучшению производительности и внешнего вида вашего сайта. Если у вас есть какие-либо конкретные вопросы или проблемы, наши сотрудники службы поддержки могут помочь 24/7.

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