Произвольный фон в теме WordPress.

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

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

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

Шаг 1. add_theme_support() — подключаем необходимый интерфейс в админке.

Начиная с версии 3.4 в WordPress используется функция add_theme_support() для подключения произвольных фонов. В более старых версиях (от 3.0 до 3.4) использовалась другая функция, но сейчас она устарела и я её рассматривать не буду.

Вставляем следующий код в functions.php текущей темы:

add_theme_support( 'custom-background' );

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

function true_custom_background_support(){
    add_theme_support( 'custom-background' );
}
 
add_action('after_setup_theme', 'true_custom_background_support');

Прежде, чем продолжить, посмотрим, что у нас получилось:

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

$defaults = array(
    'default-image'          => '', // без изображения
    'default-repeat'         => 'repeat', // повторять
    'default-position-x'     => 'left', // выровнять по левому краю
    'default-attachment'     => 'scroll', // фон прокручивается со страницей
    'default-color'          => '', // без цвета
    'wp-head-callback'       => '_custom_background_cb',
    'admin-head-callback'    => '',
    'admin-preview-callback' => '',
);
add_theme_support( 'custom-background', $defaults );

default-image

URL изображения, которое следует установить в качестве изображения фона по умолчанию. Добавляется через CSS-свойство background-image.

default-repeat

Нужно ли повторять фон. То есть, если ширина или высота изображения меньше ширины или высоты страницы, то оно будет повторяться. CSS-свойство background-repeat. Может принимать значения:

• no-repeat — не повторять,
• repeat-x — повторять по горизонтали,
• repeat-y — повторять по вертикали,
• repeat — повторять во всех направлениях.

default-position-x

По какому краю экрана выровнять изображение. CSS-свойство background-position (по вертикали всегда выравнивается по верхнему краю). Может принимать значения:

• left — слева,
• right — справа,
• center — по центру.

default-attachment

Нужно ли зафиксировать фон при прокрутке страницы. CSS-свойство background-attachment. Принимает значения:

• scroll — изображение скроллится вместе со страницей,
• fixed — изображение зафиксировано и не смещается при прокрутке.

default-color

Цвет фона по умолчанию, например silver или #c0c0c0. CSS-свойство background-color.

Хорошо, давайте попробуем, я например сделаю вот так:

$defaults = array(
    'default-color'          => '#eeeeee',
    'default-image'          => get_stylesheet_directory_uri() . '/grand_canyon.jpg',
    'default-repeat'         => 'no-repeat',
    'default-position-x'     => 'center',
    'default-attachment'     => 'fixed'
);
add_theme_support( 'custom-background', $defaults );

Функция get_stylesheet_directory_uri() в данном примере возвращает абсолютный URL текущей темы.

Ого, в админке появились дополнительные настройки:

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

Шаг 2. wp_head() и body_class() для добавления фона на страницы сайта.

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

• Убедитесь, что ваш header.php содержит функцию wp_head() — именно через эту функцию в тело документа будут вставляться CSS-стили. Например из предыдущего примера набор стилей будет следующий:

  <style type="text/css" id="custom-background-css"> body.custom-background { background-color: #eeeeee; background-image: url('https://misha.blog/wp-content/themes/truemisha/grand_canyon.jpg'); background-repeat: no-repeat; background-position: top center; background-attachment: fixed; } </style>

• Фон ещё не изменился? Тогда проверьте, добавлена ли к тегу <body> функция body_class(). Если нет, то добавьте её:

  <body <?php body_class() ?>>

  Кстати говоря, вы можете также поступить и следующим образом:

  <body class="custom-background">