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

Автор: Владимир Панин | Опубликовано: 09.01.2026

Введение в динамические таблицы в WordPress

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

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

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

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

function wpcat_dynamic_table_shortcode($atts, $content = null) {
    // Пример данных для таблицы — можно заменить на динамические данные
    $data = [
        ['Имя', 'Возраст', 'Город'],
        ['Иван', '30', 'Москва'],
        ['Ольга', '25', 'Санкт-Петербург'],
        ['Петр', '40', 'Новосибирск'],
    ];

    $html = '<table border="1" cellpadding="5" cellspacing="0">';

    foreach ($data as $rowIndex => $row) {
        $html .= '<tr>';
        foreach ($row as $cell) {
            if ($rowIndex === 0) {
                // Первая строка - заголовок таблицы
                $html .= '<th>' . esc_html($cell) . '</th>';
            } else {
                $html .= '<td>' . esc_html($cell) . '</td>';
            }
        }
        $html .= '</tr>';
    }

    $html .= '</table>';
    return $html;
}
add_shortcode('wpcat_table', 'wpcat_dynamic_table_shortcode');

Этот шорткод [wpcat_table] можно вставить в любой пост или страницу, и он выведет простую таблицу с заголовками.

Расширяем функциональность: передача данных через атрибуты шорткода

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

Рассмотрим пример с передачей JSON через атрибут data:

function wpcat_dynamic_table_shortcode($atts) {
    $atts = shortcode_atts([
        'data' => '',
    ], $atts, 'wpcat_table');

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

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

    $html = '<table border="1" cellpadding="5" cellspacing="0" style="border-collapse: collapse; width: 100%;">';
    foreach ($data as $rowIndex => $row) {
        $html .= '<tr>';
        foreach ($row as $cell) {
            if ($rowIndex === 0) {
                $html .= '<th style="background: #f2f2f2;">' . esc_html($cell) . '</th>';
            } else {
                $html .= '<td>' . esc_html($cell) . '</td>';
            }
        }
        $html .= '</tr>';
    }
    $html .= '</table>';

    return $html;
}
add_shortcode('wpcat_table', 'wpcat_dynamic_table_shortcode');

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

[wpcat_table data="[["Имя","Профессия"],["Анна","Дизайнер"],["Максим","Разработчик"]]"]

Обратите внимание, что JSON нужно экранировать для корректной передачи в атрибут.

Вывод данных из пользовательских полей и метаполей

Очень часто данные для таблиц берутся из метаполей записи или пользовательских полей, особенно если используется Advanced Custom Fields (ACF) или стандартные функции WordPress.

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

function wpcat_scores_table_shortcode($atts) {
    global $post;

    $scores = get_post_meta($post->ID, 'wpcat_scores', true);
    if (empty($scores) || !is_array($scores)) {
        return '<p>Данные для таблицы отсутствуют.</p>';
    }

    $html = '<table border="1" cellpadding="5" cellspacing="0" style="border-collapse: collapse; width: 100%;">';
    $html .= '<tr><th>Критерий</th><th>Оценка</th></tr>';

    foreach ($scores as $criterion => $score) {
        $html .= '<tr><td>' . esc_html($criterion) . '</td><td>' . esc_html($score) . '</td></tr>';
    }

    $html .= '</table>';

    return $html;
}
add_shortcode('wpcat_scores_table', 'wpcat_scores_table_shortcode');

Используйте шорткод [wpcat_scores_table] в записи, чтобы вывести таблицу с оценками из метаполя.

Оптимизация и стилизация таблиц — лучшие практики

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

Пример добавления базовых стилей для таблицы:

$html = '<table style="border-collapse: collapse; width: 100%;">';
// Добавляем стили к ячейкам
$html .= '<style>
  table.wpcat-table {border: 1px solid #ddd;}
  table.wpcat-table th, table.wpcat-table td {padding: 8px; border: 1px solid #ddd; text-align: left;}
  table.wpcat-table th {background-color: #f9f9f9;}
  @media (max-width: 600px) {
    table.wpcat-table, thead, tbody, th, td, tr {display: block;}
    th {position: absolute; top: -9999px; left: -9999px;}
    td {border: none; position: relative; padding-left: 50%;}
    td:before {content: attr(data-label); position: absolute; left: 6px; font-weight: bold;}
  }
</style>';

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

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

Если нужна более сложная функциональность — фильтрация, сортировка, пагинация — стоит обратить внимание на специализированные плагины, например:

WP Data Tables — мощный плагин для создания и управления таблицами с интерфейсом.
TablePress — один из самых популярных бесплатных плагинов с расширенными возможностями.

Если вы хотите автоматизировать создание таблиц из данных сайта, можно синхронизировать свои шорткоды с такими плагинами или использовать их API.

Выводы и рекомендации

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

Пример кода из статьи можно взять за основу и дополнять под свои задачи — подгружая данные из базы, внешних API или кастомных полей. Это дает гибкость и расширяемость вашего WordPress-сайта.

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