Вы хотите внедрить эффектные анимации при загрузке страниц на сайте, работающем на WordPress? Это часто называется прелоадером (Preloader).
Такой элемент положительно влияет на восприятие пользователя, что может помочь повысить уровень взаимодействия с посетителями и понизить общий показатель отказов.
Давайте разберем, как легко интегрировать предварительный загрузчик в ваш ВордПресс.
Во-первых, вы можете использовать готовые плагины, такие как WP Preloader или Preloader Plus, которые предоставляют различные настройки и шаблоны для создания прелоадеров без необходимости программирования.
Если вы хотите более индивидуализированный подход, вы можете добавить кастомный код в файл functions.php вашей темы. Вам надо будет создать HTML-код для прелоадера и стилизовать его с помощью CSS. Например:
<div class="preloader">
<div class="loading"></div>
</div>
Затем добавьте соответствующие CSS-стили для анимации и размещения прелоадера на экране:
.preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.8);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.loading {
border: 16px solid #f3f3f3;
border-top: 16px solid #3498db;
border-radius: 50%;
width: 60px;
height: 60px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
Не забудьте скрыть прелоадер после полной загрузки страницы с помощью JavaScript:
window.addEventListener('load', function() {
document.querySelector('.preloader').style.display = 'none';
});
В результате у вас будет аккуратный прелоадер, который исчезнет после загрузки содержимого страницы, улучшая взаимодействие пользователя с вашим сайтом.
Зачем нужен Preloader?
Предварительный загрузчик представляет собой анимацию или текстовое уведомление о процессе загрузки, показывающее прогресс загрузки страницы в фоновом режиме.
Когда вы просматриваете сайт, браузер загружает разные компоненты страницы. Некоторые элементы подгружаются быстро, такие как текст, HTML-код и CSS, в то время как другие, например, изображения или видео, могут занять больше времени.
Если ваш сайт в основном содержит текст с несколькими изображениями, встраивать загрузчик не обязательно — стоит просто ускорить загрузку страниц.
Однако, если на страницах много графики и видео, то пользователям придется подождать, прежде чем они увидят весь контент.
На время загрузки сайт может работать медленно, и у пользователей может возникнуть впечатление, что он не функционирует, что может привести к уходу с сайта. Внедрение прелоадера позволяет заполнить этот временной промежуток, предоставляя пользователю информацию о ходе загрузки.
Например, когда вы нажимаете кнопку Предосмотр в редакторе Gutenberg, вы увидите прелоадер, прежде чем изменения будут отображены в реальном времени.
Прелоадеры могут заметно улучшить пользовательский опыт, так как они помогают пользователю понять, что процесс загрузки все еще продолжается. Кроме того, хорошо продуманный прелоадер может добавить элемент брендинга, создавая визуальную идентификацию вашего сайта.
Важно помнить, что прелоадеры должны быть максимально оптимизированы и не затягивать время ожидания. Слишком долгие или сложные анимации могут вызвать раздражение у пользователей и привести к ухудшению общего впечатления от сайта.
Теперь рассмотрим два способа добавления прелоадера на ваш сайт WP.
Способ 1. Плагин WP Smart Preloader
Этот метод является простым, так как не требует редактирования вашей темы WordPress.
Первым шагом установите нужное дополнение.
После активации перейдите в раздел Настройки > WP Smart Preloader.
В настройках выберите стиль прелоадера. Существует шесть встроенных вариантов, а также можно загрузить собственный HTML и CSS код для создания уникального предварительного загрузчика.
Тем, кто предпочитает разрабатывать индивидуальные CSS-стили, рекомендую ознакомиться с основными цветовыми схемами для CSS.
Функция Show only on Home Page позволяет активировать анимацию только на главной странице. Это удобно, если вы хотите оптимизировать загрузку, избегая прелоадера на внутренних страницах с более быстрой загрузкой.
В настройке Duration to show Loader укажите время появления прелоадера. По умолчанию установлено значение 1500 миллисекунд (1,5 секунды), что обычно подходит для большинства сайтов, но его можно изменить в зависимости от характера контента и времени загрузки страницы.
Также есть опция настройки времени, в течение которого прелоадер будет исчезать (Loader to Fade Out). По-умолчанию это значение составляет 2500 миллисекунд (2,5 секунды). Задержка исчезновения может быть уменьшена для улучшения пользовательского опыта, особенно на страницах с минимальным временем загрузки.
Не забудьте в конце нажать на кнопку Сохранить изменения.
Зайдите на сайт, чтобы увидеть, как работает прелоадер. Убедитесь, что анимация отображается должным образом на различных устройствах и браузерах, чтобы гарантировать кроссбраузерность вашего сайта.
Способ 2. Плагин Preloader
Этот способ обладает высокой степенью гибкости, но требует дополнительных усилий для правильного выполнения всех действий.
Для начала вам необходимо установить и активировать расширение для WordPress. Убедитесь, что версия плагина совместима с вашей версией WordPress.
Далее перейдите в раздел Плагины > Preloader.
В поле Background Color укажите шестнадцатеричный код цвета фона, который вы хотите видеть на экране загрузки (по умолчанию – белый). Вы можете использовать инструменты для подбора цвета, чтобы найти оттенок, который лучше всего соответствует вашему сайту.
Затем в разделе Preloader Image укажите URL изображения для прелоадера. Плагин по умолчанию использует свою анимацию, но вы можете загрузить собственное изображение для более уникального дизайна.
Следующий шаг заключается в выборе области, где планируется отображение предварительного загрузчика.
Вы можете решить показывать его на всех страницах вашего сайта (На всём сайте) или же ограничиться конкретной страницей. Если вы выбираете определенные страницы, убедитесь, что они являются наиболее важными для ваших пользователей.
В разделе настройки Elements Preloader этот плагин предоставляет инструкции по его установке. Ознакомьтесь с документацией плагина для получения дополнительных рекомендаций по его правильной настройке.
Кликните на Save Changes.
Рекомендуется избегать изменений в файлах темы WordPress, поскольку они будут стерты при следующем обновлении. Если вы работаете с дочерней темой, можно вставить код в файл header.php. Наилучший вариант – использовать плагин Code Snippets, который позволяет безопасно добавлять пользовательские функции без риска потери данных при обновлении.
Вот пример кода, который следует разместить в файле header.php:
Если вам удобнее редактировать файл functions.php, добавьте туда следующие строчки:
function site_add_preloader() { ?>
После внесения изменений проверьте результат на вашем сайте. Возможно, потребуется очистить кеш браузера или кэша вашего плагина, чтобы изменения стали видимыми.
