Как изменить цвет фона в WordPress (руководство для начинающих)

Хотите придать сайту WordPress новый вид, не тратя часы на сложные изменения дизайна?

Я создаю веб-проекты ВордПресс с 2008 года. И могу с уверенностью сказать, что изменение цвета фона сайта — один из самых быстрых способов преобразить его внешний вид.

Однако при наличии такого большого количества различных тем и редакторов WP поиск подходящего метода может показаться сложной задачей для новичков.

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

Почему цвет фона WordPress важен

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

Вот почему этот элемент дизайна WordPress так важен:

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

Итак, давайте посмотрим, как изменить цвет фона в WordPress.

Как изменить цвет фона в кастомайзере темы WordPress

В зависимости от темплейта, можете изменить цвет фона с помощью кастомайзера тем WordPress. Он позволяет редактировать внешний вид проекта в режиме реального времени и без необходимости редактирования кода.

Чтобы получить к нему доступ, зайдите на свой сайт, а затем перейдите в раздел «Внешний вид» > «Настройка».

Конкретные доступные параметры будут зависеть от того, какую тему WP использует сайт. В этом уроке я применяю стандартный вариант Twenty Twenty-One.

Чтобы изменить цвет фона сайта, перейдите на вкладку «Цвета и темный режим» в меню слева.

Затем нужно нажать на параметр «Цвет фона» и выбрать оттенок для веб-проекта.

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

Когда закончите с изменениями, не забудьте нажать кнопку «Опубликовать».

Теперь можете посетить свой сайт ВордПресс, чтобы увидеть новый оттенок фона в действии.

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

Как изменить цвет фона в полном редакторе сайта

Полный редактор сайта (FSE) — это платформа WordPress для редактирования блочных тем. С помощью него очень легко изменить цвет фона сайта. Давайте пройдемся по этому процессу.

Начните с перехода в раздел «Внешний вид» > «Редактор» на дашборде WP.

Теперь вы увидите кнопку «Стили» в одном из пунктов меню.

Нажмите на нее.

Теперь кликните по кнопке редактирования в виде карандаша.

Вы перейдете в интерфейс кастомизации.

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

Чтобы изменить оттенок фона, просто нажмите «Цвета» на панели «Стили».

Затем нажмите «Фон».

Теперь можете выбрать между однотонным цветом или создать градиент. Отдайте предпочтение тому, что соответствует вашему стилю. Когда будете довольны выбором, нажмите «Сохранить» — и все готово.

Как изменить цвет фона в WordPress с помощью CSS

Еще один способ изменить цвет фона сайта ВордПресс — добавить кастомизируемый CSS в кастомайзере темы.

Для начала перейдите в «Внешний вид» > «Кастомизация». Кликните на вкладку «Дополнительный CSS».

Затем введите следующий код:

body {
  background-color: #FFFFFF;
}

Все, что нужно сделать, это заменить код цвета фона на код оттенка, который хотите использовать на сайте. Затем введите его на вкладке «Дополнительный CSS».

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

Как случайным образом менять цвета фона в WordPress

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

Чтобы создать его, нужно добавить код на сайт WP. Ниже я расскажу, как это сделать.

Можете сделать это с помощью инструмента «Inspect» в браузере. Все, что требуется, это навести курсор мыши на область, цвет которой хотите изменить. Далее щелкните правой кнопкой мыши, чтобы выбрать инструмент «Inspect».

После этого нужно записать CSS-класс, на который хотите нацелиться. Например, на скриншоте выше я хочу работать с областью  «page-header».

Затем нужно открыть на компьютере простой текстовый редактор, например блокнот, и создать новый файл. Сохраните документ с именем «wpb-background-tutorial.js» на рабочем столе.

После этого можете добавить следующий код в только что созданный файл JS:

jQuery(function($){ 
        $('.page-header').each(function(){
            var $this = $(this),
            colors = ['#ec008c', '#00bcc3', '#5fb26a', '#fc7331'];
 
            setInterval(function(){
                var color = colors.shift();
                colors.push(color);
                $this.animate({backgroundColor: color}, 2000);
            },4000);
        });
});

Если изучите его, то заметите, что я использовал CSS-класс «page-header», поскольку это область, которую я хочу выделить на сайте.

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

Теперь, когда файл JS готов, требуется загрузить его в папку JS темы WordPress с помощью службы протокола передачи файлов (FTP).

В этом уроке я использую FileZilla. Это бесплатный FTP-клиент для Windows, Mac и Linux. Он очень прост в использовании.

Для начала нужно войти на FTP-сервер сайта. Данные для входа вы найдете в электронном письме от хостинг-провайдера или на дашборде cPanel.

После авторизации можно увидеть  список папок и файлов сайта в столбце «Удаленный сайт». Перейдите в каталог JS в теме веб-ресурса.

Просто щелкните правой кнопкой мыши каталог вашего темплейта в FTP-клиенте. Далее выберите опцию «Создать каталог».

Затем нужно открыть местоположение JS-файла в столбце «Локальный сайт».

Далее щелкните правой кнопкой мыши на него. Выберите опцию «Загрузить», чтобы добавить документ в тему.

Затем нужно будет ввести следующий код в файл funtions.php темплейта. Он правильно загружает документ JavaScript и зависимый скрипт jQuery, необходимый для его работы:

function wpb_bg_color_scripts() {
  wp_enqueue_script( 'wpb-background-tutorial', get_stylesheet_directory_uri() . '/js/wpb-background-tutorial.js', array( 'jquery-color' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpb_bg_color_scripts' );

Я рекомендую использовать бесплатный плагин WPCode. Он позволяет безопасно добавить код на сайт.

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

Как изменить цвет фона для отдельных постов

Вы можете изменить цвет фона каждого отдельного поста в блоге WP вместо использования одного оттенка на всем сайте с помощью кастомного CSS.

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

Первое, что требуется, это найти класс ID записи в CSS темы. Можете сделать это, просмотрев любой пост в блоге. Затем щелкните правой кнопкой мыши, чтобы использовать инструмент «Inspect» в браузере.

Вот пример того, как это будет выглядеть:

<article id="post-104" class="post-104 post type-post status-publish format-standard hentry category-uncategorized">

После того, как получили ID поста, можете изменить цвет фона отдельной записи. Для этого используйте следующий кастомный CSS. Просто замените ID поста на свой и код цвета фона, который хотите.

.post-104 {
  background-color: #D7DEB5;
  color:#FFFFFF;
}

Чтобы добавить CSS, можете использовать кастомайзер тем ВордПресс. Сначала убедитесь, что вошли на свой сайт WP. Затем перейдите в блог и нажмите на опцию «Кастомизация» вверху.

После этого кликните на вкладку «Дополнительный CSS» в меню слева.

Далее введите кастомный CSS.

После этого нажмите кнопку «Опубликовать».

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

Бонусный совет: используйте конструктор для большего контроля над дизайном

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

Я люблю использовать SeedProd. Это самый популярный конструктор для WP, потому что он позволяет:

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

После активации плагина будет предложено ввести лицензионный ключ. Можете найти его в своей учетной записи SeedProd. После ввода нажмите кнопку «Проверить ключ».

Затем перейдите в «SeedProd» > «Страницы».

Отсюда нажмите кнопку «Добавить новый лендинг».

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

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

Когда выберете шаблон, будет предложено ввести название страницы и выбрать URL-адрес.

После этого просто нажмите кнопку «Сохранить и начать редактирование страницы».

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

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

Чтобы изменить цвет фона лендинга, просто выберите любой раздел страницы. Теперь в меню слева увидите опции для редактирования стиля, оттенка и добавления изображения.

После того, как закончите редактирование лендинга, не забудьте нажать «Сохранить» вверху.

Затем можете перейти на вкладку «Подключить» и интегрировать страницу с различными сервисами онлайн-маркетинга. Например, возможно подключиться к Constant Contact, Brevo (ранее Sendinblue) и другим.

После этого перейдите на вкладку «Настройки страницы».

Здесь можете изменить статус с «Черновик» на «Опубликовать», чтобы раздел стал доступен.

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

Когда закончите, можете выйти из конструктора SeedProd и перейти на свой лендинг.

Заключение

Я надеюсь, что эта статья помогла вам узнать, как изменить цвет фона в WordPress.