Расширение theme.json на пользовательские типы записей и вывод плагинов: практическое руководство

Краткое содержание

Многие разработчики WordPress создают пользовательские типы записей или плагины, которые выводят контент (например, отзывы, портфолио). Однако theme.json — центральная конфигурация глобальных стилей — часто игнорирует эти пользовательские элементы по умолчанию, что приводит к разрозненному дизайну. В этой статье вы узнаете, как зарегистрировать пользовательские типы записей для наследования стилей theme.json, переопределить настройки для конкретных блоков и связать вывод плагина с основными токенами дизайна. Вы получите пошаговые инструкции, реальные примеры, например стилизацию CPT «Участник команды», и предостережения о производительности и конфликтах со сторонними плагинами. К концу вы сможете гарантировать, что любой пользовательский контент соответствует определенной в редакторе системе дизайна вашего сайта.

Вы когда-нибудь создавали пользовательский тип записей или интегрировали сторонний плагин, только чтобы обнаружить, что его вывод полностью игнорирует прекрасную систему дизайна, которую вы кропотливо настроили в 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. Например, вот CPT «Участник команды»:

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;"
      }
    }
  }
}

Это применит светлый фон и отступы к области контента всех записей, включая ваш CPT «Участник команды». Вы также можете определить вариации для конкретных блоков внутри 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 к единообразию.