Лучший плагин для таблиц и диаграмм WordPress?

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

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

Или, с помощью нового простого конструктора таблиц, вы можете создавать простые визуальные таблицы, такие как таблицы сравнения продуктов или таблицы цен.

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

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

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

Примечание . Первоначально мы опубликовали этот обзор в 2018 году, но полностью обновили его в октябре 2021 года, чтобы учесть новые функции и изменения в интерфейсе wpDataTables.

Обзор wpDataTables: краткий обзор возможностей

Во-первых, все таблицы и диаграммы, которые вы создаете с помощью wpDataTables , являются адаптивными. Я знаю — «отзывчивость» на самом деле не является чем-то привлекательным в 2021 году. Но вы будете удивлены количеством плагинов для таблиц, которые плохо справляются с адаптивным дизайном, так что на самом деле это довольно большое преимущество. Вы можете настроить свои собственные контрольные точки и скрыть определенные столбцы на планшетах/мобильных устройствах.

Еще одна вещь, которая вам понравится в wpDataTables, — это то, сколько способов он дает вам для создания таблиц и/или импорта контента. Вы можете:

• Создание таблиц с нуля
• Свяжите таблицу с внешним источником , таким как Excel, Google Таблицы, JSON, запрос SQL, массив PHP и т . д. Данные будут обновляться по мере изменения исходного файла .
• Импорт из внешнего источника , например Excel или Google Sheets. В отличие от предыдущего, это одноразовый импорт . Данные не синхронизируются.
• Используйте построитель запросов к базе данных, чтобы добавить содержимое WordPress в свою таблицу, например сообщения, таксономии, метаданные и т. д.
• Используйте запрос MySQL для извлечения данных из собственной внешней базы данных .

Хотя я не уверен, как это проверить, wpDataTables утверждает, что он может обрабатывать большие таблицы, даже с миллионами строк.

Чтобы редактировать данные таблицы, вы можете использовать редактор, похожий на Excel, где вы просто щелкаете и вводите данные в поля. Или вы можете использовать «стандартный» редактор, который позволяет редактировать целые строки во всплывающем окне.

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

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

• Условное форматирование
• Редактирование таблицы во внешнем интерфейсе
• Параметры сортировки
• Функциональность фильтра (включая специальный виджет)
• Вариант поиска
• Параметры внешнего интерфейса для экспорта таблиц в Excel или CSV
• Параметры внешнего интерфейса для печати таблицы

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

• Линейный график
• Гистограмма
• Столбчатая диаграмма
• Диаграмма с областями
• Круговая диаграмма
• Кольцевая диаграмма
• Гистограмма
• Калибровочная диаграмма
• Точечная диаграмма
• Свечной график

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

Практические занятия с wpDataTables: восемь вещей, которые вам понравятся

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

1. Мастер конструктора таблиц

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

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

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

Для этого метода вы просто вставляете URL-адрес:

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

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

2. Два разных табличных редактора для данных, включая Excel-подобный редактор

В дополнение к простому конструктору таблиц для визуальных таблиц ( которым я поделюсь с вами позже ), wpDataTables предоставляет вам два разных редактора для работы с данными:

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

Вот как работает Excel-подобный редактор — чтобы отредактировать поле, вы можете просто дважды щелкнуть и ввести текст ( точно так же, как в Excel ):

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

Вы также можете открыть представление списка столбцов, которое позволяет быстро настраивать столбцы или сортировать/фильтровать данные:

А вот как работает стандартный редактор:

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

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

3. Подробные настройки столбцов

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

• Типы данных
• Пользовательские классы CSS
• Разрешить ли сортировку
• Разрешить ли фильтрацию. Если да, то как использовать фильтрацию
• Условное форматирование. Например, вы можете добавить пользовательский класс CSS на основе данных ячейки ( это действительно очень похоже на условное форматирование в Excel или Google Sheets ).

4. Подробные общие настройки таблицы

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

Здесь вы можете контролировать:

• Общетабличные настройки фильтров, сортировки и поиска.
• Редактирование внешнего интерфейса — могут ли люди редактировать таблицу с внешнего интерфейса.
• Табличные инструменты — они позволяют пользователям распечатать вашу таблицу или экспортировать ее в Excel/CSV.

И здесь же вы можете включить возможность скрывать определенные столбцы на разных устройствах:

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

В недавнем выпуске wpDataTables также была добавлена ​​новая вкладка « Настроить », которая позволяет настраивать дизайн ваших таблиц. Начать можно с выбора базовой «скины». Затем вы можете использовать другие параметры для управления цветами, типографикой, границами и другими параметрами:

5. Создайте диаграмму из таблицы

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

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

• Google диаграммы
• HighCharts
• Chart.js

Затем вы можете выбрать тип диаграммы для создания из типов, поддерживаемых выбранным вами механизмом визуализации. Например, в Google Charts вы можете выбрать один из 14 различных типов диаграмм:

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

Затем вы можете точно выбрать, какие данные в этой таблице использовать.

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

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

Как только вы выберете, какие данные использовать, wpDataTables предоставит вам предварительный просмотр вашей диаграммы в реальном времени, а также параметры для управления:

• Ширина адаптивной диаграммы
• Группировка
• Цвета
• Границы
• Этикетки
• Некоторые другие более мелкие настройки

Когда вы довольны своими настройками, wpDataTables выдает шорткод, который вы можете использовать в любом месте на своем сайте. Или вы также можете использовать специальный блок.

6. Специальный виджет фильтра

Если вы не хотите включать параметры фильтра над таблицей, wpDataTables также поставляется с собственным специальным виджетом фильтра, который вы можете разместить в любой области виджетов. Это работает как с классической системой виджетов WordPress, так и с новым блочным редактором виджетов.

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

7. Множество глобальных настроек

Помимо настроек, специфичных для таблицы/диаграммы, wpDataTables также предоставляет множество параметров в области wpDataTables → Settings . Здесь вы можете настроить такие вещи, как:

• Разбирать или нет шорткоды в таблицах
• Отзывчивые точки останова
• Цвета
• Шрифты
• Пользовательские CSS и JavaScript
• Отдельные подключения к базе данных

8. Новый простой конструктор таблиц для визуальных таблиц

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

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

• Объединенные ячейки
• Стайлинг
• Звездные рейтинги
• И так далее

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

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

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

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

Краткий обзор других методов импорта данных диаграммы

Выше я показал вам, как импортировать данные из таблицы Google Sheets. Но одна из замечательных особенностей wpDataTables заключается в том, насколько он гибок, когда дело доходит до импорта данных.

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

Конструктор запросов

Построитель запросов позволяет запрашивать:

• Данные из базы данных вашего сайта WordPress (сообщения, таксономии и т. д.)
• Любые данные из внешней базы данных MySQL

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

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

Синхронизация с внешним источником

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

Здесь вы можете выбрать из целого ряда источников:

• SQL-запрос
• CSV-файл
• Файл Excel
• Таблица Google
• XML-файл
• JSON-файл
• Сериализованный массив PHP

Создание таблицы вручную

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

Затем вы можете ввести свои данные с помощью редактора, подобного Excel, или стандартного редактора.

Цены на wpDataTables: ограниченная бесплатная версия / Pro от 59 долларов.

На WordPress.org есть ограниченная версия wpDataTables. Однако это именно так – «ограничено». Вы можете использовать его для простых таблиц с помощью простого построителя таблиц, но на самом деле это не вариант для серьезных таблиц данных.

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

Однако, где wpDataTables действительно сияет, так это в премиум-версии.

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

• Один сайт — 59 долларов за годовую лицензию или 189 долларов за пожизненную лицензию.
• Три сайта — 109 долларов за лицензию на один год или 389 долларов за пожизненную лицензию.
• Неограниченное количество сайтов — 249 долларов за годовую лицензию или 589 долларов за пожизненную лицензию.

Вы также можете сэкономить деньги с нашим эксклюзивным кодом купона wpDataTables.

Примечание . Обязательно приобретайте прямо на веб-сайте разработчика. В прошлом wpDataTables продавались исключительно через торговую площадку Envato CodeCanyon. Разработчик по-прежнему поддерживает страницу со списком на CodeCanyon, но цена намного выше, чем при покупке напрямую у разработчика, поэтому мы не рекомендуем больше использовать CodeCanyon.

Обзор wpDataTables: наши последние мысли

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

Он гибкий в том, как вы импортируете данные таблицы. А интерфейс делает то, что может быть сложным процессом, на удивление простым.

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

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

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

Единственным недостатком является то, что бесплатная версия wpDataTables на WordPress.org довольно ограничена, поэтому вам нужно будет заплатить за премиум-версию, чтобы получить доступ к большинству функций.

С учетом сказанного, если вы готовы платить за версию Pro, вам определенно стоит подумать об этом.

И если вы хотите увидеть другие варианты работы с таблицами в WordPress, ознакомьтесь с нашим руководством по TablePress.

Получить wpDataTables

️ Не забудьте использовать наш эксклюзивный купон wpDataTables, чтобы получить скидку 20%.

У вас остались вопросы о wpDataTables или нашем обзоре wpDataTables? Дайте нам знать в разделе комментариев.