Как добавить предварительный загрузчик в WordPress

Приветствуем вас! Предварительный загрузчик — это анимация, показывающая ход загрузки страницы в фоновом режиме. К примеру, когда вы посещаете какой-либо веб-сайт, ваш браузер начинает загружать различные части содержимого. Некоторые части сайта загружаются быстрее (например, текст, HTML-код, CSS), тогда как другие загружаются намного медленнее (например, изображения и видео).

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

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

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

Способ 1. Добавление предварительного загрузчика в WordPress с помощью плагина WP Smart Preloader.

Этот метод рекомендуется, потому что он проще в реализации и не требует каких-либо изменений в вашей теме WordPress.

Устанавливаем и активируем плагин WP Smart Preloader. После активации вам идем на страницу «Настройки» WP Smart Preloader, чтобы настроить параметры плагина.

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

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

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

Также вы можете установить время, затрачиваемое загрузчиком на полное исчезновение. Значение по умолчанию составляет 2500 секунд или 2,5 секунды.

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

Способ 2. Добавление предварительного загрузчика в WordPress с помощью плагина Preloader.

Устанавливаем и активируем плагин Preloader. После активации идем на страницу «Плагины» — Preloader, чтобы настроить параметры плагина.

Сначала необходимо ввести код для цвета фона, который вы хотите использовать для экрана загрузки. Значение по умолчанию: #FFFFFF (белый). Вы можете использовать онлайн-инструмент выбора цвета, чтобы найти HEX-код для цвета, который вы хотите использовать.

Затем вам нужно указать URL-адрес изображения preloader, которое вы хотите использовать. Плагин поставляется с анимационным изображением по умолчанию.

Если вы хотите использовать другую анимацию, вы найдете ссылку для загрузки анимированного изображения предварительного загрузчика со стороннего веб-сайта. Затем вы можете загрузить это изображение в папку wp-content и вставить сюда URL.

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

Вы можете отобразить его на всех страницах своего веб-сайта или выбрать определенный раздел. Наконец, вы увидите инструкцию по добавлению следующего кода в файл header.php вашей темы WordPress.

[php]<div id="wptime-plugin-preloader"></div>

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

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

Вот код, который вам нужно добавить:

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

Примечание: этот метод будет работать только на темах WordPress, которые совместимы с функцией wp_body_open (), добавленной в WordPress 5.2.

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

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

С уважением Вячеслав и Валерия!