Как создать динамические таблицы в WordPress с помощью shortcode

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

Почему динамические таблицы важны для WordPress

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

• Автоматически подтягивать свежие данные из базы или API;
• Обеспечивать интерактивность — сортировку, фильтры, пагинацию;
• Облегчить администрирование сайта — не нужен прямой доступ к редактированию таблиц;
• Повысить удобство для пользователей за счёт актуальной информации.

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

Популярные плагины для создания динамических таблиц в WordPress

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

TablePress с расширениями для динамики

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

• Импорт данных из CSV, Excel или URL;
• Расширение TablePress Extension: Automatic Table Import позволяет обновлять таблицы из внешних источников;
• Поддержка JavaScript для сортировки и фильтрации.

Установка проста, после чего таблицы можно вставлять через шорткод [table id=1 /]. Для автоматического обновления потребуется настроить источник данных и расписание импорта.

WP Table Builder — визуальный конструктор таблиц

WP Table Builder предлагает удобный drag-and-drop интерфейс, а также поддержку динамического наполнения через JSON и API. Можно создавать таблицы с фильтрами, пагинацией и даже интегрировать их с WooCommerce.

Custom Table Shortcode — легкий плагин для разработчиков

Если нужна максимальная свобода и кастомизация, стоит обратить внимание на плагины, позволяющие создавать шорткоды для таблиц с произвольным PHP-кодом. Это помогает интегрировать таблицы с пользовательскими запросами к базе.

Создание собственного шорткода для динамической таблицы в WordPress

Если вы хотите полностью контролировать логику вывода таблиц, можно написать собственный шорткод. Рассмотрим пример, где таблица будет выводить последние 5 записей из произвольного типа постов «products».

Регистрация шорткода

function wpeducation_dynamic_table_shortcode($atts) {
    $atts = shortcode_atts(array(
        'post_type' => 'post',
        'count' => 5
    ), $atts, 'wpeducation_dynamic_table');

    $query = new WP_Query(array(
        'post_type' => $atts['post_type'],
        'posts_per_page' => intval($atts['count'])
    ));

    if (!$query->have_posts()) {
        return '<p>Нет данных для отображения.</p>';
    }

    $output = '<table border="1" cellpadding="5" cellspacing="0">';
    $output .= '<thead><tr><th>Название</th><th>Дата</th></tr></thead><tbody>';

    while ($query->have_posts()) {
        $query->the_post();
        $output .= '<tr>';
        $output .= '<td>' . get_the_title() . '</td>';
        $output .= '<td>' . get_the_date() . '</td>';
        $output .= '</tr>';
    }

    wp_reset_postdata();

    $output .= '</tbody></table>';

    return $output;
}
add_shortcode('wpeducation_dynamic_table', 'wpeducation_dynamic_table_shortcode');

Этот шорткод можно вставить так: [wpeducation_dynamic_table post_type="products" count="5"]. Таблица выведет заголовок и дату пяти последних продуктов.

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

Для улучшения таблицы добавим JavaScript-библиотеку DataTables, которая позволит сортировать и фильтровать таблицу на лету.

В functions.php подключим скрипты:

function wpeducation_enqueue_datatables() {
    wp_enqueue_style('datatables-css', 'https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css');
    wp_enqueue_script('jquery');
    wp_enqueue_script('datatables-js', 'https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js', array('jquery'), null, true);
    wp_add_inline_script('datatables-js', 'jQuery(document).ready(function($) { $(".wpeducation-dynamic-table").DataTable(); });');
}
add_action('wp_enqueue_scripts', 'wpeducation_enqueue_datatables');

И в код шорткода добавим класс таблице:

$output = '<table class="wpeducation-dynamic-table" border="1" cellpadding="5" cellspacing="0">';

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

Как интегрировать динамическую таблицу с плагином WPRemark для отзывов

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

Пример расширенного запроса с добавлением рейтинга:

function wpeducation_dynamic_table_with_ratings_shortcode($atts) {
    $atts = shortcode_atts(array(
        'post_type' => 'products',
        'count' => 5
    ), $atts, 'wpeducation_dynamic_table_ratings');

    global $wpdb;

    $query = new WP_Query(array(
        'post_type' => $atts['post_type'],
        'posts_per_page' => intval($atts['count'])
    ));

    if (!$query->have_posts()) {
        return '<p>Нет данных для отображения.</p>';
    }

    $output = '<table class="wpeducation-dynamic-table" border="1" cellpadding="5" cellspacing="0">';
    $output .= '<thead><tr><th>Название</th><th>Рейтинг</th></tr></thead><tbody>';

    while ($query->have_posts()) {
        $query->the_post();
        $post_id = get_the_ID();

        // Получаем средний рейтинг из таблиц WPRemark
        $average_rating = $wpdb->get_var( $wpdb->prepare(
            "SELECT AVG(rating) FROM {$wpdb->prefix}wpremark_ratings WHERE post_id = %d",
            $post_id
        ) );

        $average_rating = $average_rating ? number_format($average_rating, 2) : 'Нет отзывов';

        $output .= '<tr>';
        $output .= '<td>' . get_the_title() . '</td>';
        $output .= '<td>' . $average_rating . '</td>';
        $output .= '</tr>';
    }

    wp_reset_postdata();

    $output .= '</tbody></table>';

    return $output;
}
add_shortcode('wpeducation_dynamic_table_ratings', 'wpeducation_dynamic_table_with_ratings_shortcode');

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

Выводы и рекомендации по созданию динамических таблиц в WordPress

Создание динамических таблиц через шорткод — мощный инструмент для разработчиков и администраторов WordPress. Такой подход:

• Обеспечивает актуальность данных без ручного обновления;
• Позволяет интегрировать внешние данные и пользовательские метаданные;
• Повышает удобство пользователей за счет интерактивности;
• Облегчает поддержку и масштабирование сайта.

При выборе решения учитывайте сложность задачи и доступные ресурсы. Если хочется простого визуального редактора — подойдет TablePress или WP Table Builder. Для полной кастомизации — собственный шорткод с подключением JavaScript-библиотек.

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

Используйте приведённые примеры кода как отправную точку и адаптируйте под свои задачи — так вы сможете создать мощный и удобный функционал динамических таблиц на сайте WordPress.