Qudrat Qodirov

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

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

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

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

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

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

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

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

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

 

 

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

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.

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

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

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

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

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

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

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

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

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

 

Обсуждение закрыто.