Как добавить пользовательские подсказки (tooltips) в админке WordPress

Автор: Диана Полякова | Опубликовано: 24.12.2025

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

Что такое подсказки (tooltips) и зачем они нужны в WordPress?

Подсказки — это небольшие всплывающие окна с текстом, которые появляются при наведении курсора на определённые элементы интерфейса. В WordPress админке они помогают:

Улучшить понятность настроек и полей;
Снизить количество вопросов от пользователей;
Упростить обучение новых администраторов;
Сделать интерфейс более удобным и интуитивным.

Стандартный WordPress по умолчанию использует подсказки в некоторых местах, например, иконка вопроса рядом с настройками. Однако часто необходимо добавить собственные подсказки к своим метаполям, настройкам темы или плагина.

Добавление подсказок с помощью чистого кода

Использование HTML и CSS для создания простых подсказок

Самый простой способ — добавить HTML с атрибутом title. Например:

<label for="wpbe_field" title="Введите уникальное значение для этого поля">Пользовательское поле:</label>
<input type="text" id="wpbe_field" name="wpbe_field" />

При наведении на label браузер покажет стандартную подсказку. Это быстро и просто, но дизайн подсказки зависит от браузера и не всегда удобен.

Создание кастомных подсказок через jQuery UI Tooltip

Для более гибкого и стильного отображения можно использовать библиотеку jQuery UI Tooltip, которая уже включена в WordPress. Пример:

function wpbe_enqueue_tooltip_script() {
  wp_enqueue_script('jquery-ui-tooltip');
  wp_enqueue_style('jquery-ui-style', 'https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css');
  wp_add_inline_script('jquery-ui-tooltip', 'jQuery(document).ready(function($) { $( document ).tooltip(); });');
}
add_action('admin_enqueue_scripts', 'wpbe_enqueue_tooltip_script');

Теперь в HTML можно использовать атрибут title, и подсказки будут отображаться красиво и с анимацией.

Пример добавления подсказки к метаполю в настройках поста

Если вы создаёте метабокс с пользовательским полем, добавьте подсказку так:

function wpbe_add_custom_meta_box() {
    add_meta_box(
        'wpbe_meta',
        'Дополнительные данные',
        'wpbe_meta_box_callback',
        'post',
        'normal',
        'default'
    );
}
add_action('add_meta_boxes', 'wpbe_add_custom_meta_box');

function wpbe_meta_box_callback($post) {
    $value = get_post_meta($post->ID, '_wpbe_custom_field', true);
    echo '<label for="wpbe_custom_field" title="Введите уникальный идентификатор для этого поста">Идентификатор:</label> ';
    echo '<input type="text" id="wpbe_custom_field" name="wpbe_custom_field" value="' . esc_attr($value) . '" size="25" />';
}

function wpbe_save_meta_box_data($post_id) {
    if (array_key_exists('wpbe_custom_field', $_POST)) {
        update_post_meta(
            $post_id,
            '_wpbe_custom_field',
            sanitize_text_field($_POST['wpbe_custom_field'])
        );
    }
}
add_action('save_post', 'wpbe_save_meta_box_data');

После подключения jQuery UI Tooltip подсказка будет выглядеть современно и удобно.

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

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

Adminimize — позволяет управлять элементами админки и добавлять пояснения;
WP Admin UI Customize
ACF (Advanced Custom Fields) — при создании полей можно добавить описание, которое отображается как подсказка;
Clearfy Pro — расширенный плагин для оптимизации и настройки интерфейса, включая добавление подсказок к элементам.

Плагины экономят время и дают гибкость, особенно если у вас много полей и настроек.

Особенности и рекомендации при работе с подсказками в админке

Удобство и доступность

Важно делать подсказки понятными и краткими. Не стоит перегружать подсказки большим объёмом текста — лучше дать ссылку на подробную документацию. Используйте семантические теги и атрибуты, чтобы подсказки были доступны для пользователей с ограниченными возможностями.

Совместимость с другими плагинами и темами

Если вы используете библиотеки для создания подсказок, убедитесь, что они не конфликтуют с уже подключёнными скриптами и стилями. jQuery UI Tooltip безопасен и широко поддерживается в WordPress.

Оптимизация производительности

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

Пример подключения подсказок только в метабоксе

function wpbe_enqueue_tooltip_for_meta_box($hook) {
    global $post;
    if ($hook === 'post.php' || $hook === 'post-new.php') {
        wp_enqueue_script('jquery-ui-tooltip');
        wp_enqueue_style('jquery-ui-style', 'https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css');
        wp_add_inline_script('jquery-ui-tooltip', 'jQuery(document).ready(function($) { $( document ).tooltip(); });');
    }
}
add_action('admin_enqueue_scripts', 'wpbe_enqueue_tooltip_for_meta_box');

Итог

Добавление пользовательских подсказок (tooltips) в админке WordPress — задача, которая значительно улучшает удобство работы с сайтом. Вы можете начать с простых атрибутов title и постепенно внедрять более сложные решения с библиотекой jQuery UI Tooltip или использовать готовые плагины, такие как Clearfy Pro. Главное — делать подсказки информативными, ненавязчивыми и удобными для пользователей админки.