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

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

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

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

Основные преимущества динамических таблиц:

• Автоматическое обновление контента без правок вручную
• Возможность фильтрации и сортировки данных пользователем
• Интеграция с базой данных и внешними сервисами

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

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

function wpdeveloper_dynamic_table_shortcode() {
    $data = [
        ['Имя', 'Возраст', 'Профессия'],
        ['Иван', 28, 'Разработчик'],
        ['Мария', 34, 'Дизайнер'],
        ['Пётр', 22, 'Тестировщик'],
    ];

    $output = '<table border="1" cellpadding="5" cellspacing="0">';
    foreach ($data as $rowIndex => $row) {
        $tag = $rowIndex === 0 ? 'th' : 'td';
        $output .= '<tr>';
        foreach ($row as $cell) {
            $output .= "<" . $tag . ">" . esc_html($cell) . "</" . $tag . ">";
        }
        $output .= '</tr>';
    }
    $output .= '</table>';

    return $output;
}
add_shortcode('wpdeveloper_table', 'wpdeveloper_dynamic_table_shortcode');

Теперь при вставке в запись шорткода [wpdeveloper_table] вы получите простую таблицу с заданными данными.

Добавление параметров шорткода для гибкости вывода

Чтобы таблица была более универсальной, добавим возможность передавать данные через параметры шорткода. Например, список пользователей в формате JSON.

function wpdeveloper_dynamic_table_shortcode($atts) {
    $atts = shortcode_atts([
        'data' => '',
    ], $atts, 'wpdeveloper_table');

    if (empty($atts['data'])) {
        return '<p>Данные для таблицы не переданы.</p>';
    }

    $data = json_decode(htmlspecialchars_decode($atts['data']), true);
    if (json_last_error() !== JSON_ERROR_NONE || !is_array($data)) {
        return '<p>Неверный формат данных.</p>';
    }

    $output = '<table border="1" cellpadding="5" cellspacing="0">';
    foreach ($data as $rowIndex => $row) {
        $tag = $rowIndex === 0 ? 'th' : 'td';
        $output .= '<tr>';
        foreach ($row as $cell) {
            $output .= "<" . $tag . ">" . esc_html($cell) . "</" . $tag . ">";
        }
        $output .= '</tr>';
    }
    $output .= '</table>';

    return $output;
}
add_shortcode('wpdeveloper_table', 'wpdeveloper_dynamic_table_shortcode');

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

[wpdeveloper_table data='[["Имя","Возраст","Профессия"],["Анна",30,"Менеджер"],["Олег",25,"Программист"]]']

Такой подход позволяет формировать таблицы из произвольных данных без правки PHP-кода.

Вывод данных из базы WordPress в таблицу с шорткодом

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

Рассмотрим пример вывода списка пользователей с их ролями:

function wpdeveloper_users_table_shortcode() {
    $users = get_users();

    $output = '<table border="1" cellpadding="5" cellspacing="0">';
    $output .= '<tr><th>Имя пользователя</th><th>Электронная почта</th><th>Роль</th></tr>';

    foreach ($users as $user) {
        $roles = implode(', ', $user->roles);
        $output .= '<tr>';
        $output .= '<td>' . esc_html($user->display_name) . '</td>';
        $output .= '<td>' . esc_html($user->user_email) . '</td>';
        $output .= '<td>' . esc_html($roles) . '</td>';
        $output .= '</tr>';
    }

    $output .= '</table>';

    return $output;
}
add_shortcode('wpdeveloper_users_table', 'wpdeveloper_users_table_shortcode');

Вставьте [wpdeveloper_users_table] в любое место контента, чтобы получить актуальный список пользователей.

Использование плагина ABC Pagination для постраничной навигации таблиц

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

Пример интеграции с постраничной навигацией:

function wpdeveloper_paginated_table_shortcode($atts) {
    $atts = shortcode_atts([
        'posts_per_page' => 10,
        'paged' => get_query_var('paged') ? get_query_var('paged') : 1,
    ], $atts, 'wpdeveloper_paginated_table');

    $args = [
        'post_type' => 'post',
        'posts_per_page' => intval($atts['posts_per_page']),
        'paged' => intval($atts['paged']),
    ];

    $query = new WP_Query($args);
    
    if (!$query->have_posts()) {
        return '<p>Нет записей для отображения.</p>';
    }

    $output = '<table border="1" cellpadding="5" cellspacing="0">';
    $output .= '<tr><th>Заголовок</th><th>Дата</th></tr>';

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

    $output .= '</table>';

    $output .= abc_pagination(['query' => $query]);

    wp_reset_postdata();
    return $output;
}
add_shortcode('wpdeveloper_paginated_table', 'wpdeveloper_paginated_table_shortcode');

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

Заключение: расширяем возможности динамических таблиц

Динамические таблицы с помощью шорткодов — мощный инструмент, который можно адаптировать под любые задачи. Можно добавить сортировку столбцов через JavaScript, подключить AJAX для обновления данных без перезагрузки страницы или интегрировать с внешними API.

Например, для сортировки можно использовать библиотеку jQuery Tablesorter, а для AJAX-запросов — написать обработчики в WordPress с помощью хуков wp_ajax_.

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