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

Таблицы — это элемент дизайна веб-сайта, который поможет вам элегантно отображать большие объемы информации в упорядоченном виде. Они хорошо работают на традиционных компьютерных дисплеях, но часто могут создавать нежелательные впечатления на мобильных устройствах.

К счастью, есть несколько рабочих решений для создания более отзывчивых таблиц. Использование этих приемов адаптивного дизайна может улучшить взаимодействие с пользователем (UX) вашего сайта. Это означает, что посетители смогут более легко просматривать и получать доступ к данным в ваших таблицах, независимо от того, какой тип устройства они используют.

В этой статье мы рассмотрим, что значит сделать таблицу адаптивной. Затем мы рассмотрим два способа создания адаптивных таблиц в WordPress. Давайте погрузимся прямо в!

Что такое адаптивные таблицы?

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

Когда вы создаете адаптивную таблицу, вы, по сути, создаете набор правил для исходной таблицы данных. Эти правила могут определять точки останова на основе размера экрана. Это означает, что если пользователь обращается к таблице на устройстве, размер которого меньше заданной вами точки останова, макет таблицы отреагирует переформатированием, чтобы соответствовать размеру экрана.

Адаптивные таблицы обычно можно переформатировать, добавив полосу прокрутки или сгруппировав информацию. Вы не хотите просто сжимать и сжимать информацию в ячейках вместе при изменении размера экрана, так как это может сделать таблицу нечитаемой. К счастью, адаптивный дизайн не так уж и сложен.

Как сделать адаптивную таблицу (без плагина)

По сути, есть два подхода к тому, чтобы сделать таблицу адаптивной в WordPress. Во-первых, мы рассмотрим, как выполнить работу без плагина.

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

Шаг 1. Отформатируйте таблицу для адаптивного CSS

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

Это отличный подход, поскольку горизонтальная прокрутка часто может означать, что вы просматриваете данные столбца вне контекста:

Чтобы эта таблица работала лучше, вам нужно сначала убедиться, что ваша таблица правильно отформатирована. Если вы создаете таблицу с помощью редактора блоков, вы можете сделать это как обычно, а затем добавить атрибуты <thead> и <tbody>, чтобы убедиться, что ваш CSS будет работать правильно:

После добавления таблицы вы можете использовать редактор HTML для настройки ее форматирования. Ваш атрибут <thead></thead> должен обернуть все заголовки ваших столбцов. Точно так же вы поместите все последующие данные таблицы в атрибут <tbody></tbody>.

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

Шаг 2. Добавьте пользовательский тег в свой CSS

Далее мы собираемся использовать фрагмент пользовательского кода CSS и тему WordPress Twenty Nineteen. Эта тема имеет довольно отзывчивый дизайн как часть собственного кода, но наши настройки CSS сделают это еще лучше.

Поскольку все темы разные, вам нужно полностью понять структуру вашей темы, чтобы успешно реализовать адаптивный дизайн таблицы. Для некоторых тем может потребоваться дополнительная библиотека JavaScript.

В нашем примере мы перейдем к «Внешний вид» > «Настроить» > «Дополнительный CSS» , где мы можем добавить следующий пользовательский код CSS:

После того, как вы вставите свой собственный код в редактор, вам нужно будет выбрать «Опубликовать» , чтобы ваши изменения вступили в силу.

Шаг 3: проверьте отзывчивость таблицы в WordPress

WordPress имеет полезную встроенную функцию тестирования экрана, которая позволяет вам тестировать свой контент на экранах трех разных размеров. В нижней части экрана, где вы добавили свой собственный CSS, вы можете нажать на значки планшета или мобильного телефона, чтобы протестировать новый стиль вашей таблицы:

Для этого примера мы уже создали простую таблицу, содержащую все необходимые HTML-атрибуты для работы с нашим CSS. Наша точка останова в CSS установлена ​​на 600 пикселей, но ее можно изменить в соответствии с вашими потребностями.

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

Как сделать адаптивную таблицу с помощью плагина

Если вам неудобно настраивать код вашей темы или CSS, есть еще один вариант. Существует ряд доступных плагинов WordPress, которые могут помочь вам создать адаптивный дизайн таблиц для вашего веб-сайта.

Шаг 1: Загрузите плагин

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

• Ninja Tables : Помеченный как плагин номер один WordPress для создания адаптивных таблиц, он предлагает более 100 стилей таблиц на выбор.
• wpDataTables : это бесплатный плагин с премиум-версией, но облегченная версия содержит функции для создания богатых и интерактивных таблиц и диаграмм.
• WP Responsive Table : это простой и бесплатный плагин, который позволяет легко создавать адаптивные таблицы с горизонтальной прокруткой на маленьких экранах.

В оставшейся части этого примера мы будем использовать Ninja Tables, чтобы продемонстрировать, как создать адаптивную таблицу данных в WordPress.

Шаг 2: введите свои данные

После установки и активации плагина вы сможете сразу приступить к созданию таблицы. Вы можете перейти к NinjaTables > All Tables > Add Table :

Здесь вы можете добавить новую таблицу с нуля или импортировать таблицу из файла. Мы собираемся создать таблицу с нуля с помощью опции «Добавить таблицу» . Затем вам нужно будет ввести заголовок и описание для вашей таблицы:

Здесь у вас будут и другие варианты. Например, если вы настраиваете магазин WooCommerce, вы сможете использовать эту информацию для создания таблицы WooCommerce.

После того, как вы добавите свою информацию, вы нажмете «Добавить» , чтобы создать таблицу. Затем вам нужно будет начать вводить данные. Вы можете выбрать «Добавить столбец» , чтобы настроить структуру таблицы:

Вам нужно будет заполнить несколько полей, чтобы создать столбец. Это включает имя заголовка столбца и тип содержащихся в нем данных. Вы также сможете установить его Responsive Breakpoint:

Чтобы выбрать один из вариантов, определяющих, как ваши таблицы будут реагировать на разные устройства, вы можете получить доступ к меню, щелкнув Всегда показывать на всех устройствах :

После того, как вы создали свои столбцы, выберите «Добавить данные» , и NinjaTables предоставит вам простую форму для быстрого добавления нескольких записей в таблицу:

Вы можете оставить флажок «Продолжить добавление» отмеченным, если вам нужно сделать несколько записей. Когда вы закончите, вы можете закрыть окно и вернуться к экрану редактирования таблицы.

Шаг 3: отформатируйте таблицу

Теперь, когда у вас есть таблица с информацией, вы можете изучить настройки и параметры стиля NinjaTable. Из окна редактирования таблицы вы можете получить доступ к дополнительным настройкам на верхних вкладках, а также в правой части экрана:

У вас будет множество вариантов настройки стиля и внешнего вида вашей таблицы, включая чередование цветов строк таблицы, центрирование текста, скрытие данных и многое другое.

Шаг 4: Проверьте свою таблицу

NinjaTable позволяет легко проверить отзывчивость вашей таблицы во время ее редактирования. На вкладке «Дизайн таблицы» вы найдете три варианта тестирования скорости отклика экрана:

Вы можете выбрать Рабочий стол , Планшет или Мобильное устройство , чтобы посмотреть, как ваша таблица будет выглядеть на таких устройствах.

Каждая таблица, которую вы создаете, также имеет шорткод. Кроме того, вы можете легко добавить любую из ваших таблиц к содержимому вашего веб-сайта с помощью блока NinjaTable, который вы найдете в разделе «Форматирование» меню «Редактор блоков».

Позвольте WP Engine помочь вам сделать ваш сайт отзывчивым

Создание веб-сайта с надежным адаптивным дизайном не должно быть проблемой, если у вас есть доступ к нужным ресурсам.

Здесь, в WP Engine, мы хотим, чтобы вы могли предоставить своим клиентам лучший цифровой опыт. Ознакомьтесь с нашими многочисленными планами хостинга WordPress и решениями для разработчиков для вашего следующего проекта!