Вступ

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

У цій статті я покажу вам просте виправлення за допомогою файлу 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 пікселів. Таким чином, ваш сайт матиме центрований та компактний вигляд на настільному комп’ютері, зберігаючи при цьому вигляд від краю до краю на мобільних пристроях, без бічних відступів або прогалин.

Рекомендовані налаштування остаточного макета

• Налаштування макету: значення Content width та Wide width можна змінити на 1200 пікселів.
• У кореневому блоці Query Loop має бути ввімкнено перемикач layout (у розділі «layout»), але залиште конкретні значення ширини порожніми – це автоматично успадкує глобальну ширину макета (у цьому випадку 1200 пікселів).
• У цьому прикладі для всіх інших внутрішніх блоків перемикач layout має бути вимкнений, щоб вони відповідали макету батьківського блоку.

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

Висновок

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

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