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

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

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

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

Висновок

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

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

У багатьох проєктах на WordPress постає потреба перекладати не лише стандартні елементи інтерфейсу (заголовки, меню, контент), а й власні, кастомні рядки, які розташовані, наприклад, у футері або хеадері. Плагін Polylang — один з найпопулярніших інструментів для реалізації мультимовності. Проте він не має вбудованої підтримки кастомних рядків, які б автоматично підлягали перекладу. У цій статті розглянемо, як вручну зареєструвати власні перекладні поля за допомогою Polylang.

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

• Простий інтерфейс для додавання перекладів.
• Підтримка багатьох мов.
• Інтеграція з популярними темами та плагінами.
• Підтримка мовного перемикача на сайті.

Обмеження Polylang:

• Кастомні рядки, додані напряму до шаблону, не перекладаються автоматично.
• Для перекладу таких рядків потрібно вручну зареєструвати їх у системі.

Реєстрація кастомних рядків для перекладу

Щоб зареєструвати декілька рядків, потрібно відредагувати файл functions.php. Я використовую тему twentytwentytwo, тому файл знаходиться там: /var/www/html/wp-content/themes/twentytwentytwo/functions.php

Я підключився до свого сервера та редагував файл за допомогою nano редактора:

sudo nano /var/www/html/wp-content/themes/twentytwentytwo/functions.php

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

// Add Polylang translate function
function register_custom_polylang_strings() {
    $strings = [
        'Custom 1:'     => 'Custom Labels',
        'Custom 2:'     => 'Custom Labels',
        'Custom 3:'     => 'Custom Labels',
        'Custom 4:'     => 'Custom Labels',
        'Custom 5:'     => 'Custom Labels'
    ];

    foreach ( $strings as $string => $group ) {
        pll_register_string( sanitize_title($string), $string, $group );
    }
}
add_action('init', 'register_custom_polylang_strings');

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

Створення шорткоду для перекладу

Простий спосіб отримати дані перекладу – створити короткий код перекладу. Додайте шорткод до того самого functions.php для відображення зареєстрованих рядків

function pll_translate_shortcode($atts) {
    $atts = shortcode_atts([
        'text' => '',
    ], $atts);
    return pll__($atts['text']);
}
add_shortcode('tr', 'pll_translate_shortcode');

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

У цьому випадку ми будемо використовувати такий короткий код:

[tr text="Custom 1:"]

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

Додавання перекладу

1. Перейдіть у Languages → Translations в адмін-панелі.
2. Знайдіть групу Custom Labels.
3. Знайдіть рядок (наприклад, custom-1:).
4. Введіть переклади:
   • Українською: Перемикач мов:
   • Англійською: Language switcher
5. Збережіть зміни.

Використання у шаблоні

Використовуйте шорткод у будь-якому місці теми, наприклад у футері:

[tr text="Custom 1:"]

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

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

Висновок

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

Перенесення веб-сайту WordPress на новий сервер – непросте завдання, особливо коли мінімізація часу простою має вирішальне значення. У цій статті я покажу вам, як я успішно переніс свій сайт WordPress з одного Raspberry Pi на інший, скоротивши час простою лише на кілька хвилин. Цей покроковий посібник охоплює все: від налаштування LAMP і Certbot до резервного копіювання файлів і заміни SD-карт.

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

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

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

Підготовка нової Raspberry Pi

За допомогою застосунка Raspberry Pi Imager встановити базову 64 бітну версію Raspberry Pi OS. Під час ініціалізації ввімкнути доступ по SSH та оновити систему в цілому:

sudo apt-get update
sudo apt-get upgrade

Під час оновлення користувач зіткнеться із зависанням процесу оновлення через наявність vnc сервера. Щоб продовжити оновлення без перешкод, необхідно видалити vnc сервер:

sudo apt-get remove realvnc-vnc-server

Після цього продовжити оновлення. Це особливість распбері пай 5. На распбері пай 4 з такої поведінки я не зустрічав.

Установка пакету сервісів LAMP

Після оновлення системи необхідно встановити ЛАМП стек

sudo apt install apache2 php libapache2-mod-php php-mysql mariadb-server

Також вордпрес іноді вимагає додаткові модулі

sudo apt install php-curl php-gd php-mbstring php-xml php-zip

Перевірка роботи Apache

sudo systemctl status apache2
● apache2.service - The Apache HTTP Server
     Loaded: loaded (/lib/systemd/system/apache2.service; enabled; preset: enabled)
     Active: active (running) since Wed 2025-04-09 11:37:31 EEST; 55s ago
       Docs: https://httpd.apache.org/docs/2.4/
   Main PID: 10645 (apache2)
      Tasks: 6 (limit: 9559)
        CPU: 51ms
     CGroup: /system.slice/apache2.service

Перевірка роботи Mariadbservice:

sudo systemctl status mariadb
● mariadb.service - MariaDB 10.11.11 database server
     Loaded: loaded (/lib/systemd/system/mariadb.service; enabled; preset: enabled)
     Active: active (running) since Wed 2025-04-09 11:37:28 EEST; 2min 6s ago
       Docs: man:mariadbd(8)
             https://mariadb.com/kb/en/library/systemd/
   Main PID: 9401 (mariadbd)
     Status: "Taking your SQL requests now..."
      Tasks: 9 (limit: 63092)
        CPU: 411ms
     CGroup: /system.slice/mariadb.service
             └─9401 /usr/sbin/mariadbd

Оскільки сервіси працюють – значить все зроблено правильно.

Установка Certbot та переніс сертифікатів

Certbot – це утиліта від letsencrypt за допомогою якої виписуються та оновлюються сертифікати. Щоб встановити сертбот, необхідно виконати наступну команду:

sudo apt install certbot python3-certbot-apache

Враховуючи факт, що в мене вже є раніше згенерований сертифікат, то його треба скопіювати на нову распбері пай. За допомогою команди рсінк по ссш копіюю весь вміст директорії /etc/letsencrypt/ із старої распбері пай на нову.

sudo rsync -avz RPIB/etc/letsencrypt/ [email protected]:/etc/letsencrypt/

В цій команді, RPIB – це директорія де сберігається весь бекап з распбері пай до її відновлення. Цей бекап зберігається на ПК, як вказано на схемі вище.

Бекап даних WordPress

Треба виконати дві прості дії:

• Копіювання фізичних файлів (медіа, плагіни, тощо)
• Дамп бази даних

Копіювання фізичних файлів

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

sudo rsync -avz /home/home/RPIB/var/www/html/ --rsync-path="sudo rsync" [email protected]:/var/www/html/

Дамп бази даних

На своєму Host Raspberry Pi я роблю дамп бази даних:

mysqldump -u username -ppassword wordpress_db > backup-9-4-2025.sql

Потім я переношу його до нового RPI за допомогою команди rsync

sudo rsync -avz backup-9-4-2025.sql [email protected]:/home/rpi/wrdprs-sql/

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

Налаштування бази даних

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

sudo mysql -u root -p

Користувача root не було створено з паролем, тому, коли буде запропоновано ввести пароль, просто натисніть enter, щоб увійти в базу даних. Наступним кроком є ​​створення бази даних і користувача. Надайте користувачеві привілеї для роботи з цією базою даних. Застосуйте зміни. Я надам шаблон команди, де вам потрібно буде замінити свої значення. Це створює базу даних і користувача з необхідними правами доступу.

CREATE USER 'wp_user'@'localhost' IDENTIFIED BY 'your_strong_password';
GRANT ALL PRIVILEGES ON wordpress_db.* TO 'wp_user'@'localhost';
FLUSH PRIVILEGES;
EXIT;

Наступним кроком є ​​відновлення бази даних у цю базу даних:

mysql -u wp_user -p wordpress_db < backup-9-4-2025.sql

Ніяких додаткових налаштувань бази даних не потрібно. Переходимо до налаштування веб-сервера.

Налаштування Apache сервера

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

• 000-default.conf
• 000-default-le-ssl.conf

Щоб оптимізувати процес я скопіював всю директорію:

sudo rsync -avz /home/home/RPIB/etc/apache2/ --rsync-path="sudo rsync" [email protected]:/etc/apache2/

Проте перезавантажувати сервер ще зарано, адже ми не підготували файли сертифікатів.

Ініціалізація сертифікатів

Сертифікати мають зберігатися за замовчуванням у каталозі /etc/letsencrypt/, тому вам потрібно створити ці каталоги або перемістити їх із каталогу резервного копіювання

sudo rsync -avz /home/home/RPIB/etc/letsencrypt/ --rsync-path="sudo rsync" [email protected]:/etc/letsencrypt/

Після цього ви можете перевірити, чи certbot приймає сертифікат за допомогою команди:

sudo certbot certificates

Ви отримаєте приблизну відповідь:

Certificate Name: ostrich.kyiv.ua
Serial Number: 60f74de1ba240148e78c1efa7e7cf846417
Key Type: ECDSA
Domains: ostrich.kyiv.ua
Expiry Date: 2025-06-22 08:12:46+00:00 (VALID: 73 days)
Certificate Path: /etc/letsencrypt/live/ostrich.kyiv.ua/fullchain.pem
Private Key Path: /etc/letsencrypt/live/ostrich.kyiv.ua/privkey.pem

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

sudo systemctl restart apache2

Вам також потрібно видалити файл index.html, що належить серверу Apache, з каталогу /var/www/html/, щоб індекс PHP оброблявся під час запуску сайту

Поміняти карти пам’яті

Оскільки карти пам’яті мають однакові налаштування, їх можна сміливо міняти місцями. Після перезавантаження Raspberry Pi я знову відвідав свій сайт, переконався, що все працює. У такому форматі простої були мінімальними!

Висновок

Цей метод міграції WordPress на новий Raspberry Pi показує, наскільки важливо:

• Майте надійну резервну стратегію
• Підготуйте середовище заздалегідь
• Використовуйте правильний підхід до передачі даних

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