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

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

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

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

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

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

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

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

function wpunit_create_dynamic_table_shortcode($atts) {
    $data = [
        ['ID' => 1, 'Название' => 'Товар A', 'Цена' => '1000'],
        ['ID' => 2, 'Название' => 'Товар B', 'Цена' => '1500'],
        ['ID' => 3, 'Название' => 'Товар C', 'Цена' => '2000'],
    ];

    $output = '<table border="1" cellpadding="5" cellspacing="0"><thead><tr>';
    // Заголовки
    foreach (array_keys($data[0]) as $header) {
        $output .= '<th>' . esc_html($header) . '</th>';
    }
    $output .= '</tr></thead><tbody>';

    // Строки данных
    foreach ($data as $row) {
        $output .= '<tr>';
        foreach ($row as $cell) {
            $output .= '<td>' . esc_html($cell) . '</td>';
        }
        $output .= '</tr>';
    }

    $output .= '</tbody></table>';
    return $output;
}
add_shortcode('wpunit_table', 'wpunit_create_dynamic_table_shortcode');

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

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

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

Вот пример, как принимать атрибут sort, который определяет сортировку по столбцу:

function wpunit_create_dynamic_table_shortcode($atts) {
    $atts = shortcode_atts([
        'sort' => '',
    ], $atts, 'wpunit_table');

    $data = [
        ['ID' => 1, 'Название' => 'Товар A', 'Цена' => 1000],
        ['ID' => 2, 'Название' => 'Товар B', 'Цена' => 1500],
        ['ID' => 3, 'Название' => 'Товар C', 'Цена' => 2000],
    ];

    if ($atts['sort'] && array_key_exists($atts['sort'], $data[0])) {
        usort($data, function($a, $b) use ($atts) {
            return $a[$atts['sort']] <=> $b[$atts['sort']];
        });
    }

    $output = '<table border="1" cellpadding="5" cellspacing="0"><thead><tr>';
    foreach (array_keys($data[0]) as $header) {
        $output .= '<th>' . esc_html($header) . '</th>';
    }
    $output .= '</tr></thead><tbody>';

    foreach ($data as $row) {
        $output .= '<tr>';
        foreach ($row as $cell) {
            $output .= '<td>' . esc_html($cell) . '</td>';
        }
        $output .= '</tr>';
    }

    $output .= '</tbody></table>';
    return $output;
}
add_shortcode('wpunit_table', 'wpunit_create_dynamic_table_shortcode');

Теперь шорткод [wpunit_table sort=Цена] выведет таблицу, отсортированную по цене. Это уже значительно расширяет функционал без подключения сложных плагинов.

Вывод таблиц из базы данных WordPress

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

Пример: вывести последние 5 записей из блога в таблице.

function wpunit_posts_table_shortcode() {
    global $wpdb;
    $posts = $wpdb->get_results("SELECT ID, post_title, post_date FROM {$wpdb->posts} WHERE post_status = 'publish' AND post_type = 'post' ORDER BY post_date DESC LIMIT 5", ARRAY_A);

    if (empty($posts)) {
        return '<p>Записей не найдено.</p>';
    }

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

    foreach ($posts as $post) {
        $output .= '<tr>';
        $output .= '<td>' . esc_html($post['ID']) . '</td>';
        $output .= '<td><a href="' . get_permalink($post['ID']) . '">' . esc_html($post['post_title']) . '</a></td>';
        $output .= '<td>' . esc_html(date('d.m.Y', strtotime($post['post_date']))) . '</td>';
        $output .= '</tr>';
    }

    $output .= '</tbody></table>';
    return $output;
}
add_shortcode('wpunit_posts_table', 'wpunit_posts_table_shortcode');

Вставляйте шорткод [wpunit_posts_table] в нужное место — и вы получите актуальную таблицу последних постов с ссылками и датами.

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

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

Пример интеграции пагинации с пользовательским запросом:

function wpunit_posts_table_paged_shortcode($atts) {
    global $wpdb, $wp;
    $paged = max(1, get_query_var('paged'));
    $posts_per_page = 5;
    $offset = ($paged - 1) * $posts_per_page;

    $total = $wpdb->get_var("SELECT COUNT(*) FROM {$wpdb->posts} WHERE post_status = 'publish' AND post_type = 'post'");

    $posts = $wpdb->get_results($wpdb->prepare(
        "SELECT ID, post_title, post_date FROM {$wpdb->posts} WHERE post_status = 'publish' AND post_type = 'post' ORDER BY post_date DESC LIMIT %d OFFSET %d",
        $posts_per_page, $offset
    ), ARRAY_A);

    if (empty($posts)) {
        return '<p>Записей не найдено.</p>';
    }

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

    foreach ($posts as $post) {
        $output .= '<tr>';
        $output .= '<td>' . esc_html($post['ID']) . '</td>';
        $output .= '<td><a href="' . get_permalink($post['ID']) . '">' . esc_html($post['post_title']) . '</a></td>';
        $output .= '<td>' . esc_html(date('d.m.Y', strtotime($post['post_date']))) . '</td>';
        $output .= '</tr>';
    }

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

    // Пагинация
    $pages = ceil($total / $posts_per_page);
    if ($pages > 1) {
        $output .= '<div class="wpunit-pagination">';
        for ($i = 1; $i <= $pages; $i++) {
            $class = $i === $paged ? 'class="current"' : '';
            $url = add_query_arg('paged', $i, home_url($wp->request));
            $output .= '<a href="' . esc_url($url) . '" ' . $class . '>' . $i . '</a> ';
        }
        $output .= '</div>';
    }

    return $output;
}
add_shortcode('wpunit_posts_table_paged', 'wpunit_posts_table_paged_shortcode');

Этот код создаёт простую пагинацию без сторонних библиотек. Но если нужен более продвинутый функционал, подключайте ABC Pagination.

Подключение стилей и улучшение внешнего вида таблиц

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

Пример CSS для таблиц:

function wpunit_enqueue_table_styles() {
    wp_register_style('wpunit-table-style', false);
    wp_enqueue_style('wpunit-table-style');
    $custom_css = "
        table.wpunit-table {
            border-collapse: collapse;
            width: 100%;
        }
        table.wpunit-table th, table.wpunit-table td {
            border: 1px solid #ddd;
            padding: 8px;
        }
        table.wpunit-table th {
            background-color: #f4f4f4;
            text-align: left;
        }
        table.wpunit-table tr:nth-child(even) {background-color: #fafafa;}
        table.wpunit-table tr:hover {background-color: #f1f1f1;}
    ";
    wp_add_inline_style('wpunit-table-style', $custom_css);
}
add_action('wp_enqueue_scripts', 'wpunit_enqueue_table_styles');

И в выводе шорткода добавляем класс:

$output = '<table class="wpunit-table">...';

Так таблицы будут выглядеть аккуратно и современно.

Использование плагина Clearfy Pro для оптимизации и безопасности при работе с динамическими таблицами

Когда вы работаете с динамическим выводом данных, важно обеспечить безопасность — защитить сайт от SQL-инъекций, XSS и других угроз. Плагин Clearfy Pro поможет оптимизировать работу сайта, отключить ненужные функции и повысить безопасность, что критично для проектов с кастомным кодом.

Clearfy Pro автоматически отключает лишние REST API эндпоинты, контролирует доступ к административной части и многое другое, что снизит риски при использовании динамических шорткодов и запросов к базе.