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

Как создать адаптивные таблицы в WordPress?

116

В новом редакторе Gutenberg есть красивый блок таблиц для вставки таблиц на ваш сайт WordPress. Таблица будет красиво смотреться на вашем сайте, у вас также есть возможность предоставить альтернативные цвета (полосы) для строк и изменить настройки, чтобы уменьшить столбцы в соответствии с режимом. Однако самая большая проблема заключается в том, что таблицы не реагируют на мобильные устройства. В ширину мобильного устройства может поместиться максимум три или четыре столбца в зависимости от содержимого таблицы. Когда у вас больше столбцов, браузер обрезает отображение до ширины контейнера. Это приведет к тому, что пользователи не смогут просматривать скрытое содержимое ваших таблиц. Следовательно, блок таблиц Гутенберга бесполезен, если вы хотите иметь на своем сайте адаптивные таблицы.

На сайте WordPress есть много бесплатных и платных плагинов для создания адаптивных таблиц. Наш любимый плагин – TablePress, и мы объясним, как создавать адаптивные таблицы в WordPress с помощью плагина TablePress.

Почему TablePress?

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

Установка TablePress и надстроек

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

  • Перейдите на страницу адаптивного расширения TablePress.
  • Загрузите zip-файл расширения Responsive Tables
  • Как уже упоминалось, разработчик запрашивает пожертвование в размере 9 долларов за это расширение. Мы настоятельно рекомендуем пожертвовать 9 долларов, если вы планируете использовать плагин в качестве основного ресурса на своем сайте.
  • Вернитесь в панель администратора WordPress и перейдите в раздел «Плагины> Добавить».
  • Нажмите кнопку «Загрузить плагин». Нажмите кнопку «Выбрать файл» и выберите файл «tablepress-responsive-tables.zip», который вы скачали ранее.
  • Наконец, нажмите кнопку «Установить сейчас», чтобы начать установку расширения на свой сайт.
  • После успешной установки активируйте расширение.

Как создать адаптивные таблицы в WordPress?

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

Создание таблицы

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

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

Как создать адаптивные таблицы в WordPress?

После создания таблицы сохраните изменения и запишите шорткод идентификатора таблицы .

Вставка шорткода таблицы

В классическом интерфейсе редактора был значок TablePress, который помогает вам выбрать таблицу в редакторе сообщений. Однако у вас нет блока TablePress в редакторе Gutenberg. Следовательно, вам нужно вручную встроить шорткод таблицы в свой пост или страницу, используя блок шорткода.

Таблицы TablePress будут иметь короткий код идентификатора таблицы в формате table 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, включите меню разработки, чтобы перейти в адаптивный режим.

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

  • идентификатор таблицы = 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 для повышения скорости вашей страницы.

Источник записи: www.webnots.com
Leave A Reply

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее