Как сделать фон в вордпресс
Обновлено: 02.07.2024
Фон – это изображение, на котором показываются все элементы сайта. Либо он может быть не картинкой, а сплошным или градиентный цветом, текстурой.
Большинство шаблонов не поддерживают установку и смену фона. Однако не все темы способны это делать, особенно если речь идёт о бесплатных экземплярах. Но даже если у вас на сайте установлен такой шаблон, на котором можно в настройках изменить фон WordPress, это будет весьма скудной операцией, так как изменения примутся сразу на всём сайте. Нет возможности в обычных шаблонах поменять фон только у некоторых записей, рубрик или страниц.
В данной статье мы вам расскажем о двух простых плагинах, которые решают эту проблему за пару кликов.
Background Per Page
Это самый простой плагин, который позволяет проводить операции с фоном WordPress. После его установки и активации не появится никаких настроек и дополнительных пунктов панели управления сайтом. Только на странице каждой записи и страницы будет новая опция, которая позволит добавить индивидуальную фоновую картинку.
К картине, выбранной для фона WordPress, можно применить несколько эффектов:
- Выбрать повтор – горизонтальный или вертикальный;
- Сделать картинку, прокручиваемой с сайтом или фиксированной, так называемый параллакс эффект;
- Выбрать ориентацию фона WordPress – справа, слева, в центре;
- Выбрать вместо изображений обычную цветовую заливку.
Плагин бесплатный. Кроме того, каждый загруженный фон WordPress может быть отредактирован во встроенном редакторе этого дополнения.
Full Screen Background Images Pro
А этот плагин более сложен в работе, позволяет проводить больше операции с фоном WordPress. Он платный и стоит 13$. После установки активации плагина в панели администратора будет его пункт меню. В нём хранится галерея фонов, сюда можно в любое время добавлять, удалять и редактировать изображения.
Кроме этого, можно установить фон WordPress для любой записи или страницы, определяя их по идентификатору ID, для главной страницы, любой рубрики, архивных страниц и даже страницы 404.
Широкие возможности данного плагина дополняются и той функцией, что было в первом – на странице добавления каждой страницы и записи добавляют опции для установки того или иного фонового изображения, с редактором и всякими эффектами.
В общем, отличный инструмент, чтобы сделать фон WordPress. И платный, и бесплатный плагин подойдут для решения многих задач, с этим связанных.
С помощью плагина — Full Background Image Manager, вы сможете изменять фон для каждой по отдельности записи и страницы wordpress сайта. На странице редактирования записи и страницы, у вас появится виджет, где вы сможете задавать для определённой страницы цвет фона, текстуру фона или изображение фона.
Цвет фона.
Текстура фона.
Изображение фона.
Установить плагин вы сможете прямо из админ-панели wordpress. Перейдите по вкладке: Плагины — Добавить новый , введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.
После установки и активации плагина, откройте страницу для редактирования, у которой вы хотите изменить фон. У вас появится специальный виджет, в котором вы сможете задавать цвет фона, текстуру или изображения. Чтобы задать цвет для фона, то просто нажмите по кнопки — Выбрать цвет , выберите цвет, обновите страницу и смотрите результат. Можете выбрать в качестве фона Текстуру , вам будет предложено на выбор 8 вариантов. Просто нажмите по текстуре, выделите её и обновите страницу или запись, чтобы изменения вступили в силу.
Чтобы установить в качестве фона изображение, то нажмите на кнопку — No , затем у вас появится вкладка — Set background image , нажмите по данной вкладке и выберите изображение, которое вы хотите установить в качестве фона.
Attachment
— Fixed, изображение будет зафиксировано.
— Scroll, изображение будет прокручиваться.
Repeat
— No Repeat, не повторять изображение.
— Repeat, повторять изображение.
— Repeat Horizontally, повторять по горизонтали.
— Repeat Vertically, повторять по вертикали.
После того как вы установите новый фон для записи или страницы, не забудьте Обновить страницу, чтобы изменения вступили в силу.
Приветствуем вас! WordPress пользуется спросом у многих пользователей, как в качестве платформы для ведения блогов, так и для системы управления контентом (CMS). Мы с этим согласны, поскольку эту платформу легко изучить, использовать и настраивать. Сегодня мы хотим вам показать, как изменить цвет фона одной страницы в WordPress. Мы не будем использовать плагины, просто некоторый простой код CSS.
Шаг 1. Поиск идентификатора вашей страницы
Затем в нижней части вашего браузера появится ссылка. Запишите идентификатор из этой ссылки. Идентификатор будет номером после post= . В нашем случае это 3.
Вы будете использовать этот идентификатор для своего класса CSS, который необходим для изменения цвета фона отдельной страницы.
Также можно найти класс CSS этой конкретной страницы:
Как вы можете видеть, Chrome выделил то, что мы искали. Теперь вам нужно скопировать номер из класса, а не только page-id ! В нашем примере, весь класс CSS, что мы будем использовать это page-id-3 .
Шаг 2. Добавление кода CSS
Добавьте следующий код CSS в WordPress:
Измените номер 3 с вашим собственным идентификатором страницы. Если вы использовали альтернативный метод, указанный выше, вам просто нужно скопировать класс, который вы найдете в исходном коде, который будет автоматически содержать правильный идентификатор для этой конкретной страницы WordPress.
Если вы получили идентификатор страницы отдельно, используя первый метод, замените его в коде на него.
Например, если идентификатор вашей страницы 479 , то код будет выглядеть так:
Вуаля, теперь у вас будет другой цвет фона для отдельной страницы WordPress!
Если цвет фона не меняется
б) Если это не помогает, добавьте !important в код CSS, например:
Очистите кеш еще раз. Вот что у нас получилось на нашей тестовой теме Twenty Seventeen.
Мы надеемся, что, вы нашли этот урок полезным и вам удалось изменить цвет фона одной страницы в WordPress! А у нас на этом все. Всем пока!
Нажмите на картинку для увеличения, откроется в новом окне.
Обязательно сохраните файл перед тем, как производить изменения на тот случай, если Вы совершите ошибку это Вам сэкономит кучу времени и не будет необходимости переустанавливать тему. Итак, далее ищем строки:
Все очень легко и просто, хотя скажу прямо, что по не знанию можно потерять кучу времени и нервов. Думаю, что объяснил понятно, если что не ясно всегда буду рад ответить на все Ваши вопросы.
Читайте также: