Як створити таблицю погоди за допомогою wpDataTables (найкращий плагін для використання)
Ви напевно бачили таблицю погоди в Інтернеті, але ви коли-небудь пробували її побудувати?
Звісно, це здавалося б жахливим досвідом із усіма даними та умовним форматуванням, які вам потрібно було б додати до клітинок таблиці.
Знаєте, як кажуть, що не буває поганої погоди, є лише невідповідний одяг?
Те саме стосується побудови таблиці погоди. Якщо ви не можете його створити, це означає, що у вас немає необхідних інструментів для роботи.
У цій статті я розповім про створення таблиці погоди за допомогою wpDataTables, плагіна №1 WordPress для створення таблиць і діаграм.
Яку таблицю погоди ми можемо створити? Ну, приблизно так:
Так, це дуже довгий знімок екрана. Переглянути динамічну таблицю погоди можна тут.
Для створення таблиці погоди, подібної до тих, що ми представили раніше, у вас є декілька варіантів залежно від ваших вихідних даних.
1 Створення таблиці з нуля
Якщо у вас немає джерела даних, ви можете створити свою таблицю погоди з нуля за допомогою параметра «Створення таблиць вручну», куди ви будете вставляти дані вручну.
Щоб почати створювати таблицю даних вручну, відкрийте панель адміністратора WordPress, перейдіть до wpDataTables -> Створити таблицю, виберіть третій параметр «Створити таблицю вручну» та натисніть «Далі».
Вам буде показано крок майстра, який допоможе вам створити структуру таблиці, де ви створите 14 стовпців: період, рік, а всі інші будуть назвами місяців (січень, лютий…). Для стовпців «Період» ви залишите тип стовпця «Однорядковий рядок», а для всіх інших установіть тип стовпця «Ціле число».
Після завершення налаштування таблиці натисніть «Створити таблицю». Відкриється спадне меню з параметрами «Відкрити в стандартному редакторі» або «Відкрити в редакторі, подібному до Excel», і все. Структура таблиці створена. Тепер ви вставите свої дані через стандартний редактор або редактор, подібний до Excel.
2 Створення таблиці з джерела даних
Якщо у вас є дані в якомусь джерелі даних, як-от Excel, CSV, JSON, електронна таблиця Google, XML, серіалізований масив PHP або в таблиці в базі даних (джерело SQL), ви скористаєтеся другою опцією майстра таблиць.
Щоб розпочати створення таблиці даних, пов’язаної з існуючим джерелом даних, відкрийте панель адміністратора WordPress, перейдіть до wpDataTables -> Створити таблицю, виберіть другий параметр «Створити таблицю даних, пов’язану з існуючим джерелом даних»., і натисніть «Далі».
Залежно від того, яке джерело у вас є, ви будете слідувати інструкціям:
-
Як створити таблицю на основі MySQL за допомогою wpDataTables
-
Створення таблиць у WordPress на основі серіалізованих масивів PHP
Для цієї таблиці ми використовуємо CSV як джерело даних, яке ви можете завантажити тут. Ви виберете CSV як «Тип джерела вхідних даних», а потім знайдіть його над кнопкою «Огляд».
джерело, яке ви раніше завантажили та завантажили на свій сервер. Натисніть «Зберегти зміни », щоб програма wpDataTables прочитала завантажений файл CSV і створила таблицю.
Після створення таблиці за допомогою будь-якого з двох варіантів ви можете налаштувати та налаштувати таблицю WordPress так, як вам потрібно.
У нашому випадку ми спочатку вмикаємо опцію «Показувати фільтри у формі над таблицею» на вкладці «Сортування та фільтрація» в налаштуваннях таблиці, а потім налаштовуємо додаткові фільтри для кожного стовпця. Для стовпця «Період» ми встановили «Фільтр поля вибору» та «Фільтр чисел» для всіх інших стовпців.
Потім увімкніть опцію «Відповідь» на вкладці «Відображення» в налаштуваннях таблиці та приховайте всі стовпці «Місяць» для планшетів і мобільних пристроїв у налаштуваннях кожного стовпця або швидше в кнопці списку стовпців над таблицею.
Для налаштування кольору даних таблиці ми використовуємо умовне форматування. Для першого стовпця ми встановлюємо умову: якщо комірка містить 2, то «Установити клас CSS комірки» на «синьо-білий текст».
Потім ми створюємо ці класи в полі «Custom CSS» на вкладці «Customize» у налаштуваннях таблиці, як це:
.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 є ідентифікатором вашої таблиці, тому вам потрібно буде змінити його для своєї таблиці
Для всіх інших стовпців ми встановлюємо однакові умови для встановлення різних кольорів на основі значення в таблиці для таблиці максимальної температури.
Для другої таблиці «Низька температура» ми використовуємо той самий підхід, що й для таблиці «Максимум температури», за винятком умов умовного форматування. Оскільки це нижче значення температури, ми використовуємо ці умови.
Потім ми створюємо ці класи в полі «Custom CSS» на вкладці «Customize» у налаштуваннях таблиці, як це:
.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 .