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

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

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

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

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

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

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

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

Добавьте в файл functions.php вашей темы или в собственный плагин следующий код:

function wp3_dynamic_table_shortcode() {
  $data = [
    ['Имя', 'Возраст', 'Город'],
    ['Алексей', 29, 'Москва'],
    ['Марина', 34, 'Санкт-Петербург'],
    ['Иван', 42, 'Новосибирск'],
  ];

  $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('wp3_table', 'wp3_dynamic_table_shortcode');

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

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

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

Обновим функцию:

function wp3_dynamic_table_shortcode($atts) {
  $atts = shortcode_atts([
    'headers' => 'Имя,Возраст,Город',
    'data' => '', // JSON-массив строк
  ], $atts, 'wp3_table');

  $headers = explode(',', $atts['headers']);
  $rows = json_decode($atts['data'], true);

  if (!is_array($rows)) {
    $rows = [
      ['Алексей', 29, 'Москва'],
      ['Марина', 34, 'Санкт-Петербург'],
      ['Иван', 42, 'Новосибирск'],
    ];
  }

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

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

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

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

[wp3_table headers="Имя,Профессия,Город" data="[["Ольга","Дизайнер","Казань"],["Пётр","Программист","Екатеринбург"]]"]

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

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

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

• TablePress — самый популярный бесплатный плагин с удобным интерфейсом и поддержкой шорткодов. Позволяет импортировать таблицы из Excel и CSV, применять сортировку и фильтры.
• wpDataTables — мощный премиум-плагин для больших данных с поддержкой различных источников, включая MySQL, Excel, Google Sheets.
• Data Tables Generator by Supsystic — бесплатный и премиум плагин с функциями сортировки, поиска и стилизации.

Для примера рассмотрим интеграцию TablePress с вашим сайтом:

1. Установите и активируйте плагин через админку WordPress.

2. Создайте новую таблицу и импортируйте данные или добавьте вручную.

3. Вставьте шорткод, например: [table id=1 /] в нужное место на сайте.

TablePress также поддерживает расширения, например, для экспорта в PDF, добавления формул и т.д.

Автоматическое обновление таблиц с помощью внешних источников и WP Cron

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

Пример функции для импорта CSV из URL и обновления данных TablePress программно:

function wp3_update_tablepress_from_csv() {
  $csv_url = 'https://example.com/data.csv';
  $response = wp_remote_get($csv_url);
  if (is_wp_error($response)) {
    return;
  }
  $csv = wp_remote_retrieve_body($response);
  if (!$csv) {
    return;
  }

  // Преобразуем CSV в массив
  $rows = array_map('str_getcsv', explode("\n", $csv));

  // Формируем контент для TablePress
  $content = '';
  foreach ($rows as $row) {
    $content .= implode(',', $row) . "\n";
  }

  // Обновляем таблицу с ID 1
  if (class_exists('TablePress_Model_Table')) {
    $table = TablePress_Model_Table::load(1);
    $table['data'] = $rows;
    TablePress_Model_Table::save($table);
  }
}

// Запускаем обновление раз в сутки
if (!wp_next_scheduled('wp3_daily_table_update')) {
  wp_schedule_event(time(), 'daily', 'wp3_daily_table_update');
}
add_action('wp3_daily_table_update', 'wp3_update_tablepress_from_csv');

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

Тонкости стилизации таблиц и адаптивность

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

Пример минимального CSS для горизонтальной прокрутки:

.wp3-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.wp3-table-wrapper table {
  width: 100%;
  border-collapse: collapse;
}

Оборачивайте таблицу в див с классом wp3-table-wrapper для применения стилей.

Итоговые рекомендации по работе с динамическими таблицами в WordPress

• Используйте шорткоды для удобного вставления таблиц в контент.
• Для небольших и простых таблиц достаточно кастомных функций с параметрами.
• Для сложных таблиц с фильтрами и большими объемами данных — плагин TablePress или wpDataTables.
• Автоматизируйте обновление таблиц, если данные меняются часто, используя WP Cron и API.
• Обязательно стилизуйте таблицы для корректного отображения на мобильных устройствах.

Для расширения функционала и интеграции с вашим сайтом рекомендуем ознакомиться с плагином WPRemark для комментариев и ABC Pagination для удобной навигации по страницам с таблицами.