Произвольный фон в теме 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() для добавления фона на страницы сайта.

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

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