Как добавить фоновое изображение в WordPress

Хотите добавить фоновое изображение на свой сайт WordPress? Фоновые изображения могут быть использованы, чтобы сделать ваш сайт более привлекательным и эстетичным. В этой статье мы покажем вам, как легко добавить фоновое изображение на ваш сайт WordPress..


Как добавить фоновое изображение в WordPress

Видеоурок

Подписаться на WPBeginner

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

Способ 1. Добавьте фоновое изображение, используя настройки темы WordPress

Большинство бесплатных и премиальных тем WordPress поставляются с пользовательской поддержкой фона. Эта функция позволяет легко установить фоновое изображение для вашего сайта WordPress..

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

Сначала вам нужно посетить Внешний вид »Настройка страница в вашем админ WordPress. Это запустит настройщик тем WordPress, где вы можете изменить различные настройки темы при просмотре живого предварительного просмотра вашего сайта..

Опция фонового изображения в настройщике тем WordPress

Затем вам нужно нажать на опцию «Фоновое изображение». Панель откроется и покажет вам варианты загрузки или выбора фонового изображения для вашего сайта..

Выберите фоновое изображение

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

Это откроет всплывающее окно WordPress Media Uploader, где вы можете загрузить изображение с вашего компьютера. Вы также можете выбрать ранее загруженное изображение из медиа библиотеки.

Загрузить фоновое изображение

Далее вам нужно нажать на кнопку выбора изображения после загрузки или выбрать изображение, которое вы хотите использовать в качестве фона.

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

Настройки фонового изображения

Под изображением вы также сможете увидеть параметры фонового изображения. В разделе «Предустановки» вы можете выбрать способ отображения фонового изображения: экран заливки, экран подгонки, повтор или пользовательский режим..

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

Не забудьте нажать на кнопку «Сохранить» & Кнопка «Опубликовать» вверху, чтобы сохранить ваши настройки. Вот и все, вы успешно добавили фоновое изображение на свой сайт WordPress..

Идите вперед и посетите ваш сайт, чтобы увидеть его в действии.

Способ 2. Добавить пользовательское фоновое изображение в WordPress с помощью плагина

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

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

Для начала вам нужно установить и активировать плагин Full Screen Background Pro. Для получения более подробной информации, смотрите наше пошаговое руководство по установке плагина WordPress..

После активации вам необходимо посетить Внешний вид »Полноэкранное изображение BG страница для настройки параметров плагина.

Полноэкранный фон

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

Затем вам нужно нажать на кнопку «Сохранить настройки», чтобы сохранить изменения. Теперь вы готовы начать добавлять фоновые изображения на свой сайт WordPress..

Нажмите кнопку «Добавить новое изображение» на странице настроек плагина. Вы попадете на экран загрузки фонового изображения..

добавить новое фоновое изображение

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

Далее необходимо указать имя для этого изображения. Это имя будет использоваться внутри, так что вы можете использовать здесь что угодно.

Наконец, вам нужно выбрать, где вы хотите использовать это изображение в качестве фоновой страницы. Full Screen Background Pro позволяет вам устанавливать изображения в качестве фона во всем мире, или вы можете выбирать из различных разделов вашего сайта, таких как категории, архивы, первая страница, страница блога и т. Д..

Не забудьте нажать кнопку «Сохранить изображение», чтобы сохранить фоновое изображение.

Вы можете добавить столько изображений, сколько хотите, посетив Внешний вид »Полноэкранное изображение BG страница.

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

Вы можете настроить время исчезновения изображения и время, после которого новое фоновое изображение начинает исчезать..

Настройки затухания и затухания фона

Время, которое вы вводите здесь, указывается в миллисекундах. Если вы хотите, чтобы фоновое изображение исчезло через 20 секунд, вам нужно будет ввести 20000.

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

Настройка фонового изображения для отдельных сообщений, страниц, категорий и т. Д.

Full Screen Background Pro также позволяет устанавливать фоновые изображения для отдельных сообщений, страниц, категорий, тегов и т. Д..

Просто отредактируйте сообщение / страницу, где вы хотите отобразить другое фоновое изображение. На экране редактирования сообщения вы увидите новое поле «Полноэкранное фоновое изображение» под редактором сообщения..

Добавление фонового изображения для одного поста или страницы

Чтобы использовать фоновое изображение для определенной категории, вам необходимо посетить Внешний вид »Полноэкранное изображение BG страницу, а затем нажмите кнопку «Добавить новое изображение».

После загрузки изображения вы можете выбрать «Категория» в качестве контекста, в котором вы хотите отобразить фоновое изображение..

Установить фоновое изображение для определенной категории

Теперь введите конкретный идентификатор категории или слаг, где вы хотите отобразить изображение. Смотрите наше руководство о том, как найти идентификатор категории в WordPress.

Не забудьте сохранить изображение для сохранения настроек.

Способ 3. Добавление пользовательских фоновых изображений в любом месте WordPress с использованием CSS

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

Например, если у вас есть категория на вашем сайте, которая называется TV, WordPress автоматически добавит эти CSS-классы в тег body, когда кто-то просматривает страницу категории TV..

Вы можете использовать инструмент проверки, чтобы увидеть, какие классы CSS добавляются WordPress в тег body..

Используйте инструмент проверки, чтобы увидеть классы, добавленные WordPress

Вы можете использовать CSS-класс category-tv или category-4, чтобы по-разному стилизовать только эту страницу категории..

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

body.category-tv {
background-image: url ("http://example.com/wp-content/uploads/2017/03/your-background-image.jpg");
background-position: центр центра;
размер фона: обложка;
повторение фона: без повтора;
background-attachment: исправлено;
}

Не забудьте заменить URL-адрес фонового изображения и класс категории своей собственной категорией.

Вы также можете добавлять собственные фоны для отдельных сообщений и страниц. WordPress добавляет класс CSS с идентификатором записи или страницы в теге body. Вы можете использовать тот же код CSS, просто заменив .category-tv на класс CSS для публикации.

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map