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

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

Зачем нужны уникальные стили для типов записей в WordPress

По умолчанию все записи в WordPress имеют одинаковое оформление, что не всегда удобно, если на сайте используется несколько типов контента: новости, портфолио, товары, мероприятия и т.д. Уникальные стили позволяют:

• Визуально разграничить контент, повышая удобство навигации;
• Подчеркнуть особенности каждого типа записи;
• Улучшить восприятие и дизайн сайта без глобальных изменений темы;
• Оптимизировать загрузку стилей, подгружая только нужные CSS файлы для конкретного типа записи.

Как определить текущий тип записи в WordPress

Для подключения стилей важно понимать, какой тип записи сейчас отображается. WordPress предоставляет функцию get_post_type(), которая возвращает тип текущей записи.

Например:

function wpskins_get_current_post_type() {
    if ( is_singular() ) {
        return get_post_type();
    }
    return false;
}

Эту функцию можно использовать для условной загрузки стилей.

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

Самый правильный способ – подключать CSS-файлы через хук wp_enqueue_scripts с проверкой типа записи.

Пример функции, которая подключает отдельный файл стилей для типа записи portfolio:

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');
    }
    if ( is_singular('event') ) {
        wp_enqueue_style('wpskins-event-style', get_template_directory_uri() . '/css/event.css', array(), '1.0');
    }
}
add_action('wp_enqueue_scripts', 'wpskins_enqueue_post_type_styles');

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

Создание CSS-файлов для типов записей

В папке темы создайте отдельные CSS-файлы, например portfolio.css и event.css, где опишите уникальный стиль для каждого типа записи.

Пример portfolio.css:

.portfolio-post {
    background-color: #f0f8ff;
    border-left: 5px solid #0073aa;
    padding: 20px;
    font-family: 'Arial', sans-serif;
}

.portfolio-post h1 {
    color: #0073aa;
}

Добавление уникальных классов к контейнеру записи

Чтобы применять стили из CSS файлов, лучше добавить уникальные классы к блоку записи. Для этого можно использовать фильтр post_class:

function wpskins_add_post_type_class( $classes ) {
    if ( is_singular() ) {
        $post_type = get_post_type();
        $classes[] = $post_type . '-post'; // Добавит класс portfolio-post или event-post
    }
    return $classes;
}
add_filter('post_class', 'wpskins_add_post_type_class');

Теперь в HTML коде записи будет класс, по которому можно писать CSS-правила.

Оптимизация загрузки стилей с помощью плагина Clearfy Pro

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

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

Пример интеграции с Clearfy Pro

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

Пример расширения: динамическая загрузка стилей с AJAX

Если требуется менять стили без перезагрузки страницы, можно подгружать CSS динамически с помощью AJAX.

Пример функции для загрузки CSS файла через AJAX:

add_action('wp_ajax_wpskins_load_post_type_style', 'wpskins_load_post_type_style_callback');
add_action('wp_ajax_nopriv_wpskins_load_post_type_style', 'wpskins_load_post_type_style_callback');

function wpskins_load_post_type_style_callback() {
    $post_id = intval($_POST['post_id']);
    $post_type = get_post_type($post_id);

    if ($post_type) {
        $css_file = get_template_directory_uri() . '/css/' . $post_type . '.css';
        wp_send_json_success(['css_url' => $css_file]);
    } else {
        wp_send_json_error('Post type not found');
    }
}

На фронтенде можно получить URL стиля и добавить его в <head> динамически.

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

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

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