Вы хотите добавить фоновое изображение на свой сайт WordPress?
Фоновые изображения можно использовать, чтобы сделать ваш сайт более привлекательным и эстетичным.
В этой статье мы покажем вам, как легко добавить фоновое изображение на ваш сайт WordPress.
Если вы предпочитаете письменные инструкции, продолжайте читать.
Метод 1. Добавьте фоновое изображение, используя настройки темы WordPress.
. Самые популярные темы WordPress поставляется с настраиваемой фоновой поддержкой. Эта функция позволяет легко установить фоновое изображение на вашем веб-сайте WordPress.
Если используемый WordPress тема поддерживает пользовательские функции фона, мы рекомендуем использовать этот метод, чтобы добавить фоновое изображение на ваш сайт.
Однако, если ваш WordPress тема не поддерживает эту функцию, или если вам не нравится, как он реализует фоновые изображения, вы можете попробовать другие варианты, упомянутые в нашем руководстве.
Вы должны сначала посетить страницу Внешний вид »Настроить в вашей админке WordPress. Это запустит Настройщик WordPress тема где вы можете изменить различные настройки этой темы во время предварительного просмотра в реальном времени.
Затем вам нужно нажать на опцию 'Изображение на заднем плане'. Панель выдвинется и покажет вам варианты загрузки или выбора фонового изображения для вашего веб-сайта.
Нажмите кнопку «Выбрать изображение», чтобы продолжить.
Появится всплывающее окно WordPress, где вы можете загрузить изображение со своего компьютера. Вы также сможете выбрать изображение, ранее загруженное из медиатеки.
Затем вам нужно нажать кнопку «Выбрать изображение» после загрузки или выбора изображения, которое вы хотите использовать в качестве фона.
Это закроет всплывающее окно загрузчика мультимедиа, и вы увидите предварительный просмотр выбранного изображения в настройке темы WordPress.
Под изображением вы также сможете увидеть параметры фонового изображения. Под " ПредустановкаВы можете выбрать способ отображения фонового изображения: заполнить экран, по размеру экрана, повторить или настроить.
Вы также можете выбрать положение фонового изображения, щелкнув стрелки ниже. При нажатии на центр изображение выравнивает изображение по центру экрана.
Не забудьте нажать на кнопку « публиковать Чтобы сохранить ваши настройки. Вот и все, вы успешно добавили фоновое изображение на свой сайт WordPress.
Посетите свой веб-сайт, чтобы увидеть его в действии.
Метод 2. Добавьте собственное фоновое изображение в WordPress с помощью плагина.
Этот метод намного более гибкий. Он работает с любой темой WordPress и позволяет настраивать несколько фоновых изображений.
Вы также можете настроить разные фоны для любого сообщения, страницы, категории или любого другого раздела вашего веб-сайта WordPress.
Он автоматически делает все ваши фоновые изображения полноэкранными и адаптивными. Это означает, что размер вашего фонового изображения будет автоматически изменяться на небольших устройствах.
Прежде всего, вам необходимо установить и активировать плагин Full Screen Background Pro. Для получения дополнительных сведений см. Наше пошаговое руководство по как установить плагин WordPress.
После активации необходимо посетить страницу Внешний вид »Полноэкранное изображение BG настроить параметры плагина.
Вам будет предложено добавить лицензионный ключ. Вы можете получить эту информацию по электронной почте, полученной после покупки плагина, или из своей учетной записи на веб-сайте плагина.
Затем вам нужно нажать на значокСохранить настройки'для сохранения ваших изменений. Теперь вы готовы начать добавлять фоновые изображения на свой сайт WordPress.
Идите вперед и нажмите на кнопку Добавить новое изображение На странице настроек плагина. Вы перейдете на экран загрузки фонового изображения.
Нажмите на кнопку 'Загрузить изображение', чтобы загрузить или выбрать изображение. Как только вы выберете изображение, вы сможете увидеть его на экране в режиме реального времени.
Затем вам нужно указать имя для этого изображения. Это имя будет использоваться внутри компании, поэтому вы можете использовать его где угодно.
Наконец, вам нужно выбрать, где вы хотите использовать это изображение в качестве фонового изображения.
Full Screen Background Pro также позволяет вам настраивать фоновые изображения для всего веб-сайта или вы можете выбирать из различных разделов вашего веб-сайта, таких как категории, архивы, домашняя страница или блог.
Не забудьте сохранить для хранения фонового изображения.
Вы можете добавить столько изображений, сколько захотите, зайдя на страницу apparence »Полноэкранное изображение BG
Если вы определите несколько изображений, которые будут использоваться глобально, плагин отобразит автоматически фоновые изображения в виде слайд-шоу.
Вы можете настроить время, необходимое для исчезновения изображения, и время, по истечении которого появляется новое фоновое изображение.
Здесь вы вводите время в миллисекундах. Если вы хотите, чтобы фоновое изображение исчезло через 20 секунд, вам нужно будет ввести 20000.
Не забудьте нажать на кнопку Параметры сохранения чтобы сохранить ваши изменения.
Фоновые изображения для сообщений, страниц и категорий
Full Screen Background Pro также позволяет вам устанавливать фоновые изображения для сообщений, страниц, категорий, тегов и т. Д.
Просто отредактируйте сообщение / страницу, где вы хотите отобразить другое фоновое изображение. На странице редактирования статьи вы заметите новую группу " Полноэкранное фоновое изображение »В редакторе статьи.
Чтобы использовать фоновое изображение для определенной категории, вам необходимо посетить страницу Внешний вид »Полноэкранное фоновое изображение, затем нажмите "Загрузить изображение .
После загрузки изображения вы можете выбрать «категорию» в качестве контекста, в котором вы хотите отображать фоновое изображение.
Введите идентификатор конкретной категории или слага, в котором вы хотите отобразить изображение.
Не забудьте сохранить изображение, чтобы сохранить настройки.
Метод 3. Добавьте пользовательские фоновые изображения в любом месте WordPress с помощью кода CSS.
По умолчанию WordPress добавляет несколько классов CSS к различным элементам HTML на вашем веб-сайте WordPress. Вы можете легко добавить пользовательские фоновые изображения к сообщениям, категориям, авторам и другим страницам, используя эти созданные WordPress классы CSS.
Например, если на вашем веб-сайте есть категория под названием TV, WordPress автоматически добавит эти классы CSS в тег body, когда кто-то просматривает страницу категории TV.
Вы можете использовать инструмент проверки чтобы увидеть, какие именно классы CSS добавлены WordPress в тег body.
Вы можете использовать любой из классов CSS, чтобы по-разному стилизовать эту страницу категории.
категория-твкатегория-4
Давайте добавим собственное фоновое изображение на страницу архива категории. Вам нужно будет добавить этот собственный CSS в вашу тему WordPress.
body.category-tv { background-image: url ("http://example.com/wp-content/uploads/2017/03/your-background-image.jpg"); фоновая позиция: по центру по центру; размер фона: обложка; фон-повторить: не повторять; прикрепление фона: исправлено; }
Вы также можете добавить собственный фон к отдельным сообщениям и страницам. WordPress добавляет класс CSS с идентификатором публикации или страницы в теле тега. Вы можете использовать тот же код CSS, просто заменив .category-tv классом CSS определенного сообщения.
Откройте для себя также несколько премиальных плагинов WordPress
Вы можете использовать другие WordPress плагины чтобы придать современный вид и оптимизировать обработку вашего блога или веб-сайта.
Мы предлагаем вам несколько премиальных плагинов WordPress, которые помогут вам сделать это.
1. Easy Custom JS и CSS
Ce Плагин Wordpress premium — это мощный редактор кода CSS и JavaScript, который позволяет добавлять их в любой раздел вашего веб-сайта. Это позволяет вам сохранить ваши настройки даже после серьезного обновления вашей темы WordPress. 
У вас есть возможность ограничить область использования вашего персонализированного кода. Например, вы можете использовать свой код только для статьи, имеющей видеоформат.
Смотрите наши статьи на Как потребовать принятия условий использования на WordPress
Или вы можете ограничить свой код определенной темой WordPress; Что удобно, если вы в настоящее время меняете темы для своего блога WordPress.
скачать | Демонстрация | веб-хостинг
2. Желтый карандаш: визуальный редактор стилей CSS
Yellow Pencil - это редактор визуальных стилей, который можно использовать с любой темой, чтобы персонализировать свой веб-сайт за считанные минуты (шрифты, цвета, анимация и многое другое…).
Ce Плагин Wordpress premium создаст стили CSS, фон пока вы играете с цветами, как в игру, она предназначена как для начинающих, так и для опытных пользователей.
Узнайте также наш Плагины 5 WordPress показывать уведомления
Никаких знаний кодирования не требуется. Тем не менее Плагин Wordpress имеет хороший редактор CSS для тех, кто любит программировать. Вы можете создавать код в реальном времени с помощью этого редактора и настраивать свой CSS.
скачать | Демонстрация | веб-хостинг
3. Виджет последних комментариев Facebook
Этот виджет позволяет отображать список последних комментариев Facebook из вашего блога WordPress на первой странице или в любом месте, где есть виджет, используемый веб-сайтом.
В качестве функций вы будете среди прочего: отображение всех последних комментариев вашего веб-сайта или блога WordPress,Автоматическое или ручное одобрение комментариев, отображаемых в виджете,отправка уведомления по электронной почте, когда человек комментирует через плагин комментариев Facebook, хороший SEOсовместимость с любая тема WordPress, oварианты настройки виджета и многое другое.
скачать | Демонстрация | веб-хостинг
Рекомендуемые ресурсы
Узнайте о других рекомендуемых ресурсах, которые помогут вам создать и управлять своим сайтом.
- Как скрыть виджет WordPress на мобильном устройстве
- Плагины 10 WordPress для улучшения визуального оформления вашего веб-сайта
- Как вручную перенести сайт на WordPress: руководство
- 7 плагинов WordPress для кнопок с призывом к действию на WordPress
Заключение
Вот ! Это все для этого урока. Мы надеемся, что эта статья помогла вам узнать, как добавить фоновое изображение в WordPress. Не стесняйся поделиться с друзьями в ваших любимых социальных сетях.
Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов по созданию интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress.
Если у вас есть предложения или замечания, оставьте их в нашем разделе Комментарии.
...
