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

Произвольный фон в теме 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 — повторять во всех направлениях.

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

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

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

$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" style="color: #c1ef65;">"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>

 body_class() ?>>

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

body style="color: #c1ef65;">"custom-background">

Смотрите также

• add_theme_support() — добавляет поддержку: форматов постов, миниатюр, меню, HTML5, произвольного фона и заголовка
• body_class() — выводит атрибут класс и его содержимое для страницы
• wp_head() — хук для подключения CSS, JS, jQuery и добавления мета-тегов
• get_stylesheet_directory_uri() — как узнать абсолютный URL папки с темой

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.

Изменение цвета фона отдельной страницы в WordPress

Приветствуем вас! WordPress пользуется спросом у многих пользователей, как в качестве платформы для ведения блогов, так и для системы управления контентом (CMS). Мы с этим согласны, поскольку эту платформу легко изучить, использовать и настраивать. Сегодня мы хотим вам показать, как изменить цвет фона одной страницы в WordPress. Мы не будем использовать плагины, просто некоторый простой код CSS.

Шаг 1. Поиск идентификатора вашей страницы

Во-первых, вам нужно найти идентификатор страницы WordPress. Перейдите на «Страницы» — «Все страницы» и наведите курсор мыши на ссылку «Изменить» на странице.

Затем в нижней части вашего браузера появится ссылка. Запишите идентификатор из этой ссылки. Идентификатор будет номером после post= . В нашем случае это 3.

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

Также можно найти класс CSS этой конкретной страницы:

• Открываем страницу в браузере
• Щелкаем правой кнопкой мыши в любом месте и выбираем «Просмотр кода страницы»
• Нажимаем CTRL-F и выполняем поиск фрагмента «page-id»
• Копируем класс CSS, который обычно находится в теге .page-id-X

Как вы можете видеть, Chrome выделил то, что мы искали. Теперь вам нужно скопировать номер из класса, а не только page-id ! В нашем примере, весь класс CSS, что мы будем использовать это page-id-3 .

Шаг 2. Добавление кода CSS

Добавьте следующий код CSS в WordPress:

.page-id-3

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

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

Например, если идентификатор вашей страницы 479 , то код будет выглядеть так:

.page-id-479

Вы также можете изменить цвет фона, изменив шестнадцатеричный код цвета, вместо #99E8D0 , на свой код.

Вуаля, теперь у вас будет другой цвет фона для отдельной страницы WordPress!

Если цвет фона не меняется

a) Очистите кэш своего сайта и браузера (или используйте окно «Новое окно в режиме инкогнито» ), затем проверьте снова.

б) Если это не помогает, добавьте !important в код CSS, например:

.page-id-2

Очистите кеш еще раз. Вот что у нас получилось на нашей тестовой теме Twenty Seventeen.

Мы надеемся, что, вы нашли этот урок полезным и вам удалось изменить цвет фона одной страницы в WordPress! А у нас на этом все. Всем пока!

С уважением Вячеслав и Валерия!

Как изменить фон вашего блога WordPress 1 мин для чтения

Добавить в избранное

Главное меню » CMS WordPress » Как изменить фон вашего блога WordPress

Чтобы ваш блог WordPress отражал вашу личность, вы можете контролировать цвета, которые использует ваш блог. В теме Twenty Ten WordPress есть опция, позволяющая изменить цвет фона вашего блога WordPress. Вы даже можете использовать изображение в качестве фона. Чтобы изменить фон Twenty Ten для своего блога, выполните следующие действия:

Примечание

Если вы не используете тему Twenty Ten по умолчанию, вы также можете использовать тег в шаблоне заголовка, чтобы изменить цвет фона вашего веб-сайта.

1. Щелкните ссылку «Фон» в меню «Внешний вид». Страница настраиваемого фона загружается на панели инструментов.
2. Чтобы изменить цвет фона, введите шестнадцатеричный код цвета в текстовом поле «Цвет».

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

• Положение: выберите «Слева», «По центру» или «Справа», чтобы установить положение экрана для фонового изображения на вашем веб-сайте.
• Повтор: выберите «Без повтора», «Плитка», «Плитка по горизонтали» или «Плитка по вертикали» в раскрывающемся меню, чтобы задать поведение повторения изображения для фонового изображения на вашем веб-сайте.
• Вложение: выберите «Прокрутка», чтобы установить фоновое изображение для прокрутки страницы вниз, или выберите «Фиксированное», чтобы установить фоновое изображение в статическом положении (чтобы оно не прокручивалось вниз по странице).

Вы можете добавить опцию Custom Background к любой теме с помощью вставки нескольких строк кода. Просто выполните следующие действия:

1. Перейдите на страницу редактирования тем и щелкните шаблон функций темы. Шаблон функций темы откроется в текстовом редакторе в левой части страницы.
2. Добавьте следующую строку кода в шаблон функций темы:

add_custom_background();

Примечание

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

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Как на WordPress-сайте установить альтернативный фон для страниц и записей?

Часто у владельцев сайтов возникает необходимость задать разный фон для разных страниц или разделов сайта. Обычно такая задача стоит, если необходимо на сайте выделить какое-либо его части или отдельные страницы.

Установка фона для всех страниц

Стандартные инструменты WordPress позволяют задавать фон исключительно для всех страниц, не предоставляя какие-либо альтернативные варианты. Для этого в админ-разделе необходимо перейти Внешний вид -> Настроить, где выбрать Фоновое изображение.

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

Например, расширенные опции задания фоновых цветов и изображений доступны в premium-шаблоне Reboot . Все настраивается во встроенном кастомайзере.

• установить фон для всего сайта или только для зоны контента;
• загрузить свою картинку в качестве фоновой;
• повторять изображение в любом направлении (удобно для равномерных текстур);
• задать для фона позицию в WordPress-макете;
• выбрать размеры для бэкграунда;
• сделать фоновую картинку ссылкой и скрыть ее с помощью Java Script.

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

Для выгодной покупки используйте мой промокод.

Скидка на Reboot

Установка альтернативного фона страниц и записей

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

В итоге измененная Вами страница или запись примет вид:

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

В итоге фон на странице будет выглядеть так:

Еще одна возможность плагина — выбрать в качестве фона изображение. Для этого необходимо передвинуть ползунок в положение No, после чего нажать на появившеюся ссылку Set background image.

Дальше, используя стандартные инструменты Медиабиблиотеки WordPress, нужно выбрать из уже присутствующих на сайте или загрузить новое изображение. В итоге панель примет вид:

Следует отметить, что Вы можете задать правила повторения фона на странице. Доступны варианты горизонтального и вертикального повтора (опция Repeat). После нажатия кнопки Обновить Ваша страница будет выглядеть теперь так:

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

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