Создавать таблицы в WordPress очень просто. Существуют традиционные способы добавления таблиц в WordPress с помощью кода, но, безусловно, наиболее удобный способ создания таблицы (или диаграммы) – это плагин wpDataTables WordPress. Это позволяет очень легко импортировать таблицу из различных внешних источников, оформить ее по своему вкусу и добавить на свой веб-сайт.

Базовые таблицы HTML

Вы можете добавлять таблицы в WordPress, используя стандартные теги таблиц HTML. Они довольно просты и используют следующую базовую структуру (просто не забудьте ввести их во вкладке «Текст» при создании сообщения):

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

Первый	Второй	В третьих
Джек	Джексон	25
Просто	Дженсон	30

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

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

Если вы используете WordPress, мы можем с уверенностью предположить, что 1) вы используете последнюю версию WordPress и 2) ваша тема адаптивна. Когда вы используете тег HTML table для вставки таблиц на свой сайт WordPress, вы потратите много времени на настройку макета.

Ваш сайт может быть отзывчивым, но ваши таблицы – нет.

Это, естественно, нарушит отзывчивость вашего сайта. Добавление данных на ваш сайт также может быть проблемой. Программное обеспечение для обработки электронных таблиц, такое как Google Spreadsheets или Microsoft Excel, имеет множество инструментов для импорта данных из базы данных. Но когда вы набираете каждый символ – это не очень продуктивно.

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

Создавайте лучшие таблицы с помощью wpDataTables

Для создания таблиц с помощью WordPress мы настоятельно рекомендуем wpDataTables. Этот полностью отзывчивый плагин премиум-класса позволяет легко создавать, настраивать и управлять таблицами и диаграммами в WordPress – без программирования. Просто установите и начинайте строить таблицы и диаграммы! Нам доверяют более 14 300 человек (и ранее он назывался одним из наших плагинов месяца для WordPress), это, по нашему скромному мнению, просто один из лучших способов добавить таблицы на ваш веб-сайт на базе WordPress.

Подробнее о wpDataTables Посмотреть живую демонстрацию

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

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

В зависимости от того, где вы предпочитаете хранить свои данные, wpDataTables позволяет импортировать из множества различных источников. Выберите для импорта данных Excel, CSV, Google Doc, XML, JSON, сериализованный массив PHP или запрос MySQL. Существуют также варианты создания новой таблицы вручную, ссылки на источник данных в реальном времени (который до динамического обновления вашей таблицы при загрузке ее на странице) или создания настраиваемого запроса с помощью инструмента GUI (графический пользовательский интерфейс).

Запрос MySQL – мой личный фаворит, поскольку он позволяет мне просматривать и изменять данные из соответствующей базы данных. wpDataTables поддерживает отдельные подключения к базе данных для баз данных MS SQL и PostgreSQL, а также возможность добавления нескольких отдельных подключений к базе данных. Таблицы могут извлекать данные из нескольких баз данных и серверов. Если у вас есть команда разработчиков, работающих над настольным проектом, это упростит совместную работу (подробнее об этом позже)!

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

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

Также есть встроенные параметры для языка интерфейса, форматирования времени / даты, выравнивания, пользовательского JS / CSS и многого другого. О, и я упоминал, что плагин тоже адаптируется к мобильным устройствам? Вы можете установить, сколько места будет занимать стол, независимо от размера экрана!

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

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

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

Редактировать базу данных MySQL из Frontend

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

Визуализируйте данные с помощью диаграмм

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

wpDataTables помогает создавать динамические диаграммы (с помощью Google Charts, HighCharts или Chart.js) для визуализации данных таблицы. Это особенно полезно для таблиц с большим количеством числовых данных, например, блоггеры публикуют свои ежемесячные отчеты о доходах.

Постоянные обновления

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

Подробная документация

Разработчик не оставляет камня на камне, когда дело доходит до объяснения того, как использовать wpDataTables. Существует обширная онлайн-документация и видеоуроки, которые помогут вам понять все возможности плагина!

Это говорит нам о двух вещах:

Разработчик заботится о своих покупателях – чтобы они вернулись за продуктом.
Знающий клиент = меньше сбоев = меньше билетов в службу поддержки = счастливые клиенты

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

Как создать адаптивную таблицу с помощью wpDataTables

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

1 Установите wpDataTables.

Я знаю, что это должно быть очевидным, но сначала вам нужно установить wpDataTables. Поскольку это плагин премиум-класса, его необходимо приобрести и загрузить с CodeCanyon (просто перейдите к своим покупкам и загрузите только «Устанавливаемый файл WordPress»).

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

2 Создайте свою таблицу данных

Когда плагин активен, у вас должен появиться новый пункт меню «wpDataTables». Нажмите на нее, затем нажмите большую синюю кнопку «Добавить», чтобы начать создание новой таблицы.

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

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

Теперь ты на финише! На этой странице вы можете настроить дополнительные параметры для ваших таблиц (необязательно). Используйте параметры «Отображение», чтобы включить гибкое сворачивание на небольших устройствах, добавить горизонтальную полосу прокрутки, ограничить ширину таблицы и т.д. Перейдите на вкладку «Редактирование», чтобы разрешить внешнее редактирование, или включите инструменты таблиц (печать, копирование или экспорт Быстрые ссылки). Лучше всего, что вы можете предварительно просмотреть свои правки в реальном времени, когда вы вносите правки. Просто не забудьте нажать на галочку Сохранить (или применить), если вы все же внесете какие-либо изменения.

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

3 Вставьте таблицу в сообщение или страницу.

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

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

Хотите построить диаграмму?

Вы также можете строить диаграммы с помощью wpDataTables. После создания таблицы нажмите «Создать диаграмму», чтобы начать.

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

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

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

Закончив редактирование, нажмите «Далее» и скопируйте шорткод диаграммы. Просто вставьте его в свой пост или содержимое страницы, сохраните и перейдите во внешний интерфейс своего веб-сайта, чтобы увидеть свою диаграмму!

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

Добавить дополнительные функции таблиц WordPress

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

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

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

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

Gravity Forms: интегрируйте отправку Gravity Forms с wpDataTables для автоматического создания таблиц WordPress на основе пользовательских данных. Расширение добавляет новый источник данных при создании вашей таблицы, поэтому вы можете легко связать с вашей конкретной формой Gravity Form и визуализировать данные. И есть даже простое внешнее редактирование для таблиц на основе Gravity Forms (с надстройкой интеграции Gravity Forms).

Попробуйте wpDataTables для себя

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

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

Посмотреть демонстрацию wpDataTables

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

Получить wpDataTables Lite

И если вам это нравится, вы можете пойти дальше и купить его с полным спокойствием. Почему? Потому что вы уже протестировали и использовали продукт.

Заключение

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

Получите wpDataTables для WordPress

Вы пробовали wpDataTables? Или у вас есть вопросы о том, что может делать этот плагин? Оставьте комментарий ниже – мы будем рады услышать от вас!

Источник записи: https://www.wpexplorer.com