В этой статье мы рассмотрим, как создавать динамические стили в WordPress, которые будут применяться в зависимости от конкретного пользователя. Такой подход позволяет максимально персонализировать отображение сайта — например, менять цветовую схему, шрифты или другие параметры оформления под предпочтения каждого посетителя.
Почему важно использовать динамические стили для пользователей
Персонализация интерфейса — важный тренд в веб-разработке. В WordPress, где аудитория часто разнородна, полезно адаптировать внешний вид под разные группы пользователей. Это может повысить удобство, вовлечённость и даже конверсию. Например, зарегистрированные пользователи могут видеть более спокойный дизайн, а гости — яркий и привлекательный.
Кроме того, динамические стили позволяют реализовать темы с возможностью выбора оформления, не загружая при этом лишние CSS-файлы, что ускоряет работу сайта.
Подходы к созданию динамических стилей в WordPress
Существует несколько способов реализовать динамические стили для пользователей:
- Программное добавление CSS в header страницы с проверкой пользователя.
- Использование пользовательских классов в <body> и подключение CSS с условием.
- Применение AJAX для загрузки стилей после авторизации пользователя.
- Использование плагинов, которые упрощают управление стилями.
Рассмотрим каждый метод подробнее с примерами.
1. Добавление CSS напрямую через хук wp_head
Самый простой способ — добавить стили в <head> с проверкой, какой пользователь зашёл на сайт. Например, можно задать разный фон для разных ролей.
function wpskins_add_dynamic_styles() {
if ( is_user_logged_in() ) {
$user = wp_get_current_user();
if ( in_array( 'administrator', (array) $user->roles ) ) {
echo '<style>body { background-color: #f0f0f0; }</style>';
} elseif ( in_array( 'subscriber', (array) $user->roles ) ) {
echo '<style>body { background-color: #e0ffe0; }</style>';
} else {
echo '<style>body { background-color: #ffffff; }</style>';
}
} else {
echo '<style>body { background-color: #fff0f0; }</style>';
}
}
add_action( 'wp_head', 'wpskins_add_dynamic_styles' );Такой подход работает быстро и не требует дополнительных файлов.
2. Добавление пользовательских классов в body_class и условное подключение CSS
Другой вариант — добавить в тег <body> класс, отражающий роль пользователя, и подгружать CSS-файлы с нужными стилями.
function wpskins_add_user_role_body_class( $classes ) {
if ( is_user_logged_in() ) {
$user = wp_get_current_user();
foreach ( $user->roles as $role ) {
$classes[] = 'role-' . $role;
}
} else {
$classes[] = 'role-guest';
}
return $classes;
}
add_filter( 'body_class', 'wpskins_add_user_role_body_class' );
function wpskins_enqueue_role_styles() {
if ( is_user_logged_in() ) {
$user = wp_get_current_user();
if ( in_array( 'administrator', (array) $user->roles ) ) {
wp_enqueue_style( 'wpskins-admin-style', get_template_directory_uri() . '/css/admin-style.css' );
} elseif ( in_array( 'subscriber', (array) $user->roles ) ) {
wp_enqueue_style( 'wpskins-subscriber-style', get_template_directory_uri() . '/css/subscriber-style.css' );
}
} else {
wp_enqueue_style( 'wpskins-guest-style', get_template_directory_uri() . '/css/guest-style.css' );
}
}
add_action( 'wp_enqueue_scripts', 'wpskins_enqueue_role_styles' );Так можно удобно управлять стилями через отдельные CSS-файлы, не засоряя HTML.
3. Динамическая загрузка стилей через AJAX после авторизации
Если нужно менять стили без перезагрузки страницы — например, при смене пользователя или роли, можно использовать AJAX. Это сложнее, но даёт гибкость.
Пример AJAX-запроса, который возвращает CSS для текущего пользователя:
add_action( 'wp_ajax_wpskins_get_user_styles', 'wpskins_get_user_styles_callback' );
add_action( 'wp_ajax_nopriv_wpskins_get_user_styles', 'wpskins_get_user_styles_callback' );
function wpskins_get_user_styles_callback() {
header('Content-Type: text/css');
if ( is_user_logged_in() ) {
$user = wp_get_current_user();
if ( in_array( 'administrator', (array) $user->roles ) ) {
echo 'body { background-color: #f0f0f0; }';
} elseif ( in_array( 'subscriber', (array) $user->roles ) ) {
echo 'body { background-color: #e0ffe0; }';
} else {
echo 'body { background-color: #ffffff; }';
}
} else {
echo 'body { background-color: #fff0f0; }';
}
wp_die();
}И в JS подключить этот стиль динамически:
function wpskinsLoadUserStyles() {
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = '/wp-admin/admin-ajax.php?action=wpskins_get_user_styles';
document.head.appendChild(link);
}
window.onload = wpskinsLoadUserStyles;Рекомендации по плагинам для работы с динамическими стилями
Для упрощения работы с динамическими стилями можно использовать плагины. Например:
- Clearfy Pro — помогает оптимизировать загрузку CSS и JS, что важно при динамическом подключении стилей.
- WPRemark — плагин для добавления кастомных CSS и JS, который можно настроить под разные роли пользователей.
Практический пример: создание пользовательской темы оформления
Рассмотрим, как создать небольшой функционал, позволяющий пользователю выбирать цветовую схему сайта, которая будет сохраняться и применяться при каждом его посещении.
Создание поля выбора цвета в профиле пользователя
Добавим поле с выбором цвета в профиль пользователя с помощью хуков:
function wpskins_show_color_picker_field( $user ) {
$color = get_user_meta( $user->ID, 'wpskins_user_color', true );
?>
<h3>Настройка цветовой схемы</h3>
<table class="form-table">
<tr>
<th><label for="wpskins_user_color">Выберите цвет</label></th>
<td>
<input type="color" name="wpskins_user_color" id="wpskins_user_color" value="<?php echo esc_attr( $color ); ?>" />
</td>
</tr>
</table>
<?php
}
add_action( 'show_user_profile', 'wpskins_show_color_picker_field' );
add_action( 'edit_user_profile', 'wpskins_show_color_picker_field' );Сохранение выбранного цвета
function wpskins_save_color_picker_field( $user_id ) {
if ( !current_user_can( 'edit_user', $user_id ) ) {
return false;
}
update_user_meta( $user_id, 'wpskins_user_color', sanitize_hex_color( $_POST['wpskins_user_color'] ) );
}
add_action( 'personal_options_update', 'wpskins_save_color_picker_field' );
add_action( 'edit_user_profile_update', 'wpskins_save_color_picker_field' );Применение цвета на сайте
function wpskins_apply_user_color_style() {
if ( is_user_logged_in() ) {
$user_id = get_current_user_id();
$color = get_user_meta( $user_id, 'wpskins_user_color', true );
if ( $color ) {
echo "<style>body { background-color: " . esc_attr( $color ) . "; }</style>";
}
}
}
add_action( 'wp_head', 'wpskins_apply_user_color_style' );Таким образом, каждый пользователь сможет выбрать собственный цвет фона, и он будет применяться при загрузке сайта.
Итог
Динамические стили для пользователей — отличный инструмент персонализации WordPress-сайта. Используя PHP и хуки WordPress, можно реализовать как простые, так и сложные варианты. Для оптимизации и удобства стоит рассмотреть плагины, например, Clearfy Pro или WPRemark.
Экспериментируйте с кодом и настройками, чтобы добиться лучшего пользовательского опыта на вашем сайте.