Как создать таблицу погоды с помощью wpDataTables (лучший плагин для использования)
Вы наверняка видели таблицу погоды в Интернете, но пробовали ли вы когда-нибудь ее построить?
Конечно, это может показаться ужасным опытом со всеми данными и условным форматированием, которые вам нужно добавить в ячейки таблицы.
Знаете, как говорят, что не бывает плохой погоды, бывает неподходящая одежда?
То же самое касается построения таблицы погоды. Если вы не можете его создать, значит, у вас нет нужных инструментов для работы.
В этой статье я расскажу о создании таблицы погоды с помощью wpDataTables, плагина WordPress №1 для создания таблиц и диаграмм.
Какую таблицу погоды мы можем создать? Ну, что-то вроде этого:
Да, это действительно длинный скриншот. Посмотреть динамическую таблицу погоды можно здесь.
Для создания таблицы погоды, подобной той, которую мы представили ранее, у вас есть несколько вариантов в зависимости от ваших исходных данных.
1 Создание таблицы с нуля
Если у вас нет источника данных, вы можете создать свою таблицу погоды с нуля с помощью опции «Создание таблиц вручную», где вы будете вставлять данные вручную.
Чтобы начать создавать таблицу данных вручную, откройте панель администратора WordPress, перейдите в wpDataTables -> Создать таблицу, выберите третий вариант «Создать таблицу вручную» и нажмите «Далее».
Вам будет показан шаг мастера, который поможет вам создать структуру таблицы, в которой вы создадите 14 столбцов: период, год, а все остальные будут названиями месяцев (январь, февраль…). Для столбцов периода вы оставите тип столбца «Однострочная строка», а для всех остальных установите тип столбца «Целое число».
Когда вы закончите настройку таблицы, нажмите «Создать таблицу». Откроется раскрывающийся список с вариантами «Открыть в стандартном редакторе» или «Открыть в редакторе, подобном Excel», и все. Структура таблицы создана. Теперь вы будете вставлять свои данные поверх стандартного редактора или редактора, подобного Excel.
2 Создание таблицы из источника данных
Если у вас есть данные в каком-либо источнике данных, таком как Excel, CSV, JSON, электронная таблица Google, XML, сериализованный массив PHP или таблица в базе данных (источник SQL), вы будете использовать второй вариант в мастере таблиц.
Чтобы начать создание таблицы данных, связанной с существующим источником данных, откройте панель администратора WordPress, перейдите в wpDataTables -> Создать таблицу, выберите второй вариант «Создать таблицу данных, связанную с существующим источником данных»., и нажмите «Далее».
В зависимости от того, какой у вас источник, вы будете следовать инструкциям:
Для этой таблицы мы используем CSV в качестве источника данных, который вы можете скачать отсюда. Вы выберете CSV как «Тип источника входных данных», а затем над кнопкой «Обзор» найдите, что
источник, который вы предварительно скачали и загрузили на свой сервер. Нажмите «Сохранить изменения », чтобы wpDataTables прочитал загруженный вами CSV-файл, и таблица будет создана.
После создания таблицы с помощью любого из двух вариантов вы можете настроить и настроить свою таблицу WordPress так, как вам нужно.
В нашем случае мы сначала включаем опцию «Показывать фильтры в форме над таблицей» на вкладке «Сортировка и фильтрация» в настройках таблицы, а затем настраиваем Расширенные фильтры для каждого столбца. Для столбца «Период» мы устанавливаем «Выбрать фильтр поля» и «Числовой фильтр» для всех остальных столбцов.
Затем мы включаем опцию «Отзывчивость» на вкладке «Отображение» в настройках таблицы и скрываем все столбцы «Месяц» для планшетов и мобильных устройств в настройках каждого столбца или быстрее в кнопке списка столбцов над таблицей.
Для настройки цвета данных таблицы мы используем условное форматирование. Для первого столбца мы устанавливаем условие, что если ячейка содержит 2, то «Установить класс CSS ячейки» на «сине-белый текст».
Затем мы создаем эти классы в поле «Пользовательский CSS» на вкладке «Настроить» в настройках таблицы следующим образом:
.wpdt-c .wpDataTablesWrapper .wpDataTable-1 td.blue{ background-color: #0083c2 !important;}
.wpdt-c .wpDataTablesWrapper .wpDataTable-1 td.white-text{ color: #FFFFFF !important;}Как это:
Где номер 1 в .wpDataTable-1 — это идентификатор вашей таблицы, поэтому вам нужно будет изменить его для своей таблицы.
Для всех остальных столбцов мы устанавливаем те же условия, чтобы установить разные цвета в зависимости от значения в таблице для таблицы максимальной температуры.
Для второй таблицы «Низкая температура» мы используем тот же подход, что и для таблицы «Максимальная температура», за исключением условий в условном форматировании. Поскольку это нижнее значение температуры, мы используем эти условия.
Затем мы создаем эти классы в поле «Пользовательский CSS» на вкладке «Настроить» в настройках таблицы следующим образом:
.wpdt-c .wpDataTablesWrapper .wpDataTable-2 td.white-text{ color: #FFFFFF !important;}
.wpdt-c .wpDataTablesWrapper .wpDataTable-2 td.black-text{ color: #000000 !important;}Где номер 2 в .wpDataTable2 — это идентификатор вашей таблицы, поэтому вам нужно будет изменить его для своей таблицы.
Вот и все!
Теперь, что вам нужно сделать, это появиться на ваших страницах в интерфейсе. Как и в любом другом плагине, мы используем шорткоды для отображения таблиц на страницах пользователей или в сообщениях. Добавлять шорткоды очень просто, особенно если вы используете популярные конструкторы страниц, такие как Elementor, WP Bakery или Gutenberg.
Дополнительные стили таблиц, которые вы можете создать с помощью wpDataTables
Вы заинтересованы в создании большего, чем просто таблицы погоды?
Вам нужно взглянуть на некоторые другие таблицы из раздела витрина.
Таблицы статистики с диаграммами
wpDataTables используется для создания графического представления статистических данных в виде диаграмм.
Таблица рейтинга криптовалют
В этом примере криптовалюты ранжируются в таблице с помощью wpDataTables. Вы можете добавить этот тип криптотаблицы на свой сайт с помощью нескольких настроек.
Интернет-каталог ноутбуков
Эту таблицу можно использовать для сравнения продуктов. Например, если у вас есть веб-сайт, на котором вы представляете и продвигаете товары, в таблице могут отображаться характеристики самых популярных товаров.
Финансовые отчеты
Плагин используется для создания таблицы, которая показывает финансовые данные по странам. Очевидно, что его можно адаптировать для представления различных типов финансовых данных.
Каталог книг
Этот стиль таблицы хорошо подходит для партнерского сайта или интернет-магазина книг.
Паевые инвестиционные фонды
wpDataTables может создать список взаимных фондов, отсортированных по эффективности.
Каталог драйверов
wpDataTables используется для отображения конфигурации драйвера.
Присоединяйтесь к сообществу wpDataTables
Если вы работаете с таблицами, вот несколько причин, по которым вам подойдет лицензия wpDataTables.
- Это упрощает работу с таблицами и диаграммами.
- wpDataTables — это самый продаваемый в мире плагин для таблиц WordPress с часто выпускаемыми обновлениями и отличной поддержкой клиентов.
- Уже более 40 000 довольных компаний и частных лиц используют wpDataTables.
- Он используется в финансовых, научных, статистических, коммерческих и других приложениях для управления данными.
С его помощью вы можете создавать адаптивные таблицы и диаграммы WordPress.
Таблицы, созданные с помощью плагина wpDataTables, являются встроенными и полностью адаптивными. Нет никаких ограничений, когда речь идет о платформах или типах устройств.
Вы можете создавать большие таблицы
Большие столы не проблема. wpDataTables быстро и надежно обрабатывает таблицы с миллионами строк. Сервер MySQL обрабатывает все операции.
Расширенные фильтры и параметры поиска
Можно разработать индивидуальные фильтры для вашего набора данных. Это очень полезно для сужения данных в таблице WordPress.
Редактируемость
В wpDataTables есть возможность сделать его редактируемым. Таким образом, содержимое таблиц WordPress можно редактировать как встроенное, так и в сгенерированной форме.
Подсветка ячеек
Наш плагин таблиц WordPress имеет функциональность, аналогичную условному форматированию в Excel. В зависимости от их содержимого можно выделить столбцы, строки или отдельные ячейки.
Множество вариантов графиков
Данные в таблицах WordPress можно использовать для создания диаграмм WordPress. Для создания этих диаграмм используются три мощных механизма, которые обновляются в режиме реального времени.
Некоторые отзывы, которые мы получили за эти годы
wpDataTables ежедневно успешно решает различные задачи для более чем 40 000 клиентов. Это включает в себя взаимодействие с базой данных, бизнес-отчеты, каталоги, научные информационные панели и многое другое.
wpDataTables стал для нас прекрасным решением! Мы уже были очень впечатлены возможностями плагина прямо из коробки. TMS-плагины работали с нами, чтобы настроить его специально для наших нужд. Настройки позволили создать интуитивно понятный интерфейс для клиентов, для ввода и редактирования данных. Поддержка клиентов и отзывчивость не имеют себе равных. wpDataTables — просто отличный продукт.
-Сара Вудманси, США. Фотограф и геокартограф в Geo1 / Aerial Filmworks
С точки зрения веб-разработчика и клиента, wpDataTables — один из лучших плагинов, с которыми мне приходилось сталкиваться. Не только цена хороша, но и функциональность идеальна. Чрезвычайно прост в использовании и очень хорошо разработан. Он имеет множество функций, которые подходят всем, от новичков до продвинутых уровней. Видео, дополняющие плагин, подробно объяснены множеством примеров. Я не могу не подчеркнуть, насколько это сделало мою веб-разработку проще и круче.
– Нордин Бенхамари, Великобритания. Веб-разработчик, дизайнер баз данных в Thanet Volunteer Bureau
Если вам понравилось читать эту статью о том, как создавать таблицы погоды, вы должны прочитать эту статью о плагинах генератора таблиц WordPress .
Мы также написали о нескольких связанных темах, таких как альтернатива DataTables, библиотека таблиц JavaScript, плагины таблиц WordPress, как создать таблицу в WordPress без плагина, как вставить таблицу в WordPress и плагины таблицы цен WordPress .