Створюйте приголомшливі чуйні таблиці в WordPress за допомогою wpDataTables

Створення таблиць у WordPress легко. Існують традиційні способи додавання таблиць до WordPress з кодом, але, безумовно, найзручнішим способом побудови таблиці (або діаграми) є плагін wpDataTables WordPress. Це дозволяє надзвичайно легко імпортувати ваш стіл з різних зовнішніх джерел, стилізувати його на свій смак та додавати його на ваш веб-сайт.


Основні таблиці HTML

Ви можете додати таблиці до WordPress, використовуючи стандартні Теги HTML-таблиць. Вони досить прямі вперед і використовують таку основну структуру (просто пам’ятайте, щоб ввести їх на вкладці «Текст» під час створення публікації):

Спочатку Друге Третя
Джек Джексон 25
Джейн Дженсон 30

У результаті вийде таблиця, схожа на цю (зверніть увагу – будь-яка стилізація для осередків заголовка буде залежати від вашої теми):

СпочаткуДругеТретя
ДжекДжексон25
ДженДженсон30

Використання HTML для створення ваших таблиць спрацює і добре, якщо ви хочете лише додати одну або дві таблиці на свій сайт. Але якщо ви часто збираєтесь створювати таблиці, ви можете зіткнутися з кількома проблемами.

  • Вам потрібно буде вивчити HTML-кодування для розширених параметрів
  • Додавання HTML забирає багато часу і буде гальмувати вашу продуктивність у перспективі, якщо створити багато таблиць
  • Цей метод сильно обмежений у компонуванні та дизайні (якщо ви не є просунутим розробником)

Якщо ви використовуєте WordPress, можна сміливо припустити, що 1) ви використовуєте останню версію WordPress, і 2) ваша тема відповідає. Якщо ви використовуєте тег таблиці HTML для вставки таблиць на свій сайт WordPress, ви витратите багато часу на коригування макета.

Ваш веб-сайт може реагувати, але ваші таблиці не відповідають.

Це, природно, порушить чуйну властивість вашого веб-сайту. Вставлення даних на ваш сайт також може бути проблемою. Програмне забезпечення для обробки електронних таблиць на зразок Google Spreadsheets або Microsoft Excel має багато інструментів імпорту для захоплення даних із бази даних. Але коли ви вводите кожного персонажа – це не дуже продуктивно.

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

Створіть кращі таблиці з wpDataTables

Плагін wpDataTables Respovable Tables

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

Детальніше про wpDataTables Переглянути демо-версію

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

Кілька джерел даних

wpDataTables Джерела даних

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

Запит MySQL – це мій особистий фаворит, оскільки він дозволяє мені переглядати і змінювати дані з належної бази даних. Якщо у вас є команда розробників, які працюють над настільним проектом, це зробить співпрацю дуже простою (докладніше про це пізніше)!

Розширена налаштування та чуйний макет

Дизайн столу ніколи не був простішим. За допомогою кількох прапорців і декількох кольорів ви можете створити плагін, щоб доповнити тему вашого сайту. Погляньте на дивовижні функції дизайну, які плагін може запропонувати:

wpDataTables Спеціальний стиль

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

Фільтри для ефективного пошуку

Параметри сортування та фільтра wpDataTables

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

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

Редагуйте базу даних MySQL від Frontend

wpDataTables Дозволяє редагування лицьових сторін

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

Візуалізуйте дані за допомогою діаграм

Візуалізація – це набагато ефективніше захоплення уваги, ніж звичайний текст. Адже бачити – це вірити. Це збільшує нашу швидкість споживання даних, порівняно з традиційним читанням. Наприклад, переглядаючи кругову діаграму річного звіту про доходи, ви майже завжди інтерпретуєте дані швидше порівняно з читанням даних протягом усіх дванадцяти місяців.

Стилі діаграм wpDataTables

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

Пожиттєві оновлення

Більшість розробників плагінів нададуть вам рік оновлення та підтримки. Однак цей розробник включив довічні оновлення та шість місяців підтримки одноразової плати (зверніть увагу – для постійної підтримки вам потрібно буде поновити ліцензію).

Детальна документація

Розробник не залишає жодного каменю, коли йдеться про пояснення, як використовувати wpDataTables. Існує велика онлайн-документація, а також відео-уроки, які допоможуть вам зрозуміти всі можливості плагіна!

Це говорить нам про дві речі:

  1. Розробник піклується про своїх клієнтів – щоб вони повернулися, щоб придбати товар
  2. Клієнт, що обізнаний = менше ікони = менші квитки на підтримку = задоволені клієнти

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

Як побудувати чуйну таблицю з wpDataTables

Тепер, коли ви знаєте, чому ми вважаємо, що wpDataTables – це чудовий плагін, давайте покажемо, як ним користуватися! Існує рівно три кроки для створення нової таблиці за допомогою плагіна wpDataTables.

1. Встановіть wpDataTables

Я знаю, що це має бути очевидним, але спочатку потрібно встановити wpDataTables. Оскільки це плагін преміум-класу, його потрібно придбати та завантажити з CodeCanyon (просто перейдіть до своїх покупок та завантажте лише “Встановлюваний файл WordPress”).

Встановіть модуль wpDataTables

Потім просто дотримуйтесь інструкцій на екрані, щоб закінчити встановлення та активацію.

2. Створіть свою таблицю даних

З активним плагіном у вас повинен бути абсолютно новий пункт меню «wpDataTables». Клацніть на ньому, а потім натисніть велику синю кнопку Додати нову, щоб розпочати створення нової таблиці.

wpDataTables Створення або імпорт таблиці

Вашим першим варіантом буде те, як ви хочете створити свою таблицю. Потрібно представити п’ять варіантів. Ми вибрали варіант імпорту з CVS, оскільки у нас була проста електронна таблиця, яку ми хотіли використовувати. Потім після натискання кнопки Далі вам буде запропоновано вибрати та завантажити файл.

wpDataTables Управління таблицею

Після завантаження джерела даних ви зможете ввести ім’я власної таблиці, а також використовувати параметри для редагування, додавання чи видалення стовпців та рядків. Потім натисніть зелену кнопку, щоб закінчити створення таблиці.

Налаштування таблиці wpDataTables

Ви зараз в домашній смузі! На цій сторінці ви можете змінити додаткові параметри для своїх таблиць (необов’язково). Використовуйте параметри “Дисплей”, щоб увімкнути чуйне згортання на менших пристроях, додати горизонтальну смугу прокрутки, обмежити ширину таблиці тощо. Перейдіть на вкладку “Редагування”, щоб увімкнути редагування в передній частині або включити інструменти таблиць (друкувати, копіювати або експортувати швидкі посилання). Найкраще, що ви можете переглянути свої зміни в прямому ефірі під час налаштування. Просто не забудьте натиснути на Зберегти (або застосувати) галочку, якщо ви внесете якісь зміни.

Після цього скопіюйте короткий код таблиці вгорі екрану, оскільки він знадобиться для третього та останнього кроку.

3. Вставте свою таблицю в пост або сторінку

wpDataTables Код

Щоб використовувати свою таблицю, все, що вам потрібно зробити, – це вставити короткий код у вміст до публікації чи сторінки (наприклад, на зображенні вище). Цей короткий код відображатиметься на передній частині вашого веб-сайту, залежно від того, як ви склали таблицю:

wpDataTables Лицьова таблиця

У нашому ви бачите, що ми ввімкнули інструменти таблиці (для друку, експорту тощо), фільтрування та подання заявок. Але це все – ваш стіл готовий до роботи!

Хочете створити діаграму?

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

wpDataTables Створення діаграми

Звідси дайте назву діаграмі, виберіть стиль (можна вибрати тони) та перейдіть до наступного екрану, де ви виберете таблицю даних, яку ви хочете використовувати для створення своєї діаграми.

wpDataTables Призначення даних

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

wpDataTables Налаштування діаграми

Тепер для веселої частини. Використовуйте параметри для стилю та додавання функцій до діаграми. Є безліч варіантів реагування на ширину, висоту, фони, рамки, шрифти, мітки, кольори, назву показу / приховування, підказки на наведення курсору та інше.

Після завершення редагування натисніть кнопку Далі та скопіюйте короткий код діаграми. Просто вставте його у вміст своєї публікації чи сторінки, збережіть і перейдіть на передню частину веб-сайту, щоб побачити свою діаграму!

Додати більше функцій таблиці WordPress

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

wpDataTables Розширені фільтри

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

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

wpDataTables Форматизаційні форми

Грізні форми: Додайте підтримку популярного конструктора форм Formidable Forms Pro. Використовуйте грізні форми для створення форми збору даних (наприклад, опитування), а потім автоматично генеруйте таблицю на основі подань користувача, кожне поле перетворюється на стовпець.

Форми тяжкості: Інтегруйте подання Gravity Forms з wpDataTables для автоматичного створення таблиць WordPress на основі даних користувача. Розширення додає нове джерело даних під час створення таблиці, щоб було легко пов’язати вашу конкретну форму гравітації та візуалізувати дані.

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

wpDataTables Live Sandbox

Більшість розробників дають вам демо-версію, щоб відчути, що може робити плагін. Але вони показують лише вихідний результат, тобто перегляд “frontend”, який базується на заздалегідь визначених входах. Тут більшість демонстраційних версій плагінів не виходять – вони не дають вам доступу до налаштувань та інструментів плагіну – тобто бекенда.

wpDataTables, однак, пропонує вам повну пісочницю на їх демонстрації, де ви можете спробуйте перед покупкою. Всі автодилери роблять це – сумнозвісний тест-драйв. Через пісочницю ви можете протестувати функції плагіна на вміст вашого серця та переглядати вихід у режимі реального часу.

Перегляньте демонстрацію wpDataTables

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

Отримайте wpDataTables Lite

І якщо вам це подобається, ви можете піти вперед і придбати його з повним спокоєм. Чому? Тому що ви вже протестували та використовували продукт.

Висновок

wpDataTables – один з тих незамінних плагінів для веб-сайтів WordPress, які займаються величезною кількістю даних. Незалежно від того, ви створюєте шкільний проект чи щорічний звіт компанії, таблиці та їх візуалізація відіграють важливу роль у представленні даних.

Отримайте wpDataTables для WordPress

Ви спробували wpDataTables? Або у вас є питання щодо того, що може робити цей плагін? Залиште коментар нижче – ми хотіли б почути від вас!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map