Руководство разработчика. Как добавить эффект плавной прокрутки вверх в WordPress с помощью JQuery

Опубликовано: 2022-06-03

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

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

Те, кто плохо знаком с WordPress, могут ознакомиться с учебными пособиями по WordPress на таких ресурсах, как The Blog Starter, где есть пошаговое руководство о том, как создать свой блог и управлять им.

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

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

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

В этом сообщении блога мы расскажем вам, как добавить плавную прокрутку к верхнему эффекту в WordPress с помощью jQuery.

Зачем использовать Smooth Scroll?

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

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

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

Способы добавить эффект плавной прокрутки вверх в WordPress

Чтобы иметь возможность добавить плавную прокрутку в To Effect в WordPress, вы можете использовать любой из следующих способов:

1. Использование некоторого кода, написанного на jQuery

2. Использование плагина

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

Как добавить эффект плавной прокрутки вверх в WordPress с помощью кода?

Чтобы добавить эффект плавной прокрутки вверх на ваш веб-сайт WordPress с помощью кодирования, вам необходимо выполнить следующие четыре шага:

  1. Создайте файл «Smoothscrolleffect.js».
  2. Прикрепите к своей теме функцию «Smoothscrolleffect.js».
  3. Добавляем иконку в тему
  4. Связывание эффекта с веб-страницами

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

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

Шаг 1. Создайте файл «Smoothscrolleffect.js».

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

На этом шаге мы создадим файл «.js» (jQuery), который содержит функцию, которая добавит плавную прокрутку к эффекту Top. Следуйте инструкциям, чтобы создать файл «.js» и загрузить его в каталог веб-сайта.

  1. Создайте новый файл блокнота в вашей системе.
  2. Скопируйте следующий код:

jQuery (документ) .ready (функция ($) {

$(окно).scroll(функция(){

если ($(это).scrollTop() < 200) {

$('#smoothup') .fadeOut();

} еще {

$('#smoothup') .fadeIn();

}

});

$('#smoothup').on('щелчок', function(){

$('html, body').animate({scrollTop:0}, 'fast');

вернуть ложь;

});

});

  1. Вставьте код в файл блокнота.
  2. Сохраните его под любым именем, но убедитесь, что расширение «.js».
  3. Войдите в cPanel вашего сайта.
  4. Перейдите в каталог веб-сайта «/js/».

Примечание. Если на вашем веб-сайте нет каталога js, вам необходимо его создать.

  1. Загрузите файл «.js», который вы создали в своей системе, в каталог.

Шаг 2: Прикрепите плавную прокрутку к теме

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

Перейдите к редактору тем в панели администратора WordPress. Откройте function.php для редактирования. и вставьте в него следующий код.

wp_enqueue_script('smoothup', get_template_directory_uri(). '/js/smoothscroll.js', array('jquery'), ", true");

Нажмите «Сохранить изменения».

Шаг 3. Добавьте значок в тему

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

  1. Перейдите к таблице стилей.css вашей темы в редакторе тем.
  2. Скопируйте следующий код.

#сглаживание {

высота: 40 пикселей;

ширина: 40 пикселей;

Позиция: фиксированная;

Внизу: 50 пикселей;

Справа: 100 пикселей;

Отступ текста:-9999px;

Дисплей: нет;

Background:url("http://www.example.com/wp-content/uploads/2013/07/top_icon.png");

-webkit-transition-duration: 0,4 с;

-moz-transition-duration: 0,4 с; продолжительность перехода: 0,4 с;

}

#сглаживание: наведение {

-webkit-transform: повернуть (360 градусов) }

фон: url() без повторов;

}

  1. Вставьте его в таблицу стилей вашей темы.
  2. Нажмите «Сохранить изменения».

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

Шаг 4: Связывание плавной прокрутки с веб-страницами.

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

  1. Откройте footer.php в редакторе темы.
  2. Скопируйте следующий код:
    1. <a href="#top" id="smoothup" title="Наверх"></a>
  3. Вставьте его на страницу footer.php.
  4. Нажмите «Сохранить изменения».

Поздравляем!, вы успешно добавили эффект плавной прокрутки на свой веб-сайт WordPress с помощью jQuery.

Вывод

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

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