Как создать адаптивные таблицы в WordPress? »WebNots
В новом редакторе Gutenberg есть красивый блок таблиц для вставки таблиц на ваш сайт WordPress. Таблица будет красиво смотреться на вашем сайте, у вас также есть возможность предоставить альтернативные цвета (полосы) для строк и изменить настройки, чтобы уменьшить столбцы в соответствии с режимом. Однако самая большая проблема заключается в том, что таблицы не реагируют на мобильные устройства. Ширина мобильного устройства может умещаться максимум в трех или четырех столбцах в зависимости от содержимого таблицы. Когда у вас больше столбцов, браузер обрезает отображение до ширины контейнера. Это приведет к тому, что у пользователей не будет возможности просмотреть скрытое содержимое ваших таблиц. Следовательно, блок таблиц Гутенберга бесполезен, если вы хотите иметь на своем сайте адаптивные таблицы.
Создание адаптивных таблиц в WordPress
На сайте WordPress есть много бесплатных и платных плагинов для создания адаптивных таблиц. Наш любимый плагин — TablePress, и мы объясним, как создавать адаптивные таблицы в WordPress с помощью плагина TablePress.
Почему TablePress?
- TablesPress — один из самых популярных плагинов для создания таблиц в WordPress.
- Разработчик предлагает удобный интерфейс и постоянно ведет таблицу.
- Вы можете найти хорошую документацию по использованию плагина.
- Самое главное, плагин бесплатный. Вы даже можете бесплатно скачать расширения, хотя разработчик требует пожертвования. Это сильно контрастирует с тем, что многие жадные разработчики переводят бесплатные функции в платную версию, когда плагин становится популярным.
Установка TablePress и надстроек
Вы можете установить и активировать плагин TablePress из панели администратора WordPress, как и любой другой плагин. Однако таблицы TablePress по умолчанию не реагируют так же, как таблицы Гутенберга. Вам нужно установить расширение, чтобы сделать адаптивные таблицы.
- Перейти к Адаптивное расширение TablePress страница.
- Загрузите zip-файл расширения Responsive Tables
- Как уже упоминалось, разработчик запрашивает пожертвование в размере 9 долларов за это расширение. Мы настоятельно рекомендуем пожертвовать 9 долларов, если вы планируете использовать плагин в качестве основного ресурса на своем сайте.
- Вернитесь в панель администратора WordPress и перейдите в раздел «Плагины> Добавить».
- Нажмите кнопку «Загрузить плагин». Нажмите кнопку «Выбрать файл» и выберите файл «tablepress-responsive-tables.zip», который вы скачали ранее.
- Наконец, нажмите кнопку «Установить сейчас», чтобы начать установку расширения на свой сайт.
- После успешной установки активируйте расширение.
Не забудьте сначала установить и активировать плагин TablesPress, прежде чем пытаться установить расширение адаптивных таблиц.
Создание таблицы
TablePress предлагает различные способы создания стола; вы можете сослаться на функцию плагина в нашей предыдущей статье о том, как создать таблицу с помощью TablePress. Ниже приводится сводка шагов по созданию таблицы в TablePress:
- Перейдите в меню «Инструменты> TablePress> Добавить новый» и начните создавать таблицу и настраивать параметры.
- Или перейдите на вкладку «Импорт» и импортируйте таблицу из внешнего источника данных. Например, вы можете просто загрузить данные таблицы Excel для создания таблицы.
После создания таблицы сохраните изменения и запишите шорткод идентификатора таблицы.
Вставка шорткода таблицы
В классическом интерфейсе редактора был значок TablePress, который помогает вам выбирать стол в редакторе сообщений. Однако в редакторе Gutenberg у вас нет блока TablePress. Следовательно, вам необходимо вручную встроить шорткод таблицы в свой пост или страницу, используя блок шорткода.
Таблицы TablePress будут иметь короткий код идентификатора таблицы в формате идентификатор таблицы = xxx / внутри квадратных скобок. Добавьте блок шорткода и вставьте шорткод идентификатора таблицы, как вы уже отметили ранее.
Как сделать таблицы адаптивными
TablePress предлагает три различных способа создания адаптивных таблиц.
Поскольку мы используем плагин 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 |
| Ralf | 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 |
Адаптивный флип-стол
Последний вариант — перевернуть, аналогично транспонированию в 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 |
| Ralf | 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, включите меню разработки, чтобы перейти в адаптивный режим.
Однако, когда у вас есть большие таблицы с большим количеством столбцов, вам может потребоваться адаптивная таблица даже на настольном компьютере или планшетах. Расширение плагина упрощает эту задачу, добавляя точку останова для отзывчивой таблицы. Режимы прокрутки и сворачивания будут работать на всех устройствах без добавления точки останова. Для режима переворота измените шорткод, как показано ниже, чтобы таблица работала на разных устройствах. (убедитесь, что короткие коды заключены в квадратные скобки [ ]).
- идентификатор таблицы = 123 responseisve = перевернуть responseive_breakpoint = рабочий стол /
- идентификатор таблицы = 123 responseisve = перевернуть responseive_breakpoint = tablet /
- идентификатор таблицы = 123 responseisve = перевернуть responseive_breakpoint = mobile /
- идентификатор таблицы = 123 responseisve = перевернуть responseive_breakpoint = all /
Вот точные размеры точек останова:
- Рабочий стол — устройства шириной менее 1200 пикселей.
- Планшет — устройства шириной менее 980 пикселей.
- Телефон — устройства шириной менее 768 пикселей
- Все — добавьте отзывчивости на всех устройствах независимо от размера устройства.
Предупреждение о скорости страницы
Как видите, легко вставлять разные типы адаптивных таблиц на все устройства. Проблема, которую мы заметили с расширением, заключается в том, что оно добавляет дополнительный файл CSS для режима переворота. Большинство подключаемых модулей кэширования исключают эту таблицу стилей без объединения с другими файлами CSS, поэтому в Google PageSpeed Insights появляется предупреждение. Кроме того, плагин также загрузит стили и скрипты на всех страницах вашего сайта, независимо от того, есть на странице таблица или нет. Если у вас всего несколько таблиц, мы не рекомендуем использовать плагин TablePress для повышения скорости вашей страницы.
