Изменить CSS для определенных ролей пользователей

На чтение 3 мин Опубликовано 05.01.2025

Содержание

Вопрос или проблема
Ответ или решение
Шаги для реализации
Потенциальные ошибки и как их исправить
Заключение

Вопрос или проблема

Я пытаюсь сделать #tribe_events_event_options{display:none;} для всех авторов на моем сайте. Я не хочу, чтобы они могли устанавливать событие как избранное, и подумал, что самым простым способом было бы не отображать этот блок.

Есть ли простой способ нацелиться на группы пользователей для пользовательского CSS? Я создал файл author.css в папке дочерней темы.

Я нашел этот пост, но он мне не помог.
Custom CSS In Admin Only For Certain Roles

function wpa66834_role_admin_body_class( $classes ) {
global $current_user;
foreach( $current_user->roles as $role )
    $classes .= ' role-' . $role;
return trim( $classes );
}
add_filter( 'admin_body_class', 'wpa66834_role_admin_body_class' );

Запись CSS, например:

.role-editor #main-header {display:none;}

Но CSS не действует. Я что-то упускаю?

Заранее спасибо!

Ваш код кажется правильным, возможно, ваш селектор неверен? Можете выложить HTML тела вашей страницы, который выводится?

Ответ или решение

Изменение CSS для конкретных ролей пользователей на вашем WordPress-сайте может показаться сложной задачей, однако с правильным подходом это вполне осуществимо. В данном случае вы хотите скрыть элемент #tribe_events_event_options для всех пользователей с ролью автора. Это можно сделать с помощью как PHP, так и CSS, чтобы эффективно управлять отображением элементов в зависимости от ролей пользователей.

Шаги для реализации

Подключение PHP-функции

Вы уже находитесь на правильном пути, добавив PHP-функцию для добавления классов к body в админке в зависимости от роли пользователя:

function wpa66834_role_admin_body_class( $classes ) {
    global $current_user;
    foreach( $current_user->roles as $role )
        $classes .= ' role-' . $role;
    return trim( $classes );
}
add_filter( 'admin_body_class', 'wpa66834_role_admin_body_class' );

Эта функция добавляет класс с названием роли пользователя к тегу body, что позволяет применять CSS на основе ролей пользователей.

Проверка HTML-вывода

Проверьте исходный код страницы админки, чтобы убедиться, что класс role-author действительно добавлен к тегу body. Это можно сделать с помощью инспектора элементов в вашем браузере.

Создание CSS-стилей

В вашем файле author.css добавьте следующий CSS-код:

.role-author #tribe_events_event_options {
    display: none;
}

Убедитесь, что путь к файлу author.css правильный и что файл подключен.

Подключение кастомного CSS в админке

Чтобы ваше кастомное CSS подгружалось в админке, используйте следующий код в файле functions.php вашей темы:

function load_author_specific_styles() {
    global $current_user;
    if ( in_array( 'author', (array) $current_user->roles ) ) {
        wp_enqueue_style( 'author-css', get_stylesheet_directory_uri() . '/path-to-your-child-theme/author.css' );
    }
}
add_action( 'admin_enqueue_scripts', 'load_author_specific_styles' );

Потенциальные ошибки и как их исправить

Неверный селектор: Убедитесь, что идентификатор #tribe_events_event_options корректен. Используйте инспектор браузера, чтобы точно определить разметку и соответствие селекторов.
Подключение CSS: Проверьте, что CSS файл действительно подключается и содержит корректные пути.
Ошибки ролей: Убедитесь, что роль автора назначена пользователям корректно и что их статус проверяется правильно.

Заключение

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