Розширення theme.json для користувацьких типів записів та виводу плагінів: Практичний посібник

Підсумок

Багато розробників WordPress створюють користувацькі типи записів або плагіни, які виводять вміст (наприклад, відгуки, портфоліо). Однак theme.json — центральна конфігурація глобальних стилів — часто ігнорує ці користувацькі елементи за замовчуванням, що призводить до неузгодженого дизайну. Ця стаття проведе вас через реєстрацію користувацьких типів записів для успадкування стилів theme.json, перевизначення налаштувань для конкретних блоків та поєднання виводу плагінів з основними токенами дизайну. Ви отримаєте покрокові інструкції, реальні приклади, як стилізація типу запису 'Член команди', та застереження щодо продуктивності та конфліктів зі сторонніми плагінами. Наприкінці ви зможете гарантувати, що будь-який користувацький вміст відповідає системі дизайну, визначеній редактором вашого сайту.

Чи створювали ви коли-небудь користувацький тип записів або інтегрували сторонній плагін, лише щоб виявити, що його вивід повністю ігнорує прекрасну систему дизайну, яку ви ретельно налаштували в theme.json? Ви не самотні. За замовчуванням theme.json застосовується лише до основних блоків WordPress і зареєстрованих стилів блоків, залишаючи користувацькі типи записів та вміст, згенерований плагінами, на власний розсуд. Це зазвичай призводить до вбудованих CSS, дублювання шрифтів або невідповідності кольорової палітри, що псує користувацький досвід. Але є кращий спосіб: ви можете розширити theme.json, щоб охопити ці користувацькі елементи, забезпечуючи узгоджену, підтримувану систему дизайну на всьому сайті. У цьому посібнику ми розглянемо чотири практичні кроки для досягнення цього, з прикладами коду та реальними застереженнями.

Розуміння області застосування theme.json

Перш ніж заглибитися, важливо зрозуміти, що theme.json — це концепція блокової теми. Вона визначає глобальні стилі, налаштування (наприклад, колірні палітри та розміри шрифтів) і стилі для конкретних блоків у редакторі блоків та на фронтенді. Однак її сфера дії обмежена: вона контролює лише блоки, які явно заявляють про підтримку властивостей theme.json через register_block_type або стару add_theme_support. Користувацькі типи записів, створені за допомогою register_post_type, не успадковують ці стилі автоматично, якщо вони не побудовані з блоків або явно не стилізовані.

Крок 1: Реєстрація користувацьких типів записів з підтримкою редактора блоків

Перший крок — переконатися, що ваш користувацький тип записів використовує редактор блоків. Під час виклику register_post_type встановіть 'show_in_rest' => true і додайте 'editor' до масиву supports. Це вмикає редактор блоків для цього типу записів, дозволяючи авторам використовувати стилі рівня блоків із theme.json. Наприклад, ось тип записів 'Член команди':

function create_team_member_cpt() {
    $args = array(
        'public' => true,
        'show_in_rest' => true,
        'supports' => array( 'title', 'editor', 'thumbnail', 'custom-fields' ),
        'show_in_menu' => true,
        'labels' => array(
            'name' => 'Team Members',
            'singular_name' => 'Team Member',
        ),
        'rewrite' => array( 'slug' => 'team' ),
    );
    register_post_type( 'team_member', $args );
}
add_action( 'init', 'create_team_member_cpt' );

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

Крок 2: Додавання користувацьких стилів блоків через theme.json

Іноді ви хочете застосувати певні стилі до всіх екземплярів вмісту вашого користувацького типу записів — наприклад, надати всьому запису фоновий колір або спеціальні відступи. Ви можете націлити core/post-content або обернути свій вміст у користувацький блок групи та стилізувати його через theme.json. Додайте наступне до вашого файлу theme.json під об'єктом styles:

{
  "styles": {
    "blocks": {
      "core/post-content": {
        "css": "background-color: var(--wp--preset--color--light); padding: 2rem;"
      }
    }
  }
}

Це застосує світлий фон і відступи до області вмісту всіх записів, включаючи ваш тип записів 'Член команди'. Ви також можете визначити варіації для конкретних блоків всередині settings.blocks, щоб надати варіанти стилів у редакторі.

Крок 3: Використання користувацьких властивостей theme.json для виводу плагінів

Плагіни часто виводять вміст через шорткоди, віджети або користувацькі блоки. Щоб стилізувати їх узгоджено, використовуйте CSS-властивості, які генерує theme.json. Наприклад, якщо ваша тема визначає основний колір як --wp--preset--color--primary, ви можете використовувати його в CSS вашого плагіна:

.my-plugin-button {
    background-color: var(--wp--preset--color--primary);
    font-size: var(--wp--preset--font-size--medium);
}

Це гарантує, що коли адміністратор сайту змінить палітру кольорів у theme.json, кнопка вашого плагіна оновиться автоматично. Щоб зробити це надійним, завжди використовуйте попередньо встановлені CSS-змінні замість жорстко закодованих значень. Крім того, якщо ваш плагін реєструє власні блоки, ви можете успадкувати налаштування theme.json за допомогою useSetting у JavaScript або передачі $attributes у PHP-рендерингу, як описано в Освоєння динамічних блоків WordPress.

Крок 4: Робота з динамічними блоками

Для користувацьких блоків, які виводять динамічний вміст (наприклад, слайдер відгуків), потрібно зареєструвати блок з підтримкою редактора блоків і явно прив'язати його до theme.json. У PHP використовуйте register_block_type з $args, які включають 'render_callback', і переконайтеся, що файл block.json вашого блоку встановлює 'supports' => array( 'color' => true, 'typography' => true ). Потім у вашому зворотному виклику рендерингу ви можете отримати доступ до глобальних стилів через wp_get_global_styles() і застосувати їх. Наприклад:

function render_testimonial_block( $attributes, $content ) {
    $styles = wp_get_global_styles();
    $color = $styles['elements']['link']['color']['text'] ?? '#000';
    return '<div style="color: ' . esc_attr( $color ) . ';">' . $content . '</div>';
}

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

Застереження

Хоча розширення theme.json є потужним, зверніть увагу на такі підводні камені:

1. Продуктивність: Додавання занадто великої кількості користувацьких стилів у theme.json може роздути файл і збільшити час розбору CSS. Дотримуйтеся глобальних налаштувань і використовуйте стилі для конкретних блоків помірно.
2. Конфлікти плагінів: Деякі плагіни скидають або перевизначають налаштування theme.json. Завжди тестуйте з мінімальним набором плагінів і розгляньте можливість підключення до after_setup_theme для повторного застосування ваших налаштувань.
3. Класичні теми: Якщо ваша тема не використовує редактор блоків (тобто це класична тема), theme.json має обмежений ефект. Розгляньте можливість переходу на блокову тему або використання функції wp_enqueue_global_styles для завантаження стилів.
4. Кеш браузера: Зміни в theme.json можуть не з'явитися негайно через кешування. Очистіть кеш браузера та використовуйте версіювання для вашої таблиці стилів.

Висновок

Тепер у вас є чіткий план, як змусити користувацькі типи записів і виводи плагінів добре працювати з вашою системою дизайну theme.json. Ключові моменти: зареєструйте свій CPT з підтримкою редактора блоків, визначте конкретні стилі для блоку вмісту запису, використовуйте CSS-властивості у виводі плагінів та зареєструйте свої користувацькі блоки з належною інтеграцією theme.json. Цей підхід усуває неузгодженість, зменшує обслуговування та дає адміністраторам сайту можливість контролювати зовнішній вигляд з єдиного джерела істини. Почніть впроваджувати ці кроки сьогодні, щоб забезпечити цілісність ваших проектів WordPress.