Фонові зображення WordPress: як додати на ваш сайт, сторінку та запис

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

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

Що таке фонове зображення WordPress?

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

Незалежно від того, який варіант ви оберете, фонове зображення у темі WordPress обробляє файл functions.php. Він також відображається у файлі header.php.

Контроль над активацією або відключенням функції фону для вашої теми WordPress покладена на розробників теми. Ви можете увімкнути функції On або Off, але тема вашого сайту зазвичай диктує параметри за замовчуванням.

У WordPress можна реалізувати кілька типів фонів. Ви можете вибрати стандартний фон всього веб-сайту або той, що ховається за певними елементами, такими як бічні панелі та статті.

Фони користувача також можливі для більш конкретних місць на сайті WordPress:

• За сторінкою чи публікацією WordPress.
• На сторінці категорії WordPress.
• Всередині блоку вмісту для сторінки чи запису.
• На сторінці входу.
• За меню навігації.
• На сторінках технічного обслуговування.

Якщо в темі включена підтримка фону, що настроюється, то у користувача є можливість завантажити зображення або вибрати колір, щоб заповнити весь фон сайту.

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

Завантаження фонового зображення на панель інструментів – це лише частина процесу. Після цього потрібно настроїти параметри фонового зображення. Іноді можна залишити налаштування як є, а в інших випадках важливо змінити налаштування, щоб зображення виглядало ідеальним.

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

• Колір фону.
• Розміри.
• Положення зображення.
• Чи потрібно повторювати зображення.
• Варіанти заповнення або розтягування зображення.

Спочатку розглянемо найкращі практики використання фонових зображень WordPress. Потім, як встановити фонове зображення WordPress у різних ситуаціях.

Безліч стилів фонів>

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

Ось кілька стилів фону, які слід враховувати:

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

Найкращі практики використання фонових зображень WordPress

Налаштування власного фонового зображення здається простим завданням. Просто завантажте зображення у потрібне місце та дивіться, як воно з'являється на веб-інтерфейсі.

Найчастіше це так, але бувають винятки. Ось чому рекомендуємо дотримуватися цих порад.

Використовуйте високоякісні зображення

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

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

Якщо ви не використовуєте якісне зображення, ви ризикуєте побачити розтягнуте тло.

Переконайтеся, що розмір фонових зображень правильний

Поряд із роздільною здатністю зображення має значення фізичний розмір зображення.

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

Хороше правило – дотримуйтесь мінімального розміру фонового зображення WordPress 1024 x 768 пікселів. Однак інші експерти рекомендують більший розмір, наприклад, 1920 х 1080 пікселів. Загалом, ваш найкращий спосіб дій – залишатися десь між 1000 та 3000 пікселів за шириною, залежно від того, де він відображається.
Наступний фактор, який вам потрібно враховувати, – це співвідношення сторін. Чи покриває фонове зображення весь веб-сайт або верхню чверть?
Технічно сайт має портретне співвідношення сторін (більша висота, ніж ширина). Отже, ви можете вивчити ці типи картинок. Однак фонові зображення розділів, наприклад фони для заголовків або банерів, повинні залишатися у горизонтальному форматуванні (більше за шириною, ніж за висотою).

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

Тестування фонових зображень на реальному сайті та на кількох типах пристроїв має значно спростити остаточне рішення.

Перед створенням фонового зображення WordPress оптимізуйте його

Як і всі зображення, завантажені в WordPress, ви надаєте собі ведмежу послугу, якщо не оптимізувати їх перед публікацією в Інтернеті. Це особливо важливо для фонових зображень, оскільки вони часто відображаються на кількох сторінках вашого веб-сайту. До того ж, це великі фотографії, що займають значну частину місця на екрані.

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

У вас є два варіанти оптимізації фотографій:

1. Перед їх завантаженням у WordPress оптимізуйте фонові зображення (і всі зображення веб-сайтів). Здійсніть цей ручний процес за допомогою таких інструментів, як Photoshop Express, GIMP та Pixlr.
2. Автоматизуйте процес оптимізації, встановивши плагін WordPress, який змінює розмір та стискає фотографії під час завантаження.

Перед встановленням теми перевірте наявність підтримки фону

На жаль, не всі теми підтримують фонові зображення. Часто це відбувається через те, що фон не вписується в загальний дизайн теми, тому розробник його відключає.

Тим не менш, якщо вам дійсно потрібне тло на своєму веб-сайті, розумно перевірити список функцій під час завантаження нової теми, особливо якщо ви плануєте платити за преміальну тему.

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

Інші тематичні сайти зазвичай включають аналогічну інформацію про фонові зображення.

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

Конструктори сторінок, такі як Gutenberg, WPBakery, Divi та Elementor, пропонують списки блоків та модулів для вставки таких елементів, як зображення та текстові поля, у будь-якому місці веб-сторінки.

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

Як встановити фонове зображення у WordPress?

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

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

Оскільки існує багато можливостей, розглянемо, як додати фонове зображення або колір у наступні розділи:

• Весь сайт.
• Сторінка WordPress
• Запис WordPress.
• Індивідуальний блок контенту
• Заголовок WordPress.
• Сторінка архіву категорії.
• Сторінка входу до WordPress.
• Меню навігації.
• Сторінка обслуговування.

Перед тим, як почати: активуйте підтримку фону користувача в WordPress (при необхідності)

Розробники тем вирішують долю фонових можливостей сайту. WordPress має функціональність, вбудовану в ядро, але розробник теми може вимкнути її, залишивши налаштування панелі інструментів, де її можна увімкнути.

Якщо ви виявите, що вашій темі не вистачає параметра «Фонд користувача», розгляньте наступні кроки для виправлення цієї ситуації.

Основна підтримка фону для WordPress здійснюється файлом functions.php. Відкрийте цей файл і вставте наступний код, якщо він відсутній:

$defaults = array(
    'default-color'          => '',
    'default-image'          => '',
    'default-repeat'         => '',
    'default-position-x'     => '',
    'default-attachment'     => '',
    'wp-head-callback'       => '_custom_background_cb',
    'admin-head-callback'    => '',
    'admin-preview-callback' => ''
);
add_theme_support( 'custom-background', $defaults ); 

Майте на увазі, що елемент, який фактично активує фонову підтримку, – це функція add_theme_support(), у якій є все. Цей код включає фонову функцію на панелі інструментів WordPress, яку можна використовувати у наступних пунктах цього посібника.

Також можна додати фонове зображення за промовчанням для всієї теми через файл functions.php. Перейдіть до області зі значенням default-imageз попереднього коду та додайте URL-адресу зображення в порожній простір між символами ' 'після =>.

Це швидкий і простий спосіб увімкнути фон користувача на панелі інструментів WordPress.

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

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

Якщо ваша тема пропонує можливість додавання фонового зображення, це значно спростить вам завдання.

Для початку перейдіть до панелі керування WordPress та натисніть Зовнішній вигляд > Налаштувати.

Клацніть "Налаштувати" в меню "Зовнішній вигляд".
Це призведе вас до налаштувач тем WordPress з налаштуваннями зліва і попереднім переглядом веб-сайту праворуч.

Тут знайдіть та клацніть вкладку Фон.

В якості альтернативи, якщо ви можете вибрати Зовнішній вигляд > Фон, використовуйте його для швидкого переходу до цього налаштування.

Клацніть "Фон" у меню "Зовнішній вигляд".
Область налаштування фону керує фоновими елементами для всього вашого веб-сайту.

Натисніть кнопку «Вибрати зображення», щоб продовжити налаштування.

Натисніть кнопку "Вибрати зображення".

У вікні «Вибрати зображення» виберіть зображення, яке добре підійде як тло для вашого бренду та стилю веб-сайту. Як правило, нейтральний кольоровий візерунок з чорним, білим або сірим відтінком гарантує, що більша частина тексту та контенту буде добре виглядати з таким фоном за ним.

Натисніть кнопку «Вибрати зображення».

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

Невеликий ескіз фону також відображається на панелі налаштувань, показуючи, що зображення було використане.

Для фонів WordPress доступні кілька додаткових налаштувань, зокрема поле Попередньо встановлено.

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

Ви можете вибрати одну з таких установок:

• За замовчуванням: зазвичай те саме, що і «Повтор», але це залежить від вашої теми Стандартний параметр зазвичай працює найкраще, але він залежить від використовуваного зображення.
• Заповнити екран: цей параметр розтягує зображення, щоб забезпечити покриття всіх частин екрана, навіть якщо це означає обрізання зображення, так що воно виходить за межі екрана. Він добре працює для зображень з високою роздільною здатністю, але може викликати розмиття зображень з низькою роздільною здатністю.
• За розміром екрану: зберігає вихідне співвідношення сторін фотографії та намагається використовувати це співвідношення для відповідності поточному екранному зображенню. Він добре зберігає зображення, близьке до вихідного, але може покривати всю область фону.
• Повторити: тут використовуються частини функції Fill Screen, розширюючи та розтягуючи зображення, але повторює зображення, коли воно не може успішно покрити весь екран. Для рапортів це чудово виглядає. Але для деяких зображень може призвести до різкої межі між зображеннями, що повторюються.
• Користувальницький: Цей параметр дає вам максимальний контроль над фоном, пропонуючи кілька варіантів налаштування розміру фонового зображення WordPress. Наприклад, як воно повторюється на сторінці, розтягується або переміщається під час прокручування користувачем.

Немає правила щодо того, яка з передустановок працює найкраще, тому що зображення бувають різних розмірів, дозволів та деталізації. Тому вам краще почати з налаштування за замовчуванням, а потім протестувати кожну з налаштувань, щоб те, що найкраще підходить для вашого фонового зображення.

Якщо нічого не допомагає, перейдіть до налаштування виготовлений на замовлення.

Дивіться також:

Сторінки та записи WordPress: ключові відмінності та коли використовувати

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

Наступне налаштування, яке слід враховувати, – інструмент «Положення зображення». Натисніть стрілки, щоб перемістити фонове зображення, регулюючи орієнтацію, щоб помістити фокус зображення в центр або заповнити екран.
Цей інструмент вимагає вгадування та перевірки вашої роботи, оскільки вихідне зображення та його зміст визначають, як воно виглядає на сайті.

Далі є поле прапорця, щоб фонове зображення прокручувалося зі сторінкою.

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

Зняття цього прапорця змінює загальну орієнтацію фонового зображення. Його основна функція – вказувати фону залишатися статичним, доки користувач прокручує сторінку вниз.

Елементи переднього плану (товари в даному прикладі) ковзають по фоновому зображенню, створюючи привабливий ефект.

Робота з набором налаштувань користувача

Вибираючи щось крім попередньої установки виготовлений на замовлення, у вас не так багато додаткових налаштувань. Однак при виборі попереднього налаштування Custom відкривається кілька інших полів, які слід враховувати.

Наприклад, ви можете вибрати "Заповнити екран" або "За розміром екрана", а потім об'єднати це з повторюваним або неповторним фоновим зображенням, комбінуючи елементи попередньо інсталяції. І ви, як і раніше, є опція скролінгу сторінок.

Перегляньте, чи можливе використання вихідного зображення без будь-яких змін або налаштувань. Іноді вихідне фото підходить для використання як фон, так навіщо ж зв'язуватися з додатковими налаштуваннями?

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

Після того, як ви визначитеся з ідеальними налаштуваннями фону (для цього уроку варіант за замовчуванням виглядає красиво), натисніть кнопку «Опублікувати», щоб відобразити зміни на вашому веб-сайті.

Перейдіть до інтерфейсу вашого веб-сайту, щоб побачити фон у дії.

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

Що стосується заголовка та меню, ви дізнаєтеся як їх налаштувати трохи пізніше.

Майте на увазі, що загальний фон WordPress, що настроюється, активується на кожній сторінці і кожній публікації вашого веб-сайту. Це глобальна функція для тих, хто хоче швидко брендувати свій сайт та додати трохи яскравості.

Як встановити колір фону замість зображення для всього сайту

Процес активації кольору фону на всьому веб-сайті не сильно відрізняється від встановлення фонового зображення. Для початку виберіть Зовнішній вигляд > Фон на панелі інструментів, потім знайдіть поле "Колір фону".

Натисніть кнопку «Вибрати колір», щоб відкрити додаткові параметри. Тут можна вибрати та вимкнути різні кольори для фону.

Панель кольорів надає кілька варіантів вибору кольору. Перший – це введення або вставлення коду кольору. Всі кольори мають унікальні колірні коди, і ви можете знайти ці кольори та пов'язані з ними коди за допомогою швидкого пошуку в Інтернеті.
Інший варіант – клацнути по колірній панелі. Внизу панелі є загальні зразки кольору, якщо ви віддаєте перевагу одному з простіших кольорів.

Щоб активувати колір фону, переконайтеся, що колір вибраний і відображається у вікні попереднього перегляду «Вибрати колір».

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

Тоді потрібно натиснути кнопку "Видалити" під попереднім переглядом фонового зображення.

Тепер колір з'явиться на всьому сайті, за вмістом. Як і у випадку з фоном зображення, розумно переглянути свій веб-сайт і переконатися, що при новому тлі весь текст, зображення та посилання, як і раніше, видно.

Як додати фонове зображення на сторінку WordPress

Багатьом людям подобається додавати фон на свої сторінки, тому що так можна настроїти на сторінку. Наприклад, на сторінці «Про нас» може бути історія конкретного міста, якщо компанія знаходиться у цьому місті та позиціонує себе із цим містом. Або введення в книгу автора може включати тло, що відповідає темі оповідання.

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

Примітка. Неважливо, ви використовуєте редактор Gutenberg або класичний редактор WordPress.

Для фонів конкретних сторінок ці методи працюють найкраще:

• • Додавання унікального фону сторінки за допомогою настроюваного CSS.
  • Використання плагіна, що дозволяє створювати окремі фони сторінок.
  • Увімкнення індивідуального фону на кожну сторінку за допомогою конструктора сторінок.

Додавання власного CSS на сторінку включає пошук ідентифікатора класу для цієї сторінки та виклик фонової URL-адреси в модулі Custom CSS в налаштуваннях сторінки WordPress. На щастя, не так важко визначити ідентифікатор класу сторінки.

Перейдіть на сторінку вашого сайту, де ви плануєте використовувати унікальне тло тільки для цієї сторінки.

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

Модуль відображає кодування самої сторінки разом із налаштованим CSS, що використовується глобально для вашого веб-сайту. Це корисна область для пошуку інформації про сторінку або публікацію на вашому сайті.

Дивіться також:

Три методи як змінити домашню сторінку WordPress.

Тут є рядки коду зі сторінки, але нас цікавить лише тег класу, призначений на цій сторінці. Уточнення: кожна сторінка WordPress має тег класу як ідентифікаційний код.

Скористайтеся функцією пошуку та введітьbodyабоclassзнайдіть рядок коду зpage-idтег.

У прикладі ID page-id-352але ваш буде іншим.

Скопіюйте всю частину кодуpage-id-#, включаючи ключове слово та тире.

Ідентифікатор сторінки збережіть десь для використання протягом кількох наступних кроків. Тепер поверніться до панелі інструментів WordPress та натисніть Зовнішній вигляд > Налаштувати.

Зайдіть у налаштувач теми та виберіть вкладку Додатковий CSS (Додатковий CSS) у налаштуванні WordPress.

У цьому розділі можна вводити або вставляти будь-який налаштований CSS-код. У цьому випадку він стане в нагоді для перевизначення фонового зображення за промовчанням та увімкнення фонового зображення для однієї конкретної сторінки, а не для всіх.

Вставте наступний код у поле «Додатковий CSS», але не забудьте замінити «#» фактичним числом, яке ви знайшли як ідентифікатор сторінки з попередніх кроків. Крім того, ви повинні помістити реальну URL-адресу зображення замість тексту-заповнювача, який у нас є ().

body.page-id-# { 
background-image: url("http://YOURIMAGEURL.jpeg"); 
background-position: center center; 
background-size: cover; 
background-repeat: no-repeat; 
background-attachment: fixed;
}

У цьому прикладі ідентифікатор сторінки заповнений як 352, а також URL-адреса фонового зображення, вставлена ​​з медіа-бібліотеки.

У разі потреби змініть налаштування фону, якщо у вас виникли проблеми з налаштуванням фонового зображення екрана. Наприклад, можна змінити такі елементи, як розмір фонового зображення WordPress, вкладення або положення. Якщо ні, залиште все, як у прикладі коду.

Натисніть кнопку «Опублікувати» після встановлення CSS, що налаштовується.

За допомогою цього настроюваного CSS вказана сторінка включає фонове зображення з використанням налаштувань розміру та положення коду. На жодній іншій сторінці вашого сайту не буде такого ж фону, якщо ви не повторите CSS для різних ідентифікаторів сторінок.

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

Однак найдешевший і найшвидший спосіб розмістити фонове зображення на окремій сторінці – використовувати метод коду CSS, показаний вище.

Як додати фонове зображення до запису WordPress

Більшість фонових зображень вставляється на сторінки WordPress.

Функція настроюваного фону за промовчанням у WordPress не має нічого спільного з окремими записами, крім того факту, що це фон буде відображатися і для записів у блозі. Це не ідеальне рішення, тому що різні записи в блозі можуть мати різні теми.

Блоги могли б отримати користь, використовуючи власні унікальні фонові зображення. Однак записи WordPress не мають власних налаштувань фонового зображення, що ускладнює завдання.

Але є кілька варіантів, які слід враховувати при додаванні фонового зображення до запису (ви помітите, що вони такі самі, як і при роботі з фоновими зображеннями для конкретної сторінки):

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

Оскільки створення тла для конкретного посту не дуже відрізняється від тла для конкретної сторінки, коротко торкнемося цього процесу для окремого посту.

При використанні настроюваного CSS для встановлення фону, специфічного для публікації, ви використовуєте той же код, що і для фону сторінки з однією відмінністю: ви повинні знайти ідентифікатор публікації, а не ідентифікатор сторінки.

Тому відкрийте інтерфейс запису WordPress, куди потрібно вставити фон.

Клацніть правою кнопкою миші запис і виберіть «Перевірити». Виконайте пошук у коді, щоб знайти у коді розділ класу body. Шукайте postid-# – це ідентифікатор pfgbcb, який потрібно вставити в CSS, що настроюється.

Ви помітите, що формат ідентифікатора запису у цьому прикладі трохи відрізняється порівняно з ідентифікатором сторінки, де у тезі postid-# немає дефісу між «публікацією» та «ідентифікатором», як у випадку з page-id-#. З іншого боку, це жорсткі правила. Ви можете знайти різні формати тегів.

Тепер перейдіть до панелі керування WordPress і натисніть Зовнішній вигляд > Налаштувати. Перейдіть на вкладку Додаткові CSS.

Вставте наступний код у поле CSS, що настроюється.

body.postid-# { 
background-image: url("http://YOURIMAGEURL.jpeg"); 
background-position: center center; 
background-size: cover; 
background-repeat: no-repeat; 
background-attachment: fixed;
}

Потім візьміть ідентифікатор запису, який ви знайшли раніше для потрібного запису. Замініть "#" у коді CSS на число. Крім того, замініть текст  на реальну URL-адресу фонового зображення, яке ви хочете показати, зберігаючи лапки навколо нього.

Переконайтеся, що ви натиснули кнопку Опублікувати, перш ніж залишити вкладку «Додаткові CSS».

Після внесення змін CSS ви можете повернутися до інтерфейсу цього запису в блозі WordPress і подивитися на новий фон. Протестуйте інші записи блогу та сторінки на своєму сайті, щоб переконатися, що інші не мають цього фону.

Джерело: kinsta.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/