WordPress фоновое изображение для сайта: Как добавить фоновое изображение на страницу и в запись WordPress

---

02.11.1970 Разное

---

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

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

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

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

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

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

Для решения поставленной задачи будем использовать стороннюю разработку – плагин Full Background Manager. Заметим, что плагин давно не обновлялся, но все также хорошо выполняет свою работу на самых свежих версиях WordPress.

Плагин Full Background Manager

Во-первых, его необходимо установить и активировать. Основной особенностью дополнения является отсутствие каких-либо настроек. Он работает “из коробки”. Плагин позволит Вам задать фон для каждой страницы или записи на сайте WordPress. Для этого следует открыть на редактирование запись или страницу, фон которой нужно задать. В итоге в правой ее части можно заметить добавленный плагином блок Fully Background.

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

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

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

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

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

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

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

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

как их добавлять, редактировать и настраивать. Часть 1 / Полезное / Сайты и биржи фриланса. Обзоры фриланс бирж. Новости. Советы. Фриланс для начинающих. FREELANCE.TODAY

Автор: Елизавета Гуменюк

Просто люблю писать, переводить и давать людям возможность читать интересный контент. И пусть я не всегда идеальна — есть к чему стремиться!!!

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

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

Вы в предвкушении? Тогда давайте начнем!

Что такое фоновое изображение для WordPress?

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

Независимо от выбранного вами варианта, файл functions.php обрабатывает фоновое изображение в теме WordPress. Оно также отображается в файле header.php из WordPress.

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

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

Пользовательские фоны также возможны для более конкретных мест на сайте:

• Позади страницы или поста
• На странице категории
• Внутри блока контента для страницы или поста
• На странице входа в систему
• За меню навигации
• На страницах технического обслуживания или «Скоро»

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

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

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

Настройки фонового изображения WordPress включают:

• Цвет фона
• Размеры
• Положение изображения
• Должно ли изображение повторяться
• Опции для заполнения экрана или растягивания изображения

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

Многочисленные стили фонов

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

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

Вот несколько стилей фона, которые следует учитывать:

• Стандартные фоновые изображения: это статические изображения (PNG, JPG и другие форматы изображений), которые растягиваются на большую часть пространства веб-сайта и располагаются за основным контентом. Их преимущества включают простоту, возможности для фотографий с высоким разрешением и поддержку по умолчанию ядром WordPress. Недостатки варьируются от их тенденции нарушать видимость элементов переднего плана до большого изображения с высоким разрешением, замедляющего работу вашего сайта.
• Сплошной цвет фона: сплошное фоновое изображение пригодится, если вы хотите добавить яркости своему сайту, но у вас нет фото, подходящего для вашего бренда, или изображения, которое хорошо смотрится в качестве фона. Цветной фон также представляет собой более чистое и профессиональное изображение, и их реализация не займет много времени. Такие фоны отлично подходят для соответствия вашему бренду, не требуя специального кода или плагина.
• Градиентный фон: градиентный фон переходит от одного цвета к другому. Он визуально более привлекателен, чем сплошной цвет, не требует много времени для добавления, и вы можете добавить его при помощи множества плагинов. Основным недостатком является то, что передний план может хорошо отображаться на одном конце градиента, и плохо на другом.
• Узор или текстурный фон: все фоны с рисунком и текстурой являются фотографиями, но они фокусируются на повторяющихся элементах изображения или текстуре крупным планом, таких как деревянная панель или участок травы. Хорошая особенность узора или текстуры заключается в том, что они творят чудеса в качестве фона: их можно растянуть, и большинство людей не заметят, есть ли разрыв в узоре, когда изображение недостаточно велико.
• Фоновые слайд-шоу: фон в виде слайд-шоу с изображениями позволяет владельцам сайтов делиться несколькими типами дизайнов или фотографиями в фоновом режиме, улучшая вовлеченность клиента, когда он просматривает ваш сайт. Однако слайд-шоу могут отвлекать или замедлять работу страницы.
• Видео-фоны: видео-фоны увлекательны, интересны для просмотра и легко отражают характер вашего бренда. Однако они также приводят к проблемам с производительностью, если не реализованы правильно, и могут отвлекать внимание вашей воронки продаж. Кроме того, фоновые видео должны быть идеального размера и воспроизводиться в нужное время. Их производство также может оказаться дорогостоящим, только если вы не выбираете бесплатные стоковые видеоролики.

Рекомендации по использованию фоновых изображений

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

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

Придерживайтесь высококачественных изображений

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

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

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

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

Убедитесь, что фоновые изображения имеют правильный размер

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

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

В общем, хорошее правило — придерживаться минимального размера фонового изображения для WordPress в пропорциях 1024×768 пикселей. Однако другие эксперты рекомендуют нечто большее, например, 1920×1080 пикселей. В целом, лучший способ действий — оставаться где-то между 1000 и 3000 пикселей для ширины, в зависимости от того, где отображается фон.

Следующий фактор, который вам нужно учитывать — это соотношение сторон. Покрывает ли фоновое изображение весь веб-сайт или только верхнюю четверть?

Технически веб-сайт имеет портретное соотношение сторон (высота больше, чем ширина). Таким образом, вы можете выбирать подобные типы изображений. Однако секционные фоны — например, для заголовков или рекламных баннеров — должны оставаться в альбомном формате (больше по ширине, чем по высоте).

Кроме того, наиболее распространенным соотношением сторон для настольных компьютеров сегодня является 16:9. Старайтесь придерживаться именно таких пропорций. Адаптивная тема или плагин могут автоматически настраивать фоновое изображение для мобильного просмотра.

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

Оптимизируйте изображение перед использованием в качестве фона

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

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

У вас есть два варианта оптимизации фотографий:

• Оптимизируйте фоновые изображения (и все изображения веб-сайта) перед их загрузкой в ​​WordPress. Вы можете сделать это с помощью таких инструментов, как Photoshop Express, GIMP и Pixlr.
• Автоматизируйте процесс оптимизации, установив плагин WordPress, который изменяет размер и сжимает фотографии при загрузке.

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

Перед установкой темы проверьте наличие фоновой поддержки

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

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

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

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

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

Конструкторы страниц, такие как Gutenberg, WPBakery, Divi и Elementor, предлагают впечатляющие списки блоков и модулей для вставки таких элементов, как изображения и текстовые поля, в любое место веб-страницы.

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

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

Убедитесь, что ваше фоновое изображение является законным

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

Это неправда.

Тот, кто делает фотографию, становится ее владельцем. Даже если это изображение было получено с помощью быстрого щелчка на iPhone — во многих странах у человека сразу же появляется защита авторских прав на эту фотографию.

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

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

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

Чтобы защитить себя и уважать тех, кто делает фотографии, при выборе фонового изображения учитывайте одно из следующих действий:

• Сделайте фото сами. Это самый простой способ убедиться, что вы не нарушаете чужую собственность, защищенную авторским правом.
• Платите за фотографии на таких сайтах, как Shutterstock и iStockPhoto. Иногда это дорого, но ради одного фонового изображения это может втиснуться в ваш бюджет.
• Рассмотрите бесплатный веб-сайт с изображениями, например, Unsplash или Pexels. Однако убедитесь, что авторство не требуется! Иногда вы можете найти изображения на этих сайтах, где атрибуция предлагается, но не требуется.
• Свяжитесь с фотографом или художником и спросите, можете ли вы использовать изображение бесплатно. Это может быть все, что вам нужно, особенно если вы предлагаете что-то взамен.
• Подумайте о том, чтобы отказаться от фонового изображения или выбрать цветной фон вместо фотографии.

Продолжение следует…

Всем успешной работы и творчества!

Источник

Как добавить фоновое изображение WordPress на любую веб-страницу

Это введение будет очень коротким.

Вот что мы собираемся обсудить в этой статье:

• Что такое фоновые изображения
• Что не так с фоном параллакса?
• Как добавить фоновые изображения на ваш сайт WordPress
• Как приблизиться к размеру изображения в WordPress

Готов, готов? Пойдем!

 

Что такое фоновые изображения?

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

Рассмотрим несколько примеров таких фоновых изображений:

 

IKEA

На главной странице на веб-сайте ИКЕА фоновые изображения используются для представления своих вдохновляющих историй. Название и категория истории размещаются поверх изображения. Используется наложение градиента, чтобы уменьшить непрозрачность фактического изображения. Такой подход помогает сделать текст более заметным, а также создает единообразие в дизайне, поэтому ни один цвет не выделяется больше, чем другой.

Любящий Винсент

Один из моих любимых фильмов, этот.

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

Lush

Мне так нравится, как выглядит сайт Lush: красочный и яркий, как и сами продукты.

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

Фоновые изображения параллакса

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

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

Вы также можете получить такой эффект в WordPress, я покажу вам, как это сделать чуть позже.

 

Как добавить фоновые изображения на ваш веб-сайт WordPress

Существует три основных способа добавления фоновых изображений на ваш веб-сайт WordPress. Давайте проверим их, хорошо?

 

Этот параметр доступен для большинства популярных тем WordPress. В этом примере я буду использовать тему Colibri. Другие темы ведут себя аналогично теме Colibri.

Если выбранная вами тема не поддерживает эту функцию, перейдите к методам 2 и 3.

Теперь давайте начнем с перехода в «Внешний вид» -> «Настроить» на панели инструментов WordPress. Слева вы увидите параметры редактирования настройщика темы, а справа — предварительный просмотр вашего веб-сайта в реальном времени.

Тема позволяет размещать фоновые изображения для:

• строк
• Столбцы
• Блоки (целые разделы сайта, такие как: обо мне, портфолио, команда, контакты и т.д.)
• Компоненты (заголовки, карусели, прайс-листы, карусели и т. д.)

Это можно сделать одним и тем же способом, независимо от того, где вам нужно фоновое изображение.

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

• Макет
• Стиль 
• Расширенный

Выберите Стиль -> Тип фона.

Выберите «Изображение». Теперь вы увидите изображение, которое вы можете заменить своим.

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

 

Как вы уже могли заметить, вы даже можете добавить видео в качестве фона.

А еще есть возможность переключения эффекта параллакса!

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

Если вы выберете «Изменить фон», вы будете перенаправлены в «Стиль», чтобы продолжить, как описано выше.

Это все ребята. Довольно легко, правда?

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

 

На панели инструментов WordPress перейдите в «Страницы». Теперь выберите «редактировать» под нужной страницей. Вы увидите интерфейс, как показано ниже.

Редактор WordPress по умолчанию основан на блоках, что означает, что каждый раздел веб-сайта состоит из блоков. Доступ к этим блокам можно получить с помощью любого знака «+», который вы увидите в интерфейсе. Давайте нажмем на тот, что в верхнем левом углу.

Теперь выберите блок «Обложка». Вы сразу увидите его на своей странице.

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

Я выбрал изображение из Медиатеки. Теперь я могу добавить к нему текст. Возможности редактирования здесь весьма ограничены.

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

Теперь в правой части экрана есть дополнительные параметры редактирования.

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

Когда переключатель выключен, вы можете настроить точку фокусировки.

 

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

Далее можно добавить наложение. Вы можете выбрать его цвет и прозрачность.

И вроде готово.

 

Вот некоторые плагины WordPress, помеченные как плагины фонового изображения. Я собираюсь немного поиграть с плагином Simple Full-Screen Background Image, потому что на данный момент у него больше всего установок и самые лучшие отзывы.

Вот руководство по установке плагина WordPress.

С помощью этого плагина изображения будут автоматически масштабироваться вместе с браузером, поэтому независимо от размера браузера изображение всегда будет заполнять экран.

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

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

Вот что происходит в бесплатной версии. Это довольно просто и совсем не гибко. Платный план поставляется с дополнительными опциями, такими как:

• Неограниченное количество фоновых изображений
• Фоновые изображения для постов/страниц
• Несколько изображений с плавными переходами на страницах

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

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

 

Размеры изображений 

Прежде чем загрузить какое-либо изображение на свой сайт, обратите внимание на его размер. Я знаю, что все мы смотрим на мегапиксели, но в Интернете есть одна загвоздка. Изображения с высоким разрешением могут навредить вашему сайту, повлияв на время его загрузки. В долгосрочной перспективе любая дополнительная секунда загрузки может привести к потере посетителей сайта и конверсий. Кроме того, вы значительно снизите свои шансы на ранжирование в поисковых системах, потому что возрастная скорость является важным фактором ранжирования.

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

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

Но в WordPress это можно легко сделать с помощью… плагина, как вы уже догадались.

Здесь, в Colibri, мы фанаты Smush. Smush может и будет сжимать изображения без видимого снижения качества.

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

Вот и все, ребята!

 

Если вам понравилась эта статья и вы хотите узнать больше о том, как создать веб-сайт на WordPress, обязательно подпишитесь на канал Colibri на Youtube и следите за нами в Twitter и Facebook!

Алина Беласку

+ посты

Алина — интернет-маркетолог со страстью к веб-дизайну. Когда она не разрабатывает стратегию, она занимается фотографией, слушает подкасты по истории и психологии и играет со своими двумя собаками и кошкой.

Как правильно добавлять фоновые изображения на ваш сайт WordPress

Логотип WPMU DEV

Как правильно добавить фоновые изображения на ваш сайт WordPress

Добавить фоновое изображение на ваш сайт WordPress очень просто. Верно?

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

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

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

Продолжить чтение или перейти вперед по этим ссылкам:

• Добавить фоновое изображение с помощью настроек WordPress по умолчанию
• Добавление фонового изображения с помощью плагина
• Добавление фонового изображения с помощью CSS
  • Фоновое изображение всего сайта
  • Фоновое изображение определенной категории
• Добавление фонового изображения в определенные области
• Фон (базовый) к основам

Зачем менять фон? Что ж, изображение, которое по умолчанию используется в вашей теме, может вам не понравиться или показаться, что оно сочетается с вашим брендом. Или, может быть, это вообще не изображение, а просто цвета. Или, возможно, вам изначально нравилось изображение, но оно вам наскучило.

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

Добавление фонового изображения с использованием настроек WordPress по умолчанию

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

Чтобы добавить фоновое изображение в редактор WordPress по умолчанию, вам необходимо выполнить следующие действия:

• На панели управления WP перейдите к пункту 9.0264 Внешний вид > Настройка > Фоновое изображение или Внешний вид > Фон/фоновое изображение .
• Нажмите кнопку Select Image , чтобы открыть медиатеку.
• Выберите нужное изображение, либо загрузив его со своего компьютера, либо выбрав его из своей медиатеки.
• После того, как вы выбрали изображение, нажмите синюю кнопку Choose image .
• В верхнем окне левого меню вы увидите, как ваш выбор заполняется. Справа вы увидите полноразмерный предварительный просмотр домашней страницы вашего сайта с фоновым изображением.

Если вам нравится то, что вы видите, нажмите синюю кнопку Опубликовать в правом верхнем углу, и все готово!

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

Параметр «Повторить» лучше всего использовать для рисунков, созданных для точного выравнивания, а не для фотографий.

Инструменты редактирования меню фонового изображения вместе со связанными с ними параметрами:

• Предустановка
  • По умолчанию, Заполнить экран, По размеру экрана, Повторить, Пользовательский
• Положение изображения
  • Центр, Верхний правый, Средний правый, Нижний правый, Средний нижний, Верхний левый, Средний левый, Нижний левый, Средний верхний
• Размер изображения
  • Оригинал, По размеру экрана, Заполнение экрана
• Повторять фоновое изображение — флажок
• Прокрутка со страницей — флажок

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

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

Добавление фонового изображения с помощью плагина

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

Вот некоторые из них: Расширенные фоны WordPress, Полноэкранный менеджер и Простое полноэкранное фоновое изображение.

Последнее мне больше всего нравится, поэтому я буду использовать его в этом уроке.

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

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

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

1. Установите и активируйте плагин Simple Full Screen Background Image .
2. На панели управления WP выберите Внешний вид > Полноэкранное фоновое изображение .
3. Выберите нужное изображение, либо загрузив его со своего компьютера, либо выбрав его из своей медиатеки.
4. После того, как вы выбрали нужное изображение, нажмите синюю кнопку Использовать изображение .
5. Нажмите синюю кнопку Параметры сохранения и проверьте свой сайт.

Предварительный просмотр страницы после выбора изображения в Полноэкранном фоновом изображении .

Вот оно! Теперь изображение должно отображаться на вашем сайте как полноэкранное фоновое изображение.

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

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

Добавление фонового изображения с помощью CSS

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

Настройка WP по умолчанию Дополнительное меню ввода CSS .

1. На панели инструментов WordPress перейдите к Внешний вид > Настроить .
2. Прокрутите вниз и нажмите Дополнительный CSS .
3. Вставьте соответствующий код в поле CSS следующим образом:

Фоновое изображение для всего сайта:

Загрузка gist 323116c6a2b8c0123031df725076be2d

Обязательно замените текст держателя для « imageURL URL» в коде на фактическое имя файла изображения. Чтобы увидеть это, выберите любое изображение в своей медиатеке и просмотрите информацию об изображении в правой части экрана.

WPMU DEV AccountFREE

Бесплатное управление неограниченным количеством сайтов WP

Неограниченное количество сайтов

Кредитная карта не требуется

Нажмите кнопку Копировать URL в буфер обмена для вставки кода CSS.

Фоновое изображение конкретной категории:

Загрузка gist b5ec07658945233270289ae7c5503cd0

Убедитесь, что в приведенном выше коде заменены две текстовые области держателя:

• Фактическое имя URL-адреса файла изображения для « imageURL»
• Допустимое имя категории для catname

Чтобы найти название категории:

1. Перейдите на панель инструментов сайта WordPress
2. Нажмите на сообщения > Категории
3. Выберите категорию, на которую хотите сослаться, и наведите указатель мыши на ссылку « Редактировать » для нее; вы увидите URL-адрес в левом нижнем углу страницы, который показывает идентификатор категории
.

В этом случае идентификатор категории будет 428.

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

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

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

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

Также позволяет добавлять эффект параллакса к фоновым изображениям и видео.

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

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

После установки и активации плагина перейдите на панель инструментов WordPress.

1. Нажмите на сообщение > Добавить новый .

2. Нажмите кнопку со знаком плюс + , прокрутите вниз до Раздел Design и щелкните блок AWB .

Панели инструментов для любого редактирования, которое мы хотим сделать, расположены в двух областях: верхняя панель значков и столбец бокового меню.

3. В любом меню (я предпочитаю использовать один из боковых столбцов) щелкните панель Изображение вверху (между Цвет и Видео ), затем нажмите синюю кнопку Выбрать изображение под ней. , и он откроет вашу медиатеку.

4. Выберите нужное изображение, затем щелкните синюю кнопку 9.0264 Нажмите кнопку .

После этого вы должны увидеть, что изображение теперь является частью блока AWB. (Если вы его не видите, щелкните значок изображения на панели значков AWB, и он должен появиться в поле зрения. )

Плагин AWB имеет две отдельные области меню для редактирования.

Используя настройки меню, вы можете изменить положение изображения (на основе индикатора на осях), размер, интервалы и т. д. Я оставил процентные настройки по умолчанию 50/50 (что ставит его прямо посередине), и размер по умолчанию Полный и Обложка.

Итак, теперь, когда у нас есть фон поста, нам нужно добавить фактический контент/текст поста.

1. Нажмите кнопку со знаком плюс + , расположенную в блоке поверх фонового изображения .

2. Щелкните значок Пункт , который добавит текстовый блок поверх нашего фонового изображения.

«Укладка» блоков возможна в AWB ; Вы можете поместить текст поверх фонового изображения.

Введите текстовое содержимое, затем измените выравнивание или цвет текста, если хотите (я так и сделал, но это необязательно), и вуаля! У нас есть пост со своим индивидуальным фоновым изображением.

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

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

Довольно круто.

Вернуться к основам

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

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

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