Произвольный фон в теме 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. Преподаватель в школе Нетология.
Пишите, если нужна помощь с сайтом или разработка с нуля.
Нужно изменить фон страницы статьи в WP
Да, почти наверняка изменить фон можно именно здесь. Только вот у каждой темы свой файл стилей, и сказать точно, как в вашей теме зовется стиль, по которому отображается фон — сложновато.
На сайте с 03.12.2007
16 сентября 2011, 21:45
WordPress 3.1.3 Тема Twenty Ten (не уверен, кажется — 1.2
На сайте с 02.11.2008
16 сентября 2011, 21:54
VRRR, Как бы чтобы изменить фон для отдельной страницы — нужно создать ее шаблон.Погуглите.
Записки нищего (http://zapiskinishego.ru) — мой личный блог Услуги php программиста. Очень нужна любая работа. Не покупают? Поведенческий аудит интернет-магазина за 5000 руб. (/ru/forum/990312)
На сайте с 07.02.2010
16 сентября 2011, 22:16
VRRR, в личку поциента, посмотрим.
На сайте с 15.08.2009
17 сентября 2011, 11:06
Апокалипсис:
VRRR, Как бы чтобы изменить фон для отдельной страницы — нужно создать ее шаблон.Погуглите.
Кажется, имеется в виду не совсем отдельная страница, а скорее группа страниц с одиночной записью single.php. В общем VRRR, смотрите какие стили используются в этом php-файлике, ищите их в style.css, среди этих стилей ищите строчку типа background-color: #_ _ _ _ и экспериментируйте:)
На сайте с 03.12.2007
17 сентября 2011, 11:26
lifeout:
Кажется, имеется в виду не совсем отдельная страница, а скорее группа страниц с одиночной записью single.php. В общем VRRR, смотрите какие стили используются в этом php-файлике, ищите их в style.css, среди этих стилей ищите строчку типа background-color: #_ _ _ _ и экспериментируйте:)
Так и делал, причем не один раз Весь шаблон подгонял под себя сам, но вот фон страницы не могу найти и все, причем только на этом сайте. На других все нормально.
Как изменить фон страницы в wordpress?
Если вы хотите изменить фон страницы на своем сайте WordPress, вам нужно выполнить следующие шаги:
- Войдите в админ-панель своего сайта WordPress.
- Найдите в меню слева пункт «Внешний вид» и выберите «Настройки».
- Нажмите на вкладку «Фон».
- Выберите цвет фона, изображение или паттерн, который вы хотите использовать в качестве фона вашей страницы. Вы можете загрузить свое собственное изображение или выбрать из предложенных вариантов.
- Нажмите на кнопку «Сохранить изменения».
Если вы хотите добавить свой собственный CSS-код для изменения фона страницы, то вам нужно выполнить следующие шаги:
- Войдите в админ-панель своего сайта WordPress.
- Найдите в меню слева пункт «Внешний вид» и выберите «Редактор».
- Выберите файл style.css.
- Вставьте свой CSS-код для изменения фона страницы.
- Нажмите на кнопку «Обновить файлы».
Пример CSS-кода для изменения фона страницы:
body < background-color: #ffffff; /* замените #ffffff на цвет, который вы хотите использовать в качестве фона / background-image: url(‘your-image-url’); / замените ‘your-image-url’ на URL-адрес вашего изображения */ >Однако, перед тем как вносить изменения в файл style.css, рекомендуется создать резервную копию этого файла, чтобы в случае ошибки можно было вернуться к предыдущей версии.
Также стоит учитывать, что изменение фона страницы может существенно повлиять на визуальное оформление вашего сайта. Поэтому важно выбирать цвет, изображение или паттерн, который будет соответствовать общему дизайну вашего сайта и не будет мешать чтению контента.
Если вы не уверены, какой фон лучше всего подойдет для вашего сайта, можно использовать онлайн-инструменты для генерации цветовых схем или паттернов, которые помогут выбрать оптимальный вариант.
Надеюсь, эти советы помогут вам успешно изменить фон страницы на вашем сайте WordPress.
Как изменить фон страницы в wordpress
Уважаемые читатели, я снова рад приветствовать Вас. Сегодня я хочу с Вами поделиться одним полезным и простым советом. В свое время я столкнулся с тем, что на некоторых темах, фон не соответствует желаемому, а иногда практически совсем не соответствует нашему желанию. Как же поменять фон в теме WordPress?
Необходимо немного изменить код в файле style.css , для этого заходим в «Панель управления», далее во вкладке «Дизайн» выбираем «Редактор» и справа выбираем style.css , после этого у нас открывается данное окно:
Нажмите на картинку для увеличения, откроется в новом окне.
Обязательно сохраните файл перед тем, как производить изменения на тот случай, если Вы совершите ошибку это Вам сэкономит кучу времени и не будет необходимости переустанавливать тему. Итак, далее ищем строки:
body
margin: 0 auto;
padding: 0;
background-color: #FFFFFF;
>
строки обычно находятся вверху файла, строка background-color: #FFFFFF; отвечает за фон и все что Вам нужно сделать, это поменять цвет на тот, который Вам нужен.
В данном случае заменить #FFFFFF на нужный код, затем нажать «Обновить файл» и радоваться результатом. Коды цветов Вам подскажет, практически любой редактор или можете набрать в Яндексе «Таблица цветов» и Вы получите коды любого цвета. Так что, как видите все очень просто, Вам необходимо заменить всего шесть цифр и Вы будете рады результату.
Все очень легко и просто, хотя скажу прямо, что по не знанию можно потерять кучу времени и нервов. Думаю, что объяснил понятно, если что не ясно всегда буду рад ответить на все Ваши вопросы.