Как добавить анимацию во время загрузки страницы WordPress

Хотите добавить красивую анимацию при загрузке страниц сайта WordPress? Ее еще называют прелоадером (Preloader).

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

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

Зачем нужен Preloader?

Предварительный загрузчик — это анимация или сообщение о состоянии. Показывает ход загрузки страницы в фоновом режиме.

Когда вы смотрите веб-сайт, браузер загружает разные части содержимого страницы. Одни загружаются быстрее (например, текст, HTML-код и CSS), а другим нужно больше времени (картинки, видео).

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

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

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

Примером такой анимации может служить, когда вы нажимаете кнопку Предосмотр в редакторе Gutenberg.

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

Предварительный просмотр в Gutenberg

Рассмотрим 2 варианта как добавить прелоадер на WP-сайт.

Способ 1. Плагин WP Smart Preloader

Этот метод простой, потому что не нужно делать правок в вашей теме WordPress.

Для начала установите дополнение.

После активации откройте Настройки > WP Smart Preloader.

Настройка плагина WP Smart Preloader

На странице настроек выберите стиль (анимацию) загрузчика. Есть 6 встроенных вариантов на выбор. Вы также можете загрузить свой собственный HTML- и CSS-код, чтобы создать собственный предварительный загрузчик.

Любителям писать собственный css код рекомендую ознакомиться с основными цветами для css.

Выбор анимации загрузчика в WP Smart Preloader

Опция Show only on Home Page позволит отображать анимацию только на домашней странице.

В настройке Duration to show Loader укажите продолжительность для preloader. По умолчанию задано значение 1500 миллисекунд (1,5 секунды). Работает для большинства сайтов, но вы можете его изменить.

Вы также можете установить время, которое будет затрачено загрузчиком на полное исчезновение (Loader to Fade Out). По стандарту составляет 2500 секунд (2,5 секунды).

Продолжительность и время исчезновения загрузчика в WP Smart Preloader

В конце не забудьте нажать кнопку Сохранить изменения.

Откройте сайт, чтобы увидеть прелоадер в действии.

Главная страница сайта

Способ 2. Плагин Preloader

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

Для начала установите и активируйте ВП-расширение.

Перейдите Плагины > Preloader.

Настройка плагина Preloader

Сначала в поле Background Color введите шестнадцатеричный код для цвета фона, который хотите использовать для экрана загрузки (по умолчанию — белый).

Дальше в опции Preloader Image укажите URL-адрес изображения preloader. Плагин использует по умолчанию свою картинку с анимацией.

Фон и картинка для прелоадера в плагине Preloader

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

Выбор где показывать прелоадер в плагине Preloader

Его можно отображать на всех страницах сайта (In The Entire Website) или на какой-то определенной.

В настройке Preloader Element плагин дает инструкцию по установке.

Инструкция по установке прелоадера в плагине Preloader

Нажмите Save Changes.

Мы не рекомендуем вам вносить правки в файлы темы WordPress, потому что они будут удалены при первом ее обновлении. Если вы используете дочернюю тему, тогда можно добавить код в ее файл header.php. Еще лучшее решение — отдельный плагин Code Snippets.

Вот код, который должен быть в файле header.php:

<div id="wptime-plugin-preloader"></div>

Если вам удобнее работать с functions.php, то в нем укажите такие строки:

function wpschool_add_preloader() {
    echo '<div id="wptime-plugin-preloader"></div>';
}
add_action( 'wp_body_open', wpschool_add_preloader);

После этого проверьте на сайте.

Главная страница сайта

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

Если Вам понравилась статья — поделитесь с друзьями
Михаил Петров
Привет! Меня зовут Михаил Петров. Я копирайтер и занимаюсь этим с 2013 года. Скрупулезность и ответственность - моя фишка! Не могу делать как попало и добиваюсь, чтоб заказчик сказал минимум “неплохо”. За все время своей работы пришлось написать и отредактировать немало разной “текстовухи”, включая SEO-тексты, отзывы и прочую чушь. На сегодняшний день специализируюсь на написании информационных статей и руководств технического направления. Вижу смысл и светлое будущее в текстах для людей, а не для машин.
Обсуждение: 1
  1. Зоя

    Добрый день, подскажите пожалуйста, а как подключить свой preloader на сайт WP(свой шаблон), не используя плагин?

Задать вопрос