Как добавить CSS класс к постам в WordPress по условию

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

Зачем добавлять CSS классы к постам по условию

Добавление CSS классов по условию позволяет:

• Изменять внешний вид постов в зависимости от их категории, меток, автора или других параметров.
• Создавать динамические стили без необходимости писать сложные селекторы CSS.
• Упрощать поддержку и масштабирование кастомных стилей на сайте.
• Реализовывать визуальные эффекты и анимации, применяемые только к определённым записям.

Например, можно выделить красным цветом все посты из категории «Новости», или добавить иконку рядом с постами, которые имеют тег «Важное».

Как добавить CSS класс к постам с помощью фильтра post_class

Самый правильный и гибкий способ — использовать WordPress фильтр post_class. Он позволяет добавить свои классы к массиву классов, которые WordPress уже генерирует для поста.

Рассмотрим пример функции, которая добавляет класс wpboard-featured к постам из категории с ID 7, а также класс wpboard-tagged если у поста есть тег с названием «важно».

function wpboard_add_custom_post_class( $classes ) {
    if ( is_singular() || is_home() || is_archive() ) {
        global $post;
        if ( has_category( 7, $post ) ) {
            $classes[] = 'wpboard-featured';
        }
        if ( has_tag( 'важно', $post ) ) {
            $classes[] = 'wpboard-tagged';
        }
    }
    return $classes;
}
add_filter( 'post_class', 'wpboard_add_custom_post_class' );

Эта функция проверяет, что текущий пост принадлежит категории с ID 7 или имеет тег «важно», и добавляет соответствующие классы к массиву. В результате в HTML разметке поста появятся эти классы, которые можно использовать в CSS.

Применение условных тегов для расширенной настройки классов

Фильтр post_class можно комбинировать с условными тегами WordPress, чтобы добавлять классы только на определённых страницах или типах записей. Например, добавить класс только для записей в блоге (главная страница), но не на страницах архивов.

function wpboard_conditional_post_class( $classes ) {
    if ( is_home() && in_category( 'новости' ) ) {
        $classes[] = 'wpboard-news-home';
    }
    if ( is_singular( 'product' ) ) {
        $classes[] = 'wpboard-product-single';
    }
    return $classes;
}
add_filter( 'post_class', 'wpboard_conditional_post_class' );

Здесь мы добавили класс wpboard-news-home только для постов категории «новости» на главной странице блога и класс wpboard-product-single для одиночных страниц типа записи «product».

Добавление классов прямо в шаблоне WordPress

Кроме использования фильтра, можно добавить классы вручную в шаблонах темы, например в файле content.php или single.php.

Пример добавления класса с помощью PHP:

<article id="post-<?php the_ID(); ?>" class="<?php post_class(); ?> <?php if ( has_category( 10 ) ) echo 'wpboard-special-category'; ?>">
    <?php the_title( '<h2>', '</h2>' ); ?>
    <?php the_content(); ?>
</article>

Этот код добавляет к тегу article стандартные классы WordPress, а также дополнительный класс, если пост входит в категорию с ID 10.

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

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

• Post Class Conditions — позволяет добавлять классы к постам по разным условиям через интерфейс.
• Clearfy Pro — комплексный плагин для оптимизации и кастомизации WordPress, включая расширенные возможности по работе с классами.

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

Примеры CSS для новых классов

После того, как классы добавлены к постам, вы можете настроить стили. Вот пример для класса wpboard-featured:

.wpboard-featured {
    border: 2px solid #f00;
    background-color: #ffe6e6;
    padding: 15px;
    box-shadow: 0 0 10px rgba(255,0,0,0.3);
}

Такой стиль визуально выделит посты с этим классом на странице.

Выводы и рекомендации

Добавление CSS классов к постам в WordPress по условию — простой и мощный способ контролировать визуальное оформление и поведение контента. Рекомендуется использовать фильтр post_class для максимальной гибкости и совместимости с темой и плагинами.

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

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