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

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

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

Подсказки полезны для:

• Объяснения терминов и сокращений в статьях и курсах.
• Пояснений к сложным понятиям без перегрузки текста.
• Интерактивных элементов в интерфейсе, например, в админке или на страницах курсов.

Для реализации подсказок можно использовать как готовые плагины, так и собственные решения на JavaScript и PHP.

Автоматическое добавление подсказок к определённым словам — техническое решение

Рассмотрим пример, когда нужно автоматически оборачивать определённые слова в контенте в элементы с подсказками. Для этого можно использовать фильтр the_content и регулярные выражения в PHP.

Представим, что у нас есть список терминов и их описаний в виде массива:

function wpfreecourses_tooltip_terms() {
    return [
        'WordPress' => 'Популярная CMS для создания сайтов.',
        'PHP' => 'Серверный язык программирования, на котором работает WordPress.',
        'AJAX' => 'Технология асинхронного обмена данными с сервером без перезагрузки страницы.'
    ];
}

Далее создаём функцию, которая находит эти слова в тексте и оборачивает их в <span> с атрибутом title для подсказки:

function wpfreecourses_add_tooltips_to_content($content) {
    $terms = wpfreecourses_tooltip_terms();
    foreach ($terms as $term => $description) {
        $pattern = '/\b(' . preg_quote($term, '/') . ')\b/';
        $replacement = '<span class="wpfreecourses-tooltip" title="' . esc_attr($description) . '">$1</span>';
        $content = preg_replace($pattern, $replacement, $content);
    }
    return $content;
}
add_filter('the_content', 'wpfreecourses_add_tooltips_to_content');

Обратите внимание на использование preg_quote для корректной обработки терминов и esc_attr для безопасности.

Стилизация и улучшение UX подсказок с помощью CSS и JavaScript

Атрибут title — самый простой способ, но он не всегда удобен для пользователей. Лучше использовать кастомные всплывающие подсказки с помощью CSS и JS.

Добавим стили для подсказок:

function wpfreecourses_tooltip_styles() {
    echo '<style>
    .wpfreecourses-tooltip {
        position: relative;
        cursor: help;
        border-bottom: 1px dotted #666;
    }
    .wpfreecourses-tooltip:hover::after {
        content: attr(title);
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: #333;
        color: #fff;
        padding: 5px 10px;
        border-radius: 4px;
        white-space: nowrap;
        z-index: 9999;
        opacity: 1;
        pointer-events: auto;
    }
    .wpfreecourses-tooltip::after {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s;
    }
    </style>';
}
add_action('wp_head', 'wpfreecourses_tooltip_styles');

Так мы создадим простую всплывающую подсказку на CSS без использования JS.

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

Если не хочется писать код, можно воспользоваться готовыми плагинами. Вот несколько, которые подходят для подсказок:

• CM Tooltip Glossary — позволяет создавать глоссарий терминов с автоматическим отображением подсказок и ссылками на страницы с описаниями.
• WordPress Tooltip Plugin — простой плагин для создания подсказок на основе шорткодов и CSS.
• Tooltips — плагин с множеством настроек для показа подсказок, включая визуальный редактор и кастомизацию.

Для примера, плагин CM Tooltip Glossary можно использовать так:

• Создайте термины в разделе Glossary.
• Плагин автоматически найдёт эти слова в статьях и добавит подсказки.

Это отличный вариант для образовательного сайта, где много терминов.

Расширение функционала: AJAX-подсказки с динамическим контентом

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

Для этого можно реализовать AJAX-запросы, которые по наведению будут подгружать информацию.

Пример AJAX обработчика в WordPress:

add_action('wp_ajax_wpfreecourses_get_tooltip', 'wpfreecourses_get_tooltip_callback');
add_action('wp_ajax_nopriv_wpfreecourses_get_tooltip', 'wpfreecourses_get_tooltip_callback');

function wpfreecourses_get_tooltip_callback() {
    $term = sanitize_text_field($_POST['term']);
    $terms = wpfreecourses_tooltip_terms();
    if (isset($terms[$term])) {
        wp_send_json_success(['tooltip' => $terms[$term]]);
    } else {
        wp_send_json_error('Термин не найден');
    }
    wp_die();
}

На фронтенде добавим JavaScript для обработки наведения и запроса подсказки:

document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.wpfreecourses-tooltip').forEach(function(elem) {
        elem.addEventListener('mouseenter', function() {
            var term = this.textContent.trim();
            fetch(wpfreecourses_ajax_object.ajax_url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
                },
                body: new URLSearchParams({
                    action: 'wpfreecourses_get_tooltip',
                    term: term
                })
            })
            .then(response => response.json())
            .then(data => {
                if(data.success) {
                    this.setAttribute('title', data.data.tooltip);
                }
            });
        });
    });
});

Для передачи URL AJAX добавьте в functions.php:

function wpfreecourses_localize_script() {
    wp_localize_script('jquery', 'wpfreecourses_ajax_object', [
        'ajax_url' => admin_url('admin-ajax.php')
    ]);
}
add_action('wp_enqueue_scripts', 'wpfreecourses_localize_script');

Заключение по теме подсказок в WordPress

Автоматическое добавление подсказок в WordPress — полезная задача для сайтов с большим количеством терминов и обучающим контентом. Можно выбрать простой способ через фильтр the_content и атрибут title, улучшить UX с помощью CSS или реализовать динамические AJAX-подсказки.

Использование готовых плагинов, например, CM Tooltip Glossary, позволит быстро получить функционал без программирования.

Выбирайте подходящий способ в зависимости от задач вашего сайта и уровня владения кодом.