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

Хуже того: ваш сайт адаптивен, а HTML-таблицы, нет. На мобильном экране они разъезжаются, требуют горизонтальной прокрутки и ломают весь макет. Добавить интерактивность (фильтры, поиск, редактирование из фронтенда) стандартными средствами WordPress практически невозможно без привлечения разработчика.

wpDataTables, это плагин, который закрывает все эти проблемы одной установкой. Никакого кода, полная адаптивность «из коробки», десятки источников данных и визуализация через диаграммы. Им пользуются больше 80 000 компаний, а бесплатную Lite-версию на WordPress.org установили свыше 60 000 раз. Разбираем, что он умеет и как с ним работать.

💡 Быстрый обзор:

• Установите wpDataTables с CodeCanyon и активируйте на своём сайте.
• Создайте таблицу из CSV, Excel, Google Sheets, MySQL, JSON, XML или вручную, подходит любой источник.
• Настройте внешний вид: цвета, шрифты, выравнивание, адаптивное поведение на мобильных.
• Вставьте готовый шорткод в пост или страницу, таблица появляется сразу с фильтрацией, сортировкой и поиском.
• При необходимости постройте диаграмму на основе той же таблицы и добавьте её тем же способом.

Что не так с HTML-таблицами в WordPress

Стандартный способ вставки таблиц, теги HTML во вкладке «Текст» редактора. Базовая структура выглядит так:

1
<table style="width: 100%;">
2
<tbody>
3
<tr>
4
<th style="width: 33%;">First</th>
5
<th style="width: 34%;">Second</th>
6
<th style="width: 33%;">Third</th>
7
</tr>
8
<tr>
9
<td>Jack</td>
10
<td>Jackson</td>
11
<td>25</td>
12
</tr>
13
<tr>
14
<td>Jane</td>
15
<td>Jenson</td>
16
<td>30</td>
17
</tr>
18
</tbody>
19
</table>

Результат, простейшая таблица на три колонки. Выглядит сносно, если у вас одна такая на сайте и вы не планируете её обновлять.

Но у подхода три фундаментальные проблемы. Первая: HTML-таблицы статичны. Данные вбиты вручную, и каждое изменение означает повторное редактирование кода. Вторая: адаптивность. Тема может быть резиновой, а <table>, нет. На телефоне пользователь видит обрезанные столбцы или горизонтальный скролл. Третья: ни фильтров, ни сортировки, ни поиска, только мёртвая сетка.

Ваш сайт адаптивен. Ваши таблицы, нет.

Ручной импорт данных из Excel или Google Sheets тоже не спасает: копипаст из электронных таблиц в WordPress превращает форматирование в хаос. Если таблиц много и они часто обновляются, вы тратите время не на контент, а на борьбу с вёрсткой.

Создавайте таблицы без кода с wpDataTables

wpDataTables, премиум-плагин, который превращает WordPress в полноценный движок для работы с таблицами и диаграммами. Ни строчки кода. Установили, выбрали источник данных, настроили внешний вид, и таблица готова к вставке шорткодом.

Плагин распространяется через CodeCanyon по модели «купил раз, пользуешься». Цены стартуют с $49 в год за лицензию на один домен (тариф Starter). Есть три старших тарифа: Standard, Pro и Developer, они отличаются количеством доменов и набором продвинутых функций вроде подключения к нескольким базам данных и WooCommerce-интеграции. Бесплатная Lite-версия доступна в каталоге WordPress.org с базовым функционалом.

🔗 Подробнее о wpDataTables | 🔗 Живая демонстрация

Разработчики сделали ставку на три вещи: гибкость источников, глубокую кастомизацию и работу с живыми данными. Пройдём по ключевым возможностям.

Множественные источники данных

Плагин забирает данные откуда угодно. Excel, CSV, Google Sheets, XML, JSON, сериализованный PHP-массив и прямой MySQL-запрос, всё это доступно на этапе создания таблицы. Можно вручную заполнить таблицу с нуля через бэкенд-редактор. Или подключиться к источнику в реальном времени, чтобы таблица динамически обновлялась при каждой загрузке страницы.

Отдельного упоминания заслуживает MySQL. Вы пишете запрос, плагин рендерит результат как сортируемую таблицу с поиском. Поддерживаются отдельные подключения к MS SQL и PostgreSQL, причём каждая таблица может тянуть данные из своего сервера. Для проектов с распределённой архитектурой это решает проблему консолидации данных без промежуточного ETL.

Расширенная настройка и адаптивная вёрстка

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

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

Фильтры для эффективного поиска

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

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

Редактирование MySQL из фронтенда

Уникальная фича: включив опцию на вкладке «Редактирование», вы разрешаете пользователям править данные прямо из фронтенда сайта. Это не просто косметика, изменения пишутся в базу данных. Доступ настраивается по ролям: всем посетителям, только зарегистрированным пользователям или конкретным группам.

Сценариев масса: клиенты обновляют свои записи в CRM-таблице, сотрудники отмечают статусы задач, подписчики дополняют общий реестр. Без отдельной админки, без обучения пользователей WordPress.

Визуализация через диаграммы

Человек считывает визуализацию в разы быстрее табличных цифр. wpDataTables строит динамические диаграммы на базе Google Charts, HighCharts или Chart.js, вы просто указываете таблицу-источник и сопоставляете столбцы с осями графика.

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

Как создать адаптивную таблицу: пошаговая инструкция

Теория понятна, переходим к практике. Три шага отделяют вас от работающей таблицы на сайте.

Шаг 1: установите wpDataTables

Плагин покупается на CodeCanyon. После оплаты зайдите в раздел «Downloads» вашего аккаунта, найдите wpDataTables и скачайте файл с пометкой «Installable WordPress file only». В админке WordPress перейдите в «Плагины → Добавить новый → Загрузить плагин», выберите скачанный ZIP и активируйте.

Для автообновлений потребуется ввести Item Purchase Code из CodeCanyon. Он же понадобится для доступа к премиум-поддержке в течение первого года после покупки.

Шаг 2: создайте таблицу

В боковом меню WordPress появится новый пункт «wpDataTables». Нажмите на него, затем, синюю кнопку «Добавить». Плагин предложит выбрать способ создания таблицы: импорт из CSV/Excel, подключение к Google Sheets, создание вручную, SQL-запрос или связка с внешним API.

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

Последний экран, тонкая настройка. Здесь включаются инструменты таблицы (печать, копирование, экспорт в PDF/Excel), фильтрация, внешнее редактирование. Все изменения отображаются в живом превью справа. Нажали «Сохранить», таблица готова.

Шаг 3: вставьте шорткод в пост или страницу

После сохранения плагин выдаст шорткод вида [wpdatatable id=X]. Скопируйте его и вставьте в любой пост или страницу WordPress, на этом всё. Таблица появится на сайте со всеми включёнными функциями: сортировкой, поиском, фильтрами.

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

Как построить диаграмму на основе таблицы

Когда таблица готова, откройте её в списке и нажмите «Создать диаграмму». Выберите тип визуализации: столбчатую, круговую, линейную, точечную, всего доступно более десятка вариантов.

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

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

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

Расширения для дополнительных возможностей

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

Мощные фильтры. Каскадная фильтрация (слева направо: выбрали категорию, фильтр подкатегорий обновился), фасетный поиск, скрытие таблицы до выбора параметров и живой поиск по мере ввода. Включается одной галочкой в настройках.

Конструктор отчётов формирует документы Word или Excel прямо из табличных данных. Сценарий: сотрудники заполнили таблицу через фронтенд, вы нажали кнопку, готовый месячный отчёт для распечатки. Полезно для табелей, счетов и регулярной аналитики.

Formidable Forms. Формы собирают данные от пользователей, плагин автоматически превращает каждую отправку в строку таблицы. Поле формы, колонка таблицы. Никакого промежуточного экспорта.

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

План подписки и цены

У wpDataTables простая ценовая сетка из четырёх уровней:

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

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

Для быстрого старта есть бесплатная Lite-версия на WordPress.org (60 000+ активных установок). Функционал ограничен, но достаточен, чтобы понять, подходит ли плагин под вашу задачу.

⁉️🤔 Частые вопросы

Обязательно ли уметь программировать для работы с wpDataTables?

Нет, все таблицы и диаграммы создаются через визуальный интерфейс, мастер проведёт от выбора источника до вставки шорткода. Поля для пользовательского JS и CSS есть, но они опциональны. Разработчики оценят возможность писать свои SQL-запросы, подключаться к внешним базам данных и использовать REST API для получения данных из сторонних сервисов.

Что происходит с таблицами после удаления плагина?

По умолчанию таблицы сохраняются в базе данных, даже если вы деактивируете или удалите wpDataTables. При повторной установке они восстановятся. Это настраивается: в опциях можно выбрать полное удаление данных вместе с плагином. Таблицы не привязаны к плагину намертво, вы всегда можете экспортировать данные в CSV и перенести их в другой инструмент.

Чем платная версия отличается от Lite?

Lite-версия позволяет создавать таблицы из CSV, Excel, Google Sheets, JSON и XML, а также вручную. Доступна базовая сортировка и поиск. Но отсутствуют: MySQL-запросы, подключение к нескольким базам данных, диаграммы, внешнее редактирование, фильтрация, WooCommerce-интеграция и все дополнения. Если вы управляете данными из внешних источников и хотите строить диаграммы, нужна платная версия. Для статичных таблиц Lite, скорее всего, хватит.

Поддерживает ли плагин WooCommerce?

Да, начиная с тарифа Standard. Можно создавать динамические таблицы товаров, которые автоматически обновляются при изменении каталога WooCommerce. Покупатели получают сортируемый, фильтруемый список продуктов с актуальными ценами и остатками. Для магазинов с большим ассортиментом это заменяет отдельный плагин каталога.

Сколько таблиц можно создать?

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

Что ставить под вашу задачу

wpDataTables закрывает весь спектр работы с таблицами в WordPress, от простого вывода CSV-файла до распределённых запросов к базам данных с визуализацией на графиках. И он делает это без требования писать код, что для WordPress-экосистемы редкость.

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

Плагин платный, но с бесплатным тест-драйвом в песочнице и Lite-версией для базовых сценариев. Стартовый тариф в $49 в год сопоставим с часом-двумя работы верстальщика и даёт инструмент на год вперёд.

🔗 Скачать Lite-версию с WordPress.org