Від нуля до одного: крок за кроком навчаємо вас основним навичкам розробки сучасних тем для WordPress.

Основні концепції розробки сучасних тем для WordPress

Архітектура сучасних тем для WordPress суттєво відрізняється від традиційних підходів. Основними змінами є повне впровадження моделей блокових тем (Block Themes) та можливостей цілостного редагування веб-сайту (Full Site Editing, FSE). Це означає, що зовнішній вигляд та структура теми – від заголовкового та футерного блоків до самого контенту статей – можна створювати та змінювати за допомогою редактора Gutenberg, використовуючи спеціальні “блоки”, без необхідності написання складних PHP-шаблонів.

Структура основних файлів у проектах з сучасним дизайном значно спростилась. Найважливішим з цих файлів є шаблонний файл.theme.jsonВоно визначає стиль теми, палітру кольорів, верстку та інші глобальні налаштування. Ще одним надзвичайно важливим файлом є…index.htmlВоно замінило традиційні методи/рішення.index.phpЯк за замовчуванням, для створення каркаса сторінки використовуються статичні блоки HTML-коду, які можуть бути оброблені редактором.style.cssФайл все ще існує та використовується переважно для визначення інформації про тему сторінки, проте більшість правил стилізації (CSS-стилів) було перенесено в інші файли.theme.jsonАбо керується редактором.

Для підтримки зворотної сумісності WordPress перевіряє, чи існує файл у кореневому каталозі теми…block-templates或templatesПапки. Ці папки призначені для зберігання файлів HTML-шаблонів, створених на основі блоків.single.html或page.htmlВони будуть використовуватися перед PHP-шаблонними файлами. Крім того, спосіб обробки стилів та фронтенд-ресурсів, що надходять з теми, залежить від…wp_enqueue_style和wp_enqueue_scriptФункції зазвичай знаходяться у головному файлі програми.functions.phpПроцес реєстрації та очікування відбувається там.

Рекомендуємо до прочитання. Розробка тем для WordPress від початківців до майстрів: покрокове посібник зі створення власних веб-сайтів。

Розуміння цієї зміни в підходах до розробки – від створення статичних PHP-шаблонів до використання JSON та блок-маркерів для визначення стилів та структури – є першим кроком на шляху до опанування сучасних методів розробки тем (templates).

UltaHost – хостинг для сайтів, побудованих на платформі WordPress

Гарантія повернення грошей протягом 30 днів, необмежена пропускна здатність мережі та доступ до баз даних, безкоштовний захист від DDoS-атак; знижка 50% при покупці на термін 3 роки (варіанти об’ємів трафіку: 4 ТБ/5

сторінка доступу

Створення та налаштування основних файлів теми

Щоб створити сучасний тематичний дизайн для WordPress, спочатку потрібно…wp-content/themesСтворіть нову папку для тем у каталозі. Це стосується навіть блок-тем.style.cssФайл все ще є обов’язковим “документом ідентифікації”, і блок коментарів на його початку має містити певну інформацію.

/*
Theme Name: 我的现代主题
Theme URI: https://example.com/my-theme
Author: Your Name
Author URI: https://example.com
Description: 一个使用全站编辑的现代WordPress主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-modern-theme
*/

Невдовзі після цього вам потрібно створити “мозок” для сучасного дизайну (тобто систему, яка буде виконувати певні функції, пов’язані з обробкою даних чи керуванням процесами).theme.jsonЦей JSON-файл знаходиться у кореневому каталозі теми та використовується для централізованого керування глобальними стилями та налаштуваннями теми. За допомогою цього файлу можна визначити параметри системи верстки (наприклад, розмір шрифтів, сімейства шрифтів), палітри кольорів, стандартні стилі блоків тощо. Плагіни та підтеми також можуть надавати додаткові налаштування, що дозволяє індивідуально налаштовувати вигляд сайту. Це базtheme.jsonСтруктура така:

{
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        { "name": "黑色", "slug": "black", "color": "#000000" },
        { "name": "白色", "slug": "white", "color": "#ffffff" }
      ]
    },
    "typography": {
      "fontSizes": [
        { "name": "小", "slug": "small", "size": "14px" },
        { "name": "中", "slug": "medium", "size": "20px" }
      ]
    }
  },
  "styles": {
    "color": {
      "background": "white",
      "text": "black"
    },
    "typography": {
      "fontSize": "var(--wp--preset--font-size--medium)"
    }
  },
  "customTemplates": [
    {
      "name": "宽幅页面",
      "title": "宽幅页面",
      "postTypes": [ "page" ]
    }
  ]
}

Головна шаблонна сторінка темиindex.htmlБула визначена стандартна структура сторінки. Вона складається виключно з блок-позначок, оточених HTML-коментарями, які розпізнаються редактором. Наприклад:

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
    <!-- wp:post-content {"layout":{"type":"constrained"}} /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

Така структура чітко розділяє верхню частину сторінки (заголовок), основний вміст та нижню частину (футер), і це забезпечує зручність користування сайтом.wp:post-contentКонтент статей завантажується динамічно за блоками. Наостанок необхідно створити каталог із шаблонами компонентів (Template Parts) у кореневому каталозі теми.partsІ розмістити їх усередині.header.html和footer.htmlФайли з компонентами тощо.

Рекомендуємо до прочитання. Популярний посібник для початківців 2026 року: як створити свій перший тематичний дизайн для WordPress з нуля。

Створення сторінок за допомогою шаблонів та компонентів шаблонів

У блокових темах структура оформлення сторінок переважно формується за допомогою шаблонів (Templates) та компонентів шаблонів (Template Parts). Шаблони використовуються для визначення загальної структури конкретних типів сторінок (наприклад, окремих статей чи архівних сторінок), а компоненти шаблонів – це повторно використовувані модулі, такі як заголовки та футери.

Зазвичай файли-шаблони зберігаються у відповідних папках теми (theme folder).templatesУ папці. WordPress автоматично підбирає відповідні шаблонні файли для різних типів запитів. Наприклад,single.htmlВикористовується для відображення окремої статті.page.htmlВикористовується для статичних сторінок.home.html或index.htmlВикористовується для головної сторінки блогу. Ви можете…theme.json的customTemplatesДеякі заяви включають в себе налаштовані шаблони, які користувачі можуть вибрати у редакторі сторінок.

Компоненти шаблонів зберігаються у…partsУ цьому папці значно підвищено ступінь повторного використання коду та зручність його обслуговування. Було створено файл з заголовками сторінок (header file).header.htmlВерхню частину сайту можна створити за допомогою блоку з заголовком сайту, блоку навігації тощо. Також необхідно створити файл для відображення футера (нижньої частини сайту).footer.htmlТут можна розмістити інформацію про авторські права та зону для додаткових інструментів (маленьких програм чи функцій).

hosting.com Віртуальний хостинг

Висока продуктивність завдяки процесорам AMD EPYC, SSD-накопичувачам NVMe і технології LiteSpeed, цілодобова експертна підтримка, розширені заходи безпеки, включаючи SSL, грубу силу, захист від шкідливих програм і DDoS, економія до 73%.

сторінка доступу

Типовий…header.htmlМожливий варіант вигляду:

<!-- wp:group {"tagName":"header","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<header class="wp-block-group">
    <!-- wp:site-title /-->
    <!-- wp:navigation {"ref":4} /-->
</header>
<!-- /wp:group -->

У цьому прикладі,wp:navigationБлоки передаються через свої… (The blocks are transmitted through their…)refАтрибут використовує навігаційний меню, створене та збережене у розділі “Вигляд” → “Редактор” (його ID дорівнює 4). Це демонструє перевагу розділення процесу редагування контенту від структури сайту. Шляхом використання таких компонентів у основному шаблоні…Ви можете вставити їх на сторінку просто так.

Для більш складних макетів можна використовувати різноманітні підходи та інструменти.wp:group、wp:columns、wp:queryВикористовуйте блоки для створення рядків, стовпців та циклічного контенту. Наприклад,wp:queryБлоки можуть динамічно відображати найновіші статті – це еквівалентно головному циклу у традиційних тематичних системах – але зараз усе налаштовується повністю за допомогою візуального редактора.

Рекомендуємо до прочитання. Від нуля до професіонала: повне керівництво та практичний посібник із розробки тем для WordPress.。

Додавання функцій та стилів за допомогою файлів функцій

Незважаючи на те, що блокові теми сильно залежать від…theme.jsonІ HTML-шаблони, але…functions.phpФайли й надалі є основою функції розширення тем. Це PHP-файли, які не повертають жодних значень та використовуються для додавання нових функцій, реєстрації скриптів зі стилізацією, визначення підтримки тем тощо.

Однією з базових операцій є реєстрація та внесення до черги таблиць стилів та скриптів для теми. Навіть якщо стильові елементи переважно…theme.jsonМенеджере, вам, можливо, все ще знадобиться додатковий користувацький CSS (Custom CSS).

Міжсерверний віртуальний хостинг

Віртуальний хостинг $2.50 USD на місяць, перший місяць $0.1 USD за промокодом tryinterserver, 461 скрипт хмарних додатків, встановлення в один клік.

сторінка доступу

function my_modern_theme_setup() {
    // 添加对特定功能的支持，例如自定义标志
    add_theme_support('custom-logo');
    // 通过区块编辑器添加主题样式
    add_theme_support('wp-block-styles');
    // 添加对全站编辑器的支持
    add_theme_support('editor-styles');
}
add_action('after_setup_theme', 'my_modern_theme_setup');

function my_modern_theme_scripts() {
    // 排队主题的主样式表
    wp_enqueue_style(
        'my-modern-theme-style',
        get_stylesheet_uri(),
        array(),
        wp_get_theme()->get('Version')
    );
    // 排队编辑器样式
    add_editor_style('style-editor.css');
}
add_action('wp_enqueue_scripts', 'my_modern_theme_scripts');

functions.phpЦе також чудове місце для додавання власних функціональних можливостей. Наприклад, ви можете використовувати…register_block_styleФункція дозволяє зареєструвати для існуючих основних елементів (наприклад, абзаців) власну візуальну версію, яка з’являється у панелі “Стили” редактора для вибору користувачем.

// 为段落块注册一个“特别提示”样式
register_block_style(
    'core/paragraph',
    array(
        'name'         => 'notice',
        'label'        => __( '特别提示', 'my-modern-theme' ),
        'inline_style' => '.is-style-notice { padding: 1em; border-left: 4px solid #00a0d2; background-color: #f0f8ff; }',
    )
);

Крім того, ви також можете використовувати хаки (hookи), наприклад…wp_head、wp_footerВставляйте власний код або використовуйте відповідні інструменти для цього.add_filterЗмініть за замовчуванням поведінку запитів, вихідні дані тощо. Для складних вимог щодо налаштувань можливо, що створення невеликого плагіна буде більш модульним рішенням.

Тема тестування та налагодження

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

По-друге, необхідно провести глибокі тести з використанням редактора Gutenberg. Створіть нові сторінки та статті, спробуйте скласти складні макети за допомогою різних блоків, перевірте, чи коректно функціонують панелі інструментів та налаштувань цих блоків, а також можливості кастомізації їхнього вигляду (наприклад, шляхtheme.jsonЧи правильно застосовані визначені палітри кольорів чи розміри шрифтів до відповідних блоків контенту? Особливо варто перевірити роботу редактора для всього сайту (меню “Вигляд” -> “Редактор”), спробувати змінити зміст заголовків, футерів, шаблонів головної сторінки тощо, щоб переконатися, що після збереження з

Діагностика та налагодження є ключовими етапами сучасного розробництва. Відкрийте інструменти розробника у вашому браузері (F12) та перевірте, чи немає помилок у JavaScript чи конфліктів у CSS.wp-config.phpНалаштування в Центрі адміністрування Exchangedefine('WP_DEBUG', true);На сторінці можна відображати попередження та помилки PHP, що допоможе швидко виявити проблеми в коді. Крім того, переконайтеся, що ваш тематичний дизайн відповідає стандартам кодування WordPress, та перевірте, чи немає помилок у HTML-структурі на валідаторі W3C у консолі.

Наостанок, проведіть тестування на сумісність між різними браузерами (Chrome, Firefox, Safari, Edge) та пристроями (настільними комп’ютерами, планшетами, смартфонами), щоб переконатися, що всі користувачі отримують однаковий досвід користування продуктом.

підсумок

Розробка сучасних тем для WordPress є новим підходом до створення веб-сайтів – вона передбачає перехід від написання процедурних PHP-шаблонів до використання більш гнучких та зручних у користуванні інструментів та підходів.theme.jsonОсновою цього підходу до розробки є використання блок-тегів та можливостей повноцінного редагування всього веб-сайту. Розробники повинні досконало опанувати ці інструменти.theme.jsonВикористовуйте налаштування для визначення глобального стилю, шаблони HTML-блоків для створення структури сторінок, а також…functions.phpБуло виконано покращення функціоналу. Цей підхід значно знизив поріг складності при створенні власних версій дизайну, надавши авторам контенту велику свободу у формуванні вигляду сайтів, але водночас вимагає від розробників глибокого розуміння системи блокового редагування. Дотримуючись наведеного вище курсу навчання, ви зможете створювати гнучкі, потужні та сучасні теми для WordPress.

Часті запитання

Чи потрібні знання PHP для роботи з темою розробки ###?
Так, це все ще необхідно. Хоча основну структуру сторінки визначають HTML-шаблони,functions.phpФайли залишаються незамінними для додавання функцій тем, реєстрації скриптів стилів, а також для глибокої налаштування системи за допомогою хуків та фільтрів. Крім того, знання PHP є критично важливими під час створення динамічних компонентів шаблонів на основі користувацьких запитів чи обробки складної бізнес-логіки.

Чи можуть блокові теми та традиційні теми існувати разом?

Так. WordPress розумно визначає тип теми. Якщо ваш кореневий каталог теми містить…theme.jsonФайли та…templates/partsБлок-шаблони, розташовані у папці, WordPress визнає їх як блок-теми та увімкне функцію редагування на всьому сайті. Проте, навіть у разі наявності цих файлів, система все одно зберігає традиційну систему PHP-шаблонів як резервний варіант. Якщо блок-шаблон, відповідний певному запиту, відсутній, система автоматично переходить на використання відповідного PHP-шаблону.single.php）。

Як додати власний CSS-код до теми блоку?

Існує трьох основних способів. Найбільш рекомендованим є спосіб, який передбачає…theme.jsonДля файлівstylesДеякі з доданих елементів впливають на стиль вигляду всього сайту (глобально) або лише на певні блоки контенту. Крім того, ці зміни можна налаштувати в налаштуваннях теми (theme settings).style.cssУ файлі можна написати додаткові правила стилізації. Для більш динамічних елементів або стилізації конкретних сторінок також можна використовувати відповідні методи.functions.phpВикористовуйте його у Китаї.wp_add_inline_styleДодайте вбудовані функції або безпосередньо зареєструйте власні стилі для блоків.

Чи є ризик для існуючого веб-сайту під час використання режиму повного редагування?

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