Как создать динамический фон для WordPress

Что такое динамический фон и зачем он нужен в WordPress

Динамический фон — это фон, который меняется в зависимости от условий: времени суток, страницы, действий пользователя или других параметров. Такой фон делает сайт более живым и привлекательным, помогает лучше передать атмосферу и повысить вовлечённость.

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

Использование CSS и JavaScript для динамического фона

Изменение фона в зависимости от времени суток

Один из популярных вариантов — менять фон в зависимости от текущего времени. Это можно сделать на стороне клиента с помощью JavaScript. Ниже пример простого скрипта, который меняет фон сайта с утра на дневной, вечером — на тёмный.

function wpskinsChangeBackgroundByTime() {
  const hour = new Date().getHours();
  let bgColor = '#ffffff';
  if (hour >= 6 && hour < 12) {
    bgColor = '#FFFAE3'; // утренний светлый фон
  } else if (hour >= 12 && hour < 18) {
    bgColor = '#D0E8F2'; // дневной голубой фон
  } else if (hour >= 18 && hour < 22) {
    bgColor = '#FFD9B3'; // вечерний тёплый фон
  } else {
    bgColor = '#1E1E2F'; // ночной тёмный фон
  }
  document.body.style.backgroundColor = bgColor;
}
wpskinsChangeBackgroundByTime();

Этот код достаточно вставить в файл темы, например, в footer.php перед закрывающим тегом </body> или подключить отдельным скриптом.

Динамический фон с изменением картинок

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

function wpskinsDynamicBackgroundImages() {
  const images = [
    'https://example.com/wp-content/uploads/morning.jpg',
    'https://example.com/wp-content/uploads/day.jpg',
    'https://example.com/wp-content/uploads/evening.jpg',
    'https://example.com/wp-content/uploads/night.jpg'
  ];
  const hour = new Date().getHours();
  let index = 3; // по умолчанию ночь
  if (hour >= 6 && hour < 12) index = 0;
  else if (hour >= 12 && hour < 18) index = 1;
  else if (hour >= 18 && hour < 22) index = 2;
  document.body.style.backgroundImage = `url('${images[index]}')`;
  document.body.style.backgroundSize = 'cover';
  document.body.style.backgroundRepeat = 'no-repeat';
  document.body.style.backgroundPosition = 'center center';
}
wpskinsDynamicBackgroundImages();

Не забудьте заменить URL-адреса на свои изображения. Такой приём отлично работает для сайтов с тематикой, меняющейся по времени суток.

Использование плагинов для динамических фонов в WordPress

Если не хочется писать код, можно использовать плагины. Вот несколько популярных и надёжных вариантов:

• MB Background Slider — позволяет создавать слайд-шоу из фоновых изображений с настройкой времени смены и эффектов.
• WP Backgrounds Lite — простой плагин для установки фонов с поддержкой видео и изображений, в том числе динамических.
• Animate It! — расширенный плагин с эффектами анимации, который можно использовать для создания динамичного визуального фона.

Все эти плагины доступны в каталоге WordPress и легко интегрируются в любую тему.

Создание динамического фонового видео с помощью плагина OmniVideo

Для сайтов, которые хотят впечатлить посетителя, отлично подойдёт видеофон. Плагин OmniVideo позволяет легко добавить видео как фон с множеством настроек: автозапуск, зацикливание, отключение звука и др.

Пример использования:

<div class="wpskins-omnivideo-background">
  <video autoplay muted loop playsinline>
    <source src="https://example.com/video/background.mp4" type="video/mp4">
  </video>
</div>

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

Динамический фон для конкретных страниц и условий

Иногда нужно менять фон не глобально, а только на определённых страницах или при выполнении условий. Для этого в functions.php темы можно добавить следующий код:

function wpskins_custom_dynamic_background() {
  if (is_front_page()) {
    echo '<style>body { background-image: url("https://example.com/wp-content/uploads/frontpage-bg.jpg"); background-size: cover; }</style>';
  } elseif (is_single()) {
    echo '<style>body { background-color: #f0f0f0; }</style>';
  }
}
add_action('wp_head', 'wpskins_custom_dynamic_background');

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

Советы по оптимизации и безопасности

При использовании динамических фонов важно не забывать:

• Оптимизировать изображения по размеру и формату, чтобы не замедлять загрузку сайта. Для этого подойдет поддержка формата WebP или плагин Clearfy Pro для оптимизации.
• Тестировать отображение фона на разных устройствах и разрешениях, чтобы избежать проблем с адаптивностью.
• Не использовать видеофон на мобильных устройствах или предусматривать альтернативу, чтобы не тратить трафик пользователя.