Як зробити контент на повну ширину екрану в WordPress

25.04.2025

Вступ

Тема Twenty Twenty-Two, що входить до стандартної лінійки тем WordPress, створена з використанням сучасного підходу Full Site Editing (FSE). Хоча це забезпечує значну гнучкість, воно також вводить деякі обмеження макета, які можуть бути не одразу очевидними. Одним із таких обмежень є те, що контент за замовчуванням не розгортається на всю ширину, навіть коли ви цього хочете.

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

Чому це важливо?

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

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

Це скріншоти з 85% шириною макета: Внутрішні блоки використовують ширину контенту Вкладені блоки використовують ширину контенту з опціями для повної та широкої ширини. У моєму випадку:

Content width = 85%
Wide width = 85%

Оновлення налаштування макета

Використовуючи візуальний редактор вордпреса переходимо до налаштувань макета:

зверху ліворуч клацаємо на кнопку Document Overview
Далі вибираємо основний блок в моєму випадку це Query Loop
Праворуч вгорі клацаємо на кнопку style
І в списку параметрів вибираємо Layout

Встановлюємо значення content width та wide width – 100%
Клацніть Settings та увімкніть псвітчер лаайаута, де написано turn Inner blocks use content і також встановіть значення 100% для content width та wide width

Ви можете побачити різницю в ширині, але лише в ширині вмісту внутрішнього блоку

Цей підхід ідеально підходить, якщо ви використовуєте тему блоків, таку як Twenty Twenty-Two, і хочете зробити зміни візуально без зміни коду для керування макетом.

Налаштування зовнішнього інтервалу

Редагування theme.json відбудеться через редактор файлів теми. Якщо ви не використовуєте зовнішній редактор коду або доступ до FTP, WordPress надає вбудований інструмент:

В розділі Tools виберіть Theme File Editor.
В списку файлів виберіть theme.json. його код відобразиться у вікні редактора.

Знайдіть наступні рядки:

"custom": {
	"spacing": {
		"small": "max(1.25rem, 5vw)",
		"medium": "clamp(2rem, 8vw, calc(4 * var(--wp--style--block-gap)))",
		"large": "clamp(4rem, 10vw, 8rem)",
		"outer": "var(--wp--custom--spacing--small, 1.25rem)"
	},

У цьому випадку ми бачимо два основні рядки для наступних змінних, які потрібно відредагувати:

--wp--custom--spacing--outer
--wp--custom--spacing--small

Змініть значення rem та vw на нуль (0) та натисніть кнопку “Оновити файл”.

"custom": {
	"spacing": {
		"small": "max(0rem, 0vw)",
		"medium": "clamp(2rem, 8vw, calc(4 * var(--wp--style--block-gap)))",
		"large": "clamp(4rem, 10vw, 8rem)",
		"outer": "var(--wp--custom--spacing--small, 0rem)"
	},

Значення “large” та “medium” залишаються старими та не змінюються.

Ви можете побачити повідомлення: File edited successfully, перезавантажте сторінку, якщо потрібно, очистіть кеш.

У цьому випадку вам потрібно налаштувати внутрішні пробіли, використовуючи значення Padding та Margin ваших блоків. Мені це вдалося, і тепер мій сайт відповідає 100% ширині мого телефону:

Примітка: Якщо ви використовуєте плагін кешування, такий як W3 Total Cache або подібний, вам може знадобитися очистити кеш після внесення змін. В іншому випадку оновлення, особливо макета або текстового контенту, можуть не відображатися одразу на інтерфейсі вашого сайту.

Якщо все виглядає правильно, ваш контент тепер має займати повну ширину екрана – 100% – як на мобільних, так і на настільних пристроях. Хоча це виглядає чисто та сучасно на мобільних пристроях, на великих екранах настільних комп’ютерів це може виглядати занадто широко. Для більш вишуканого макета рекомендується налаштувати ширину макета зі 100% до фіксованого максимального значення, наприклад, 1200 пікселів. Таким чином, ваш сайт матиме центрований та компактний вигляд на настільному комп’ютері, зберігаючи при цьому вигляд від краю до краю на мобільних пристроях, без бічних відступів або прогалин.

Висновок

Всього за допомогою двох простих змін у файлі theme.json ви можете легко видалити обмеження ширини в темі Twenty Twenty-Two та зробити контент повноширинним, що значно покращить візуальний досвід вашого сайту. Це особливо корисно для цільових сторінок, портфоліо або будь-якого візуально насиченого макета.

Якщо ви працюєте з FSE, не бійтеся редагувати theme.json — це потужний інструмент, який дає вам контроль над багатьма аспектами вашої теми без необхідності…

Wordpress