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

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

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

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

Что такое анимация прелоадера?

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

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

Когда я должен использовать предварительный загрузчик?

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

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

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

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

Вариант 1. Добавьте анимацию предварительного загрузчика с помощью плагина

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

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

Шаг 1: Скачайте WP Smart Preloader

Вы можете скачать плагин WP Smart Preloader через каталог плагинов WordPress. Затем вы можете загрузить файл .zip на свой сайт WordPress, выбрав «Плагины» > «Добавить новый» > «Загрузить плагин» на панели администратора:

Другой вариант — найти плагин через панель поиска на экране «Плагин» > «Добавить новый» :

В любом случае, как только плагин будет установлен, нажмите кнопку «Активировать» . Затем вы можете найти его параметры в разделе «Настройки»> «WP Smart Preloader» .

Шаг 2: выберите свой стиль

На странице настроек WP Smart Preloader первое, что нужно сделать, это выбрать стиль для предварительного загрузчика. В разделе «Выбрать предварительный загрузчик» будет раскрывающееся меню, позволяющее выбрать один из шести вариантов стиля, а также вариант пользовательской анимации:

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

В конце этого экрана вы можете установить продолжительность самого загрузчика и эффекта «затухания»:

Если вы оставите эти поля пустыми, значения по умолчанию будут установлены на 1500 миллисекунд (1,5 секунды) и 2500 миллисекунд (2,5 секунды) соответственно. Когда вы закончите, нажмите на кнопку Сохранить изменения .

Шаг 3. Предварительный просмотр анимации предварительного загрузчика

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

Вариант 2: добавить анимацию предварительного загрузчика вручную

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

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

Шаг 1. Продумайте анимацию

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

Шаг 2. Разработайте или загрузите свою анимацию

Чтобы разработать анимацию, вы можете использовать такой инструмент, как Photoshop, для создания GIF или вращающейся анимации предварительного загрузчика. Вы также можете обратиться к нашему ресурсу по созданию анимации WordPress с использованием CSS.

Мы рекомендуем последний подход, так как добавление предварительного загрузчика GIF на ваш сайт WordPress лучше всего делать с помощью плагина. Помимо Codepen (упомянутого выше), вы также можете скачать анимацию с таких сайтов, как Spinkit и LoadLab.

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

Большинство бесплатных анимаций предварительного загрузчика будут содержать ссылку на источник, где вы можете найти как его HTML, так и CSS:

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

Шаг 3: Создайте дочернюю тему

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

Шаг 4: Добавьте HTML-код в файл header.php вашей темы

Следующий шаг — найти файл header.php для вашей темы WordPress. Вы можете сделать это через экран редактора темы WordPress:

Вы также можете редактировать файлы с помощью FTP-клиента, такого как FileZilla. Файл будет находиться в папке wp-content > themes в корневом каталоге вашего сайта.

Как только вы найдете и откроете файл, вставьте следующий HTML-код под тегом body:

 <!--CSS Spinner--> <div class="spinner-wrapper"> <div class="spinner"></div> </div>

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

Шаг 5: Добавьте код CSS в свою таблицу стилей

Теперь пришло время добавить CSS для стиля вашей анимации. Найдите таблицу стилей CSS ( style.css ) для своей темы WordPress, затем скопируйте и вставьте исходный код CSS для анимации. В нашем случае мы добавим следующее:

 .spinner { margin: 100px auto; width: 50px; height: 40px; text-align: center; font-size: 10px; } .spinner > div { background-color: #333; height: 100%; width: 6px; display: inline-block; -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; animation: sk-stretchdelay 1.2s infinite ease-in-out; } .spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .spinner .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } @-webkit-keyframes sk-stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 20% { -webkit-transform: scaleY(1.0) } } @keyframes sk-stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); } }

Прежде чем сохранить изменения, удалите эту часть: «margin: 100px auto;». На его место скопируйте и вставьте следующее:

 position: absolute; top: 48%; left: 48%;

Затем вы можете сохранить файл.

Шаг 6: Добавьте код jQuey, чтобы заставить анимацию работать

Чтобы заставить вашу анимацию предварительного загрузчика счетчика работать, вам нужно добавить немного jQuery. Для этого вы можете вернуться к файлу header.php и вставить следующее перед закрывающим тегом body:

 <script> $(document).ready(function() { //Preloader preloaderFadeOutTime = 500; function hidePreloader() { var preloader = $('.spinner-wrapper'); preloader.fadeOut(preloaderFadeOutTime); } hidePreloader(); }); </script>

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

Найдите больше советов и руководств от WP Engine

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

Наша миссия в WP Engine — предоставлять советы, рекомендации и ресурсы для разработчиков, чтобы помочь вам убедиться, что ваш веб-сайт всегда выглядит наилучшим образом. Узнайте больше о наших планах сегодня!