Как создать динамические виджеты в WordPress на основе темы Hueman

Динамические виджеты в WordPress позволяют выводить контент, который меняется в зависимости от условий, например, отображать разные блоки на главной странице, в записях определённой категории или для конкретного пользователя. Тема Hueman предоставляет гибкие возможности для кастомизации, и в этой статье мы рассмотрим, как создавать и подключать собственные динамические виджеты в её окружении.

Зачем нужны динамические виджеты в Hueman

Тема Hueman ориентирована на максимальную настраиваемость и удобство для пользователей и разработчиков. Однако стандартные виджеты часто статичны и не учитывают контекст страницы. Динамические виджеты позволяют:

• Показывать уникальный контент в зависимости от текущей страницы или категории.
• Изменять вид и функционал без необходимости создавать отдельные шаблоны.
• Улучшать пользовательский опыт за счёт релевантности блока.

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

Создание базового динамического виджета в Hueman

Для начала создадим простой виджет, который будет отображать разные сообщения в зависимости от типа страницы. В WordPress виджеты создаются через наследование от класса WP_Widget. Ниже пример кода, который можно добавить в файл functions.php дочерней темы Hueman или в собственный плагин.

class HuemanRu_Dynamic_Widget extends WP_Widget {

    public function __construct() {
        parent::__construct(
            'huemanru_dynamic_widget', 
            'Динамический виджет HuemanRu', 
            ['description' => 'Виджет, который меняет содержимое в зависимости от страницы']
        );
    }

    public function widget($args, $instance) {
        echo $args['before_widget'];

        if (is_front_page()) {
            echo '<p>Добро пожаловать на главную страницу!</p>';
        } elseif (is_category()) {
            $category = get_queried_object();
            echo '<p>Вы просматриваете категорию: ' . esc_html($category->name) . '</p>';
        } elseif (is_single()) {
            echo '<p>Это запись блога.</p>';
        } else {
            echo '<p>Добро пожаловать на сайт!</p>';
        }

        echo $args['after_widget'];
    }

    public function form($instance) {
        // Можно добавить настройки виджета
        echo '<p>Настроек нет.</p>';
    }

    public function update($new_instance, $old_instance) {
        return $old_instance;
    }
}

function huemanru_register_dynamic_widget() {
    register_widget('HuemanRu_Dynamic_Widget');
}
add_action('widgets_init', 'huemanru_register_dynamic_widget');

Этот код создаёт виджет, который выводит разный текст в зависимости от того, на какой странице находится пользователь. Это простейший пример динамичности.

Расширение виджета: вывод популярных постов в категории

Теперь усложним виджет и добавим динамический список популярных постов из текущей категории. Для этого используем WP_Query и мета-поле post_views_count, которое можно считать с помощью плагина Popular Posts или аналогичных.

Расширим метод widget следующим образом:

public function widget($args, $instance) {
    echo $args['before_widget'];

    if (is_category()) {
        $category = get_queried_object();
        echo '<p>Популярные записи в категории: <strong>' . esc_html($category->name) . '</strong></p>';

        $popular_posts = new WP_Query([
            'posts_per_page' => 5,
            'cat' => $category->term_id,
            'meta_key' => 'post_views_count',
            'orderby' => 'meta_value_num',
            'order' => 'DESC',
        ]);

        if ($popular_posts->have_posts()) {
            echo '<ul>';
            while ($popular_posts->have_posts()) {
                $popular_posts->the_post();
                echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
            }
            echo '</ul>';
        } else {
            echo '<p>Популярных записей нет.</p>';
        }

        wp_reset_postdata();
    } else {
        echo '<p>Показывается только в категориях.</p>';
    }

    echo $args['after_widget'];
}

Этот код позволяет выводить список популярных постов по просмотрам именно в категории, где находится пользователь. Если на сайте ещё нет подсчёта просмотров, можно использовать плагин Clearfy Pro для расширенного управления и оптимизации.

Привязка виджета к определённым областям темы Hueman

В теме Hueman есть несколько областей для размещения виджетов: боковая панель, футер, и дополнительные секции. Чтобы вывести наш динамический виджет именно там, где нужно, используйте стандартный интерфейс WordPress — «Внешний вид» -> «Виджеты».

Если нужна программная вставка виджета в шаблоны Hueman, можно выбрать место в файлах темы и вызвать:

if (is_active_sidebar('sidebar-1')) {
    dynamic_sidebar('sidebar-1');
}

Для кастомных областей добавьте в functions.php дочерней темы:

function huemanru_register_custom_sidebar() {
    register_sidebar([
        'name' => 'Динамическая область HuemanRu',
        'id' => 'huemanru_dynamic_area',
        'before_widget' => '<div class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h3 class="widget-title">',
        'after_title' => '</h3>',
    ]);
}
add_action('widgets_init', 'huemanru_register_custom_sidebar');

После этого в админке WordPress появится новая область для размещения виджетов, куда можно добавить наш динамический виджет.

Использование плагинов для создания динамических виджетов

Если не хочется писать код, можно использовать плагины, которые расширяют функционал виджетов:

• Widget Options — позволяет задавать условия показа виджетов по страницам, ролям пользователей, устройствам и другим параметрам.
• Content Aware Sidebars — создаёт множество боковых панелей с условным выводом.
• Dynamic Widgets — аналогичный функционал с большим количеством настроек.

Плагины совместимы с Hueman и помогут быстро настроить динамические блоки без программирования. При необходимости интеграции с другими плагинами из WPShop можно расширять их функционал.

Советы по оптимизации и безопасности динамических виджетов

При использовании динамических виджетов важно учитывать производительность сайта. WP_Query в виджетах может увеличить нагрузку, особенно если запросы сложные. Рекомендуется:

• Кешировать вывод виджетов с помощью Transients API или плагинов кеширования.
• Избегать тяжёлых запросов и сложной логики в виджетах.
• Обрабатывать и экранировать все данные для безопасности.

Например, можно добавить кеширование в виджет:

public function widget($args, $instance) {
    $cache_key = 'huemanru_dynamic_widget_' . md5(serialize($args));
    $cached = get_transient($cache_key);
    if ($cached !== false) {
        echo $cached;
        return;
    }

    ob_start();
    // Ваш вывод виджета здесь

    $output = ob_get_clean();
    echo $output;
    set_transient($cache_key, $output, 600); // кеш 10 минут
}

Такой подход позволит снизить количество запросов к базе и ускорить загрузку страниц.