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

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

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

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

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

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

Рассмотрим пример создания простого плагина или кода в functions.php темы, который регистрирует шорткод [wpbuy_table]. Этот шорткод будет выводить таблицу с данными из массива.

function wpbuy_create_dynamic_table($atts) {
    // Атрибуты шорткода с значениями по умолчанию
    $atts = shortcode_atts(array(
        'cols' => 3,
        'rows' => 5
    ), $atts, 'wpbuy_table');

    $cols = intval($atts['cols']);
    $rows = intval($atts['rows']);

    // Генерируем пример данных
    $data = array();
    for ($r = 1; $r <= $rows; $r++) {
        $row = array();
        for ($c = 1; $c <= $cols; $c++) {
            $row[] = "Ячейка {$r}-{$c}";
        }
        $data[] = $row;
    }

    // Формируем HTML таблицы
    $output = '<table class="wpbuy-dynamic-table"><thead><tr>';

    for ($c = 1; $c <= $cols; $c++) {
        $output .= "<th>Заголовок {$c}</th>";
    }
    $output .= '</tr></thead><tbody>';

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

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

    // Можно добавить стили для таблицы
    $output .= '<style>
.wpbuy-dynamic-table {
  border-collapse: collapse;
  width: 100%;
  max-width: 600px;
}
.wpbuy-dynamic-table th, .wpbuy-dynamic-table td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: center;
}
.wpbuy-dynamic-table th {
  background-color: #f4f4f4;
}
</style>';

    return $output;
}
add_shortcode('wpbuy_table', 'wpbuy_create_dynamic_table');

Этот код создаёт шорткод, который выводит таблицу с заданным числом столбцов и строк. Параметры cols и rows можно передавать при использовании шорткода, например: [wpbuy_table cols="4" rows="6"].

Расширение функциональности: загрузка данных из JSON-файла

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

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

function wpbuy_create_table_from_json($atts) {
    $atts = shortcode_atts(array(
        'file' => 'data.json'
    ), $atts, 'wpbuy_json_table');

    $filepath = get_stylesheet_directory() . '/' . sanitize_file_name($atts['file']);

    if (!file_exists($filepath)) {
        return '<div>Файл с данными не найден.</div>';
    }

    $json_data = file_get_contents($filepath);
    $data = json_decode($json_data, true);

    if (empty($data) || !is_array($data)) {
        return '<div>Данные некорректны или пусты.</div>';
    }

    // Предполагаем, что данные - массив массивов
    $output = '<table class="wpbuy-json-table"><thead><tr>';

    // Заголовки берем из ключей первого элемента
    $headers = array_keys($data[0]);
    foreach ($headers 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>';

    $output .= '<style>
.wpbuy-json-table {
  border-collapse: collapse;
  width: 100%;
  max-width: 700px;
  margin-top: 20px;
}
.wpbuy-json-table th, .wpbuy-json-table td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: left;
}
.wpbuy-json-table th {
  background-color: #e7e7e7;
}
</style>';

    return $output;
}
add_shortcode('wpbuy_json_table', 'wpbuy_create_table_from_json');

Для работы создайте в папке вашей темы файл data.json с содержимым, например:

[
  {"Имя": "Иван", "Возраст": 28, "Город": "Москва"},
  {"Имя": "Мария", "Возраст": 24, "Город": "Санкт-Петербург"},
  {"Имя": "Пётр", "Возраст": 31, "Город": "Новосибирск"}
]

Вызовите шорткод [wpbuy_json_table file="data.json"] в любом месте сайта — получите аккуратную таблицу с данными.

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

Если нужна более сложная работа с таблицами — сортировка, фильтры, пагинация — можно использовать готовые плагины. Например, TablePress — один из самых популярных и мощных.

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

Пример использования TablePress с wpbuy.ru

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

Заключение по работе с динамическими таблицами

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

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