Как создать динамические блоки в теме Hueman для WordPress

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

Что такое динамические блоки и зачем они нужны в Hueman

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

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

Используя динамические блоки, вы можете:

• Показывать уникальный контент для разных категорий или страниц.
• Добавлять интерактивные элементы с AJAX-загрузкой.
• Интегрировать сторонние данные и API.
• Оптимизировать пользовательский опыт.

Использование хуков и фильтров в Hueman для добавления динамических блоков

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

Для добавления блока нужно создать функцию, которая выводит HTML с динамическим содержимым, и подключить её к нужному хуку. Вот пример простой функции, которая выводит список последних комментариев:

function huemanru_add_recent_comments_block() {
    $comments = get_comments(array(
        'number' => 5,
        'status' => 'approve'
    ));
    if (!$comments) {
        echo '<p>Комментариев пока нет.</p>';
        return;
    }
    echo '<div class="huemanru-recent-comments"><h3>Последние комментарии</h3><ul>';
    foreach ($comments as $comment) {
        echo '<li><a href="'. esc_url(get_comment_link($comment)) .'">'. esc_html($comment->comment_author) .': '. wp_trim_words(esc_html($comment->comment_content), 10) .'</a></li>';
    }
    echo '</ul></div>';
}
add_action('hueman_after_content', 'huemanru_add_recent_comments_block');

Этот код добавит под основным контентом блока список из 5 последних комментариев. Обратите внимание, что имя функции начинается с huemanru_ — это хорошая практика для избежания конфликтов.

Создание кастомного динамического блока с AJAX-загрузкой

Чтобы сделать блок более интерактивным, добавим AJAX-загрузку. Например, создадим блок с кнопкой «Показать случайный пост», который при нажатии будет загружать и отображать пост без перезагрузки страницы.

Шаг 1. Добавляем HTML и JS

Вставляем блок с кнопкой и контейнером для вывода поста, а также подключаем JS-скрипт:

function huemanru_random_post_block() {
    ?>
    <div id="huemanru-random-post">
        <button id="huemanru-load-post">Показать случайный пост</button>
        <div id="huemanru-post-content" style="margin-top:15px;"></div>
    </div>
    <script type="text/javascript">
    document.getElementById('huemanru-load-post').addEventListener('click', function() {
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '<?php echo admin_url('admin-ajax.php'); ?>', true);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
        xhr.onload = function() {
            if (xhr.status === 200) {
                document.getElementById('huemanru-post-content').innerHTML = xhr.responseText;
            } else {
                document.getElementById('huemanru-post-content').innerHTML = 'Ошибка загрузки поста';
            }
        };
        xhr.send('action=huemanru_get_random_post');
    });
    </script>
    <?php
}
add_action('hueman_after_content', 'huemanru_random_post_block');

Шаг 2. Обрабатываем AJAX-запрос на стороне PHP

В functions.php добавим обработчик AJAX-запроса, который будет возвращать случайный пост:

function huemanru_ajax_get_random_post() {
    $args = array(
        'post_type' => 'post',
        'posts_per_page' => 1,
        'orderby' => 'rand',
        'post_status' => 'publish'
    );
    $query = new WP_Query($args);
    if ($query->have_posts()) {
        $query->the_post();
        echo '<h4><a href="' . get_permalink() . '">' . get_the_title() . '</a></h4>';
        echo '<p>' . wp_trim_words(get_the_excerpt(), 20) . '</p>';
        wp_reset_postdata();
    } else {
        echo 'Посты не найдены';
    }
    wp_die();
}
add_action('wp_ajax_huemanru_get_random_post', 'huemanru_ajax_get_random_post');
add_action('wp_ajax_nopriv_huemanru_get_random_post', 'huemanru_ajax_get_random_post');

Теперь при клике на кнопку будет динамически загружаться случайный пост без перезагрузки страницы.

Интеграция с плагинами для расширения функционала динамических блоков

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

Для динамических таблиц с фильтрами рекомендуем обратить внимание на ABC Pagination, который позволит создавать удобную навигацию по большим массивам данных.

Оптимизация и советы по безопасности динамических блоков в Hueman

При создании динамических блоков важно учитывать безопасность и производительность:

• Всегда экранируйте вывод с помощью esc_html(), esc_url() и других функций WordPress.
• Используйте кэширование, если блоки меняются не часто. Можно применить транзиенты (transients API) для снижения нагрузки.
• Минимизируйте количество запросов к базе данных, объединяя их или используя WP_Query с правильными параметрами.
• Проверяйте права доступа в AJAX-обработчиках, если блок содержит приватные данные.

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

function huemanru_add_recent_comments_block() {
    $cached_comments = get_transient('huemanru_recent_comments');
    if ($cached_comments !== false) {
        echo $cached_comments;
        return;
    }
    ob_start();
    $comments = get_comments(array(
        'number' => 5,
        'status' => 'approve'
    ));
    if (!$comments) {
        echo '<p>Комментариев пока нет.</p>';
        return;
    }
    echo '<div class="huemanru-recent-comments"><h3>Последние комментарии</h3><ul>';
    foreach ($comments as $comment) {
        echo '<li><a href="'. esc_url(get_comment_link($comment)) .'">'. esc_html($comment->comment_author) .': '. wp_trim_words(esc_html($comment->comment_content), 10) .'</a></li>';
    }
    echo '</ul></div>';
    $output = ob_get_clean();
    set_transient('huemanru_recent_comments', $output, 3600); // кеш на 1 час
    echo $output;
}
add_action('hueman_after_content', 'huemanru_add_recent_comments_block');