TechBlogSD - Все для WordPress і WEB розробки
WEB і WordPress інструкції, новини, огляди тем та плагінів

Як створити адаптивні таблиці в WordPress?

21

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

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

Чому TablePress?

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

Встановлення TablePress та доповнень

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

  • Перейдіть на сторінку адаптивного розширення TablePress.
  • Завантажте zip -файл розширення адаптивних таблиць
  • Як згадувалося, розробник просить 9 доларів як пожертвування для цього розширення. Ми настійно рекомендуємо пожертвувати $ 9, якщо ви плануєте використовувати плагін як основний ресурс на своєму сайті.
  • Поверніться на панель адміністрування WordPress і перейдіть до розділу «Плагіни> Додати новий».
  • Натисніть кнопку «Завантажити плагін». Натисніть кнопку «Вибрати файл» і виберіть файл «tablepress-responsive-tables.zip», який ви завантажили раніше.
  • Нарешті, натисніть кнопку «Встановити зараз», щоб розпочати встановлення розширення на свій сайт.
  • Активуйте розширення після успішної установки.

Як створити адаптивні таблиці в WordPress?

Не забудьте спочатку встановити та активувати плагін TablesPress, перш ніж намагатися встановити розширення адаптивних таблиць.

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

TablePress пропонує різні способи створення таблиці; Ви можете звернутися до функції плагіна в нашій попередній статті про те, як створити таблицю за допомогою TablePress. Нижче наведено короткий опис кроків створення таблиці в TablePress:

  • Перейдіть до меню «Інструменти> TablePress> Додати новий» і почніть створювати таблицю та налаштовувати параметри.
  • Крім того, перейдіть на вкладку «Імпорт» та імпортуйте таблицю із зовнішнього джерела даних. Наприклад, ви можете просто завантажити дані свого листа Excel для створення таблиці.

Як створити адаптивні таблиці в WordPress?

Після створення таблиці збережіть зміни та запишіть короткий код ідентифікатора таблиці .

Вставка короткого коду таблиці

Класичний інтерфейс редактора мав піктограму TablePress, яка допомагає вибрати таблицю в редакторі публікацій. Однак у редакторі Гутенберга у вас немає блоку TablePress. Тому вам потрібно вручну вставити короткий код таблиці у свій допис або сторінку за допомогою блоку короткого коду.

Таблиці TablePress матимуть короткий код ідентифікатора таблиці у форматі таблиці id = xxx / у квадратних дужках. Додайте блок короткого коду та вставте свій короткий код ідентифікатора таблиці, як ви зазначали раніше.

Зробити таблиці чуйними

TablePress пропонує три різні способи створення адаптивних таблиць.

  • Прокрутіть
  • Перевернути
  • Згорнути

Оскільки ми використовуємо плагін TablePress, давайте обговоримо кожен варіант із прикладом таблиці.

Адаптивна таблиця прокручування

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

Адаптивна таблиця згортання

Другий варіант – мати адаптивну таблицю згортання. Як випливає з назви, він додасть у рядки значок +, щоб користувачі могли натиснути/натиснути, щоб переглянути детальнішу інформацію. Розширення плагіна перемістить прихований вміст таблиці під піктограмою показати / сховати. Це дуже корисно, щоб показати кілька важливих стовпців і приховати дані, що залишилися, під кнопкою +.

Чуйний перекидний стіл

Останній варіант – фліп, подібний до транспонування в Microsoft Excel. Це перетворить рядок у стовпці, а стовпці – у рядки. Ви можете використовувати перекидний стіл, якщо він відповідає вашому вмісту таблиці. Нижче наведено приклад адаптивної фліп -таблиці, створеної за допомогою плагіна TablePress.

Назва Тема 1 Тема 2 Тема 3 Тема 4 Тема 5 Тема 6 Тема 7 Тема 8 Тема 9 Тема 10 Тема 11 Тема 12 Тема 13
Джон 50 60 70 45 68 98 78 54 21 23 43 76 87
Павло 89 65 45 12 32 56 78 89 14 56 98 56 45
Девід 98 84 65 89 12 45 98 65 32 12 45 43 75
Ральф 65 56 23 45 78 54 65 21 35 64 90 78 34
Краус 15 56 48 98 65 45 78 23 56 45 87 56 98
Петро 45 89 98 51 65 65 67 43 23 76 45 34 87
Bing 67 54 89 76 90 56 76 80 98 56 98 76 54

Пов’язані: Огляд адаптивного плагіна WordPress для фліпбуків.

Увімкнення адаптивних таблиць на певних пристроях

Як правило, ви можете використовувати адаптивну таблицю, націлену на користувачів мобільних пристроїв. У цьому випадку достатньо змінити короткий код таблиці, включивши режим реагування. Щоб перевірити таблиці, вам потрібно переглянути таблиці на мобільному телефоні або скористатися опцією перемикання пристроїв у розділі інструментів розробника у ваших браузерах Chrome / Firefox / Edge. Якщо ви використовуєте Safari на Mac, увімкніть меню розробки, щоб увійти в чуйний режим.

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

  • id таблиці = 123 відповідь = перевернути відповідна_перервна точка = робочий стіл /
  • ідентифікатор таблиці = 123 відповідь = перевернути відповідну точку перелому = планшет /
  • ідентифікатор таблиці = 123 відповідь = перевернути відповідна_перервна точка = мобільний /
  • ідентифікатор таблиці = 123 відповідь = перевернути відповідна_перервна точка = все /

Ось точні розміри точок зупину:

  • Настільні – пристрої шириною менше 1200 пікселів
  • Планшет – пристрої шириною менше 980 пікселів
  • Телефон – пристрої шириною менше 768 пікселів
  • Усі – додайте чуйність на всіх пристроях незалежно від розміру пристрою.

Обережно щодо швидкості сторінки

Як бачите, на всі пристрої легко вставити різні типи адаптивних таблиць. Проблема, яку ми помітили з розширенням, полягає в тому, що він додасть додатковий файл CSS для перевертання. Більшість плагінів кешування виключають цю таблицю стилів, не поєднуючи її з іншими файлами CSS, створюючи попередження в Google PageSpeed ​​Insights. Крім того, плагін також завантажуватиме стилі та сценарії на всі сторінки вашого сайту, незалежно від того, на сторінці є таблиця чи ні. Якщо у вас є лише кілька таблиць, ми не рекомендуємо використовувати плагін TablePress для покращення швидкості сторінки.

Джерело запису: www.webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі