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

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

Звучит знакомо?

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

Хотите фильтруемые данные? Неа.

Хотите, чтобы таблица реагировала на мобильные устройства? Неа.

Хотите импортировать данные из CSV? Не шанс.

Вот хорошие новости:

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

Вместе с графиками и всякими.

Звучит неплохо? Давайте посмотрим, как это можно сделать с помощью wpDataTables.

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

Этот плагин позволяет создавать красивые таблицы без каких-либо знаний HTML.

wpDataTables — это премиальный плагин WordPress, который упрощает процесс создания и публикации таблиц на вашем веб-сайте. Он легкий, интуитивно понятный и выполняет работу за считанные минуты, оставляя вам меньше кода и больше времени для блога.

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

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

Вы даже можете использовать его для:

• Каталог продукции
• Сравнительные таблицы продуктов
• Прайс-листы
• Сбор данных от пользователей
• Спортивные результаты
• Отслеживание вашего прогресса во всем, что связано с числами (например, отчет о доходах блога)

Возможности безграничны.

Создание таблицы от начала до конца: пошаговое руководство

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

Вот как начать:

Шаг 1. Подготовьте файл

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

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

Шаг 2 – Создайте новую таблицу

Перейдите к wpDataTables в левой части панели управления WordPress.

Нажав на эту ссылку, вы попадете на экран выше. Здесь вы создадите и добавите новую таблицу:

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

Шаг 3 – Определите характеристики вашего стола

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

• Создать заголовок
• Выберите, хотите ли вы показывать заголовок таблицы на странице
• Выберите тип источника ввода для вашей таблицы

Это ваши самые основные настройки стола.

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

Как видите, я дал своей таблице соответствующий заголовок, выбрал тип файла Excel из раскрывающегося списка и загрузил файл в WordPress.

Далее на странице вы найдете дополнительные настройки для настройки таблицы:

Эти:

• Отзывчивый — позволяет вашей таблице по-разному отображаться на настольных компьютерах, планшетах и ​​мобильных устройствах.
• Scrollable — возможность прокручивать таблицу по горизонтали
• Скрыть таблицу до полной загрузки страницы — полезно для медленной загрузки страниц.
• Расширенная фильтрация — для отображения фильтра под каждым столбцом.
• Фильтр в форме — для фильтра внутри самой формы.
• Табличные инструменты — для таких параметров, как копирование, сохранение в Excel и сохранение в CSV, встроенное в вашу форму.
• Включить сортировку — позволяет сортировать таблицы.
• Ограничить макет таблицы — ограничить ширину таблицы до 100% родительского контейнера.
• Длина отображения — определите, сколько записей отображается на странице.

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

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

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

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

Шаг 4 – Сохраните и скопируйте шорткод

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

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

Шаг 5 – Добавьте шорткод к публикации или странице

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

Шаг 6 – Опубликовать

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

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

Какие еще таблицы можно создать?

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

Вот пример полностью функционирующей, адаптивной и редактируемой таблицы с несколькими столбцами и параметрами.

Эта таблица основана на MySQL с фильтрами для сортировки содержимого в зависимости от потребностей пользователя:

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

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

Другие функции wpDataTable, о которых стоит упомянуть

• Мастер wpDataChart — позволяет преобразовать данные в график или диаграмму за несколько простых шагов. В настоящее время он поддерживает 3 движка рендеринга — Google Charts, Highcharts и Chart.js. Дополнительную документацию можно найти здесь.
• Условное форматирование — позволяет выделять ячейки, строки и столбцы на основе их содержимого. Это особенно полезно, если таблица полностью числовая. Дополнительную документацию можно найти здесь.
• Столбцы формулы — позволяет добавить столбец, который можно использовать для расчета числа на основе чисел, указанных в других ячейках. Дополнительную документацию можно найти здесь.
• Столбцы даты и времени — используются для ячеек, которые содержат даты и время. Они автоматически появятся в том формате, который вы установили на странице настроек. Дополнительную документацию можно найти здесь.
• Строка суммы/итогов — используется для числовых столбцов, позволяет вычислить сумму всех значений. Дополнительную документацию можно найти здесь.
• Report Builder — надстройка для wpDataTables. Report Builder мгновенно создает документы и электронные таблицы, заполняя ваши шаблоны фактическими данными с вашего сайта WordPress. Дополнительную документацию можно найти здесь.
• Master-Detail Tables — надстройка для wpDataTables, которая позволяет вам и посетителям вашего сайта просматривать детали для каждой строки простым щелчком мыши. Дополнительную документацию можно найти здесь.

Последние мысли

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

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

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

Теперь пришло время приступить к работе за собственным столом – наслаждайтесь!

Связанное Чтение: 5 мощных и мобильных адаптивных плагинов для таблиц для WordPress.

Раскрытие информации: этот пост спонсируется, но мы придерживаемся собственного мнения.