Фильтр admin_body_class в WordPress: как добавить CSS-классы к тегу body в админке

Фильтр admin_body_class позволяет разработчикам добавлять или изменять CSS-классы, которые применяются к элементу <body> на страницах админ-панели WordPress. Это полезно для тех случаев, когда вы хотите кастомизировать внешний вид админки, основываясь на текущем пользователе, странице или других условиях.

Что такое admin_body_class?

admin_body_class — это фильтр, который срабатывает перед рендерингом элемента <body> в админке WordPress. С помощью этого фильтра можно добавлять дополнительные классы, которые затем могут быть использованы в CSS для изменения стилей админки.

Пример использования

Предположим, вы хотите добавить кастомный класс к тегу <body> в админке, чтобы изменить стили для конкретных пользователей или страниц админки. Вот базовый пример использования фильтра:

add_filter( 'admin_body_class', 'custom_admin_body_class' );

/**
 * Добавляем кастомные классы к тегу body в админке.
 *
 * @param string $classes Текущие классы элемента body.
 * @return string Модифицированные классы.
 */
function custom_admin_body_class( $classes ) {
    // Добавляем новый класс для админки
    $classes .= ' my-custom-admin-class';

    return $classes;
}

Как это работает

  1. add_filter( 'admin_body_class', 'custom_admin_body_class' );: Этот код регистрирует фильтр и связывает его с функцией custom_admin_body_class.
  2. Функция custom_admin_body_class: Она принимает текущие классы тега <body> в виде строки. Мы добавляем к этой строке новый CSS-класс my-custom-admin-class и возвращаем результат.

Добавление классов на основе условий

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

Пример: Добавление класса в зависимости от роли пользователя

add_filter( 'admin_body_class', 'role_based_admin_body_class' );

function role_based_admin_body_class( $classes ) {
    // Проверяем, является ли пользователь администратором
    if ( current_user_can( 'administrator' ) ) {
        $classes .= ' admin-user';
    }

    // Проверяем, является ли пользователь редактором
    if ( current_user_can( 'editor' ) ) {
        $classes .= ' editor-user';
    }

    return $classes;
}

В этом примере добавляются разные классы для администраторов и редакторов. Эти классы можно использовать в CSS, чтобы изменить внешний вид админки в зависимости от роли пользователя.

Пример: Добавление класса на определенных страницах админки

Вы также можете добавить классы в зависимости от текущей страницы админки:

add_filter( 'admin_body_class', 'page_based_admin_body_class' );

function page_based_admin_body_class( $classes ) {
    // Добавляем класс на страницах настроек
    if ( get_current_screen()->id === 'settings_page' ) {
        $classes .= ' settings-page-active';
    }

    return $classes;
}

В данном примере добавляется класс settings-page-active только на страницах настроек.

Как использовать добавленные классы

После того как вы добавили необходимые классы к тегу <body>, вы можете стилизовать админку с помощью CSS. Например, добавьте следующий код в файл стилей админки:

/* Стили для администраторов */
body.admin-user {
    background-color: #f1f1f1;
}

/* Стили для редакторов */
body.editor-user {
    background-color: #e2e2e2;
}

/* Стили для страницы настроек */
body.settings-page-active {
    border-top: 5px solid #0073aa;
}

Использование с JavaScript

Добавленные классы также могут быть полезны для JavaScript. Например, вы можете использовать классы, чтобы динамически изменять поведение элементов на странице админки:

jQuery(document).ready(function($) {
    if ( $('body').hasClass('settings-page-active') ) {
        console.log('Вы на странице настроек');
    }
});

Когда использовать admin_body_class

  1. Кастомизация админки: Добавляйте классы для кастомизации внешнего вида админки, создавая уникальные интерфейсы для различных ролей пользователей.
  2. Изменение интерфейса на основе текущей страницы: Изменяйте внешний вид админки в зависимости от активной страницы (например, для страниц настроек).
  3. Адаптация функциональности админки: Вы можете использовать классы для изменения поведения элементов админки через CSS или JavaScript.

Почитаем еще?: