Как программно изменять стили для разных типов записей в WordPress

Автор: Георгий Захаров | Опубликовано: 03.02.2026

В WordPress часто возникает задача задать разные стили для разных типов записей (post types). Например, если у вас есть стандартные записи блога, а также кастомные типы записей, такие как проекты, отзывы или портфолио, вы можете захотеть, чтобы каждый тип выглядел по-своему. В этой статье мы подробно разберём, как программно добавлять уникальные CSS-стили для каждого типа записи, используя правильные хуки и методы.

Почему важно разделять стили для разных типов записей

Разделение стилей по типам записей позволяет:

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

Например, у вас есть тип записи portfolio, и вы хотите, чтобы он отображался с другой цветовой схемой и шрифтом по сравнению с обычными постами. Просто добавьте нужный CSS и подключите его только для этого типа.

Добавление стилей через функцию wp_enqueue_scripts с проверкой типа записи

Самый правильный способ добавить стили в WordPress – использовать хук wp_enqueue_scripts. Для этого мы можем проверить глобальный объект $post или использовать функцию is_singular() с указанием типа записи.

Пример кода для подключения стилей по типу записи

function wpskins_enqueue_post_type_styles() {
    if ( is_singular('portfolio') ) {
        wp_enqueue_style('wpskins-portfolio-style', get_template_directory_uri() . '/css/portfolio.css', array(), '1.0');
    } elseif ( is_singular('post') ) {
        wp_enqueue_style('wpskins-post-style', get_template_directory_uri() . '/css/post.css', array(), '1.0');
    }
}
add_action('wp_enqueue_scripts', 'wpskins_enqueue_post_type_styles');

В этом примере для страниц с типом записи portfolio загружается файл portfolio.css, а для стандартных записей — post.css. Такой подход гарантирует, что стили не будут загружаться на всех страницах без необходимости.

Динамическое добавление CSS без отдельных файлов

Если стили небольшие и нецелесообразно создавать отдельный CSS-файл, можно добавить CSS прямо в <head> страницы через хук wp_head.

Пример динамического добавления CSS в зависимости от типа записи

function wpskins_add_inline_styles_post_type() {
    if ( is_singular('portfolio') ) {
        echo '<style>
            .entry-title { color: #2a9d8f; font-weight: bold; }
            .portfolio-item { border: 2px solid #264653; padding: 15px; }
        </style>';
    } elseif ( is_singular('post') ) {
        echo '<style>
            .entry-title { color: #e76f51; }
            .post-content { font-size: 18px; line-height: 1.6; }
        </style>';
    }
}
add_action('wp_head', 'wpskins_add_inline_styles_post_type');

Таким образом вы можете быстро и гибко менять оформление без создания лишних файлов. Но при большом объёме стилей лучше использовать wp_enqueue_style с файлами.

Добавление CSS-классов к body для стилизации через основной файл стилей

Ещё один распространённый подход — добавить уникальные CSS-классы к тегу <body> в зависимости от типа записи. Это позволяет в одном файле CSS прописывать стили для разных случаев.

Как добавить класс к body по типу записи

function wpskins_add_body_class_by_post_type($classes) {
    if ( is_singular() ) {
        global $post;
        if ( $post ) {
            $classes[] = 'post-type-' . $post->post_type;
        }
    }
    return $classes;
}
add_filter('body_class', 'wpskins_add_body_class_by_post_type');

Теперь в вашем основном CSS-файле можно писать стилей так:

.post-type-portfolio .entry-title {
    color: #1d3557;
    font-family: 'Arial Black', sans-serif;
}
.post-type-post .entry-title {
    color: #e63946;
    font-family: Georgia, serif;
}

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

Использование плагина Clearfy Pro для управления загрузкой стилей

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

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

Полезные советы и рекомендации

Всегда используйте правильные хуки: wp_enqueue_scripts для подключения файлов стилей и скриптов, wp_head для вывода инлайн-стилей.
Для кастомных типов записей лучше создавать отдельные CSS-файлы, чтобы не перегружать основной.
При добавлении классов в body_class используйте уникальные, понятные имена для удобства поддержки кода.
Тестируйте стили на разных устройствах и браузерах, особенно если меняете типографику и цвета.
Используйте инструменты оптимизации, например, Clearfy Pro, чтобы отключать лишние стили и скрипты и улучшать производительность.

Вывод

Программное добавление стилей для разных типов записей в WordPress — мощный инструмент, который позволяет создавать уникальные и производительные сайты. Используйте wp_enqueue_scripts для подключения файлов, wp_head для инлайн-стилей и body_class для добавления CSS-классов. А плагин Clearfy Pro поможет оптимизировать загрузку стилей и скриптов.