Как создать динамические типографические стили в WordPress

Типографика — один из ключевых элементов дизайна сайта, который влияет на восприятие контента и удобство чтения. В WordPress часто возникает задача не просто задать статичные шрифты и размеры, а сделать их динамическими, чтобы они менялись в зависимости от условий: типа записи, устройства пользователя, времени суток и других параметров.

Почему важна динамическая типографика в WordPress

Статичные стили затрудняют адаптацию сайта под различные случаи. Например, заголовки на странице блога могут отличаться от заголовков на странице портфолио. Или на мобильных устройствах стоит использовать более крупный шрифт для удобства чтения. Динамические типографические стили позволяют:

• Автоматически подстраивать размеры и начертания шрифтов под контекст.
• Повышать удобство чтения и UX без ручного редактирования CSS.
• Оптимизировать загрузку стилей — подключать только нужные правила.

Основные подходы к созданию динамических типографических стилей

1. Использование пользовательских настроек в Customizer

WordPress Customizer позволяет добавлять настройки для шрифтов, которые пользователь или администратор сайта может менять в админке. Эти значения затем применяются к стилям сайта.

Пример добавления настройки размера заголовка:

function wpskins_customize_register($wp_customize) {
    $wp_customize->add_setting('wpskins_heading_font_size', [
        'default' => '24px',
        'sanitize_callback' => 'sanitize_text_field',
    ]);
    $wp_customize->add_control('wpskins_heading_font_size', [
        'label' => 'Размер шрифта заголовков',
        'section' => 'typography',
        'type' => 'text',
    ]);
}
add_action('customize_register', 'wpskins_customize_register');

Далее эту настройку можно вывести в <style> или подключить через wp_add_inline_style.

2. Генерация CSS через PHP с учётом условий

Часто динамические стили зависят от условий: тип записи, категория, устройство и т.п. Чтобы их реализовать, можно в functions.php подключать inline CSS с учётом логики.

function wpskins_dynamic_typography_styles() {
    $font_size = '20px';
    if (is_singular('portfolio')) {
        $font_size = '28px';
    } elseif (wp_is_mobile()) {
        $font_size = '22px';
    }
    $custom_css = "h1, h2, h3 { font-size: {$font_size}; }";
    wp_add_inline_style('theme-style-handle', $custom_css);
}
add_action('wp_enqueue_scripts', 'wpskins_dynamic_typography_styles', 20);

Таким образом можно создавать разные размеры шрифтов без лишних CSS-файлов.

3. Использование CSS-переменных в сочетании с PHP

Современные темы могут использовать CSS-переменные для типографики, а PHP заполняет их динамическими значениями.

function wpskins_add_dynamic_css_vars() {
    $font_size = get_theme_mod('wpskins_heading_font_size', '24px');
    $custom_css = ":root { --wpskins-heading-font-size: {$font_size}; }";
    wp_add_inline_style('theme-style-handle', $custom_css);
}
add_action('wp_enqueue_scripts', 'wpskins_add_dynamic_css_vars');

В CSS затем можно использовать font-size: var(--wpskins-heading-font-size); для заголовков.

Примеры плагинов для управления типографикой в WordPress

Для простого управления шрифтами и их динамикой можно использовать следующие плагины:

• Easy Google Fonts — позволяет настраивать шрифты через кастомайзер с живым предпросмотром.
• WP Google Fonts — подключает Google Fonts и задаёт стили через панель администратора.
• Clearfy Pro — среди множества оптимизаций есть опции для управления типографикой и отключения лишних шрифтов.

Как оптимизировать загрузку шрифтов и стилей

При динамических типографических стилях важно не допустить замедления загрузки сайта. Рекомендации:

• Подключайте только нужные шрифты, используйте subset и display=swap.
• Кешируйте сгенерированные inline-стили и минимизируйте их.
• Используйте wp_add_inline_style после загрузки основного CSS.
• Если используете плагин Clearfy Pro, активируйте оптимизацию загрузки шрифтов.

Пример кода: динамическое изменение шрифта заголовка по времени суток

Интересный пример — менять размер заголовка в зависимости от времени дня, чтобы улучшить восприятие ночью.

function wpskins_dynamic_font_size_by_time() {
    $hour = (int) current_time('H');
    if ($hour >= 22 || $hour < 6) {
        $font_size = '30px'; // ночной увеличенный размер
    } else {
        $font_size = '24px'; // дневной стандарт
    }
    $custom_css = "h1 { font-size: {$font_size}; color: #333; }";
    wp_add_inline_style('theme-style-handle', $custom_css);
}
add_action('wp_enqueue_scripts', 'wpskins_dynamic_font_size_by_time', 20);

Такой подход легко расширяется и позволяет создавать уникальный UX.

Выводы и лучшие практики

— Используйте настройки в Customizer для удобного изменения типографики без кода.
— Генерируйте CSS динамически, учитывая тип контента и устройство.
— Применяйте CSS-переменные для гибкости и простоты поддержки.
— Оптимизируйте загрузку шрифтов, избегайте лишних подключений.
— Рассмотрите плагины типа Clearfy Pro для комплексной оптимизации.

Подробнее о Clearfy Pro и других плагинах можно узнать на официальном сайте WPShop.