Руководство для WordPress-разработчика по созданию адаптивных таблиц - webOK - Бесплатная биржа фриланса, онлайн-школа, складчина.

Руководство для WordPress-разработчика по созданию адаптивных таблиц

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

Введение в таблицы WordPress

Добавить таблицы в WordPress достаточно просто. Редактор Gutenberg включает в себя блок «Таблицы», который можно разместить в любой записи сайта.

Руководство для WordPress-разработчика по созданию адаптивных таблиц

При создании таблицы редактор спрашивает, сколько столбцов и строк нужно в нее добавить.

Руководство для WordPress-разработчика по созданию адаптивных таблиц

После того, как таблица будет создана, ее можно заполнить любым удобным способом. А также отредактировать ее содержимое так же, как и в стандартном блоке абзаца.

Руководство для WordPress-разработчика по созданию адаптивных таблиц

При просмотре на сайте большинство таблиц будут выглядеть идеально.

Руководство для WordPress-разработчика по созданию адаптивных таблиц

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

Руководство для WordPress-разработчика по созданию адаптивных таблиц

При этом некоторые темы оформления включают в себя различные стили оформления таблиц. В предыдущем примере мы использовали стандартную тему оформления Twenty Twenty. Вот та же таблица, которая отображается на сайте, использующем тему оформления Astra:

Руководство для WordPress-разработчика по созданию адаптивных таблиц

Для решения этой проблемы следует найти способы изменения CSS-стилей таблицы.

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

В WordPress есть два способа решения этой проблемы:

1. Использование плагинов

Есть много плагинов, которые позволяют сделать таблицы WordPress адаптивними. Один из них – Ninja Tables.

Руководство для WordPress-разработчика по созданию адаптивных таблиц

После установки и активации плагина Ninja Tables перейдите в меню Ninja Tables> All Tables, чтобы создать новую таблицу.

Руководство для WordPress-разработчика по созданию адаптивных таблиц

В редакторе таблиц нажмите кнопку Add Column, чтобы добавить столбцы. Каждый из них можно на десктопном или мобильном устройстве.

Руководство для WordPress-разработчика по созданию адаптивных таблиц

Затем нажмите кнопку Add Data, чтобы создать строки таблицы. Когда закончите, перейдите на вкладку Table Design. Здесь можно просмотреть, как таблица будет выглядеть на ПК, планшете и смартфоне.

Руководство для WordPress-разработчика по созданию адаптивных таблиц

Вы также можете создавать мобильные стековые представления, установив флажок Enable Stackable Table.

Руководство для WordPress-разработчика по созданию адаптивных таблиц

А также опубликовать созданную таблицу, используя блок Ninja Tables в блочном редакторе Gutenberg.

Руководство для WordPress-разработчика по созданию адаптивных таблиц

2. Редактирование темы оформления

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

Руководство для WordPress-разработчика по созданию адаптивных таблиц

Для этого нужно добавить определенный CSS-класс к HTML-таблицам, которые необходимо сделать адаптивными. Например, <table class=”responseive-yes»>. Затем нужно добавить приведенный ниже код в файл style.css используемой темы оформления.

@media only screen and (max-width: 640px) { table.responsive-yes { margin-bottom: 0; overflow: hidden; overflow-x: scroll; display: block; white-space: nowrap; } }

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

В качестве альтернативы можно использовать CSS для объединения столбцов:

Руководство для WordPress-разработчика по созданию адаптивных таблиц

Чтобы реализовать его, вам нужно сделать две вещи:

  1. Добавьте в HTML таблицы теги <thead>и <tbody> .
  2. Добавьте фрагмент CSS-кода в таблицу стилей используемой темы оформления, чтобы настроить контрольную точку и перестроить столбцы таблицы.

Сначала откройте редактор Gutenberg и выберите таблицу, с которой хотите работать. Затем кликните по трем точкам и выберите параметр «Редактировать как HTML»:

Руководство для WordPress-разработчика по созданию адаптивных таблиц

Затем нужно обернуть заголовки столбцов в теги <thead>, а все остальное содержимое таблицы – в теги <tbody>:

<thead> <tr> <td>Fruits</td> <td>Vegetables</td> </tr> </thead> <tbody> <tr> <td>Apple</td> <td>Tomato</td> <tr> </tbody>

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

/*This bit of code: Exis | exisweb.net/responsive-tables-in-wordpress Original idea: Dudley Storey | codepen.io/dudleystorey/pen/Geprd */ @media screen and (max-width: 600px) { table {width:100%;} thead {display: none;} tr:nth-of-type(2n) {background-color: inherit;} tr td:first-child {background: #f0f0f0; font-weight:bold;font-size:1.3em;} tbody td {display: block; text-align:center;} tbody td:before { content: attr(data-th); display: block; text-align:center; } }

Данный код устанавливает контрольную точку на 600px и перестраивает таблицу при просмотре на экране меньшего размера.

Единственным недостатком этого подхода является необходимость ручного добавления тегов <thead> и <tbody> во все таблицы. Было бы проще включить объединенные столбцы с помощью плагина Ninja Tables.

Вместо этого мы рекомендуем использовать этот JavaScript-код, так как он позволяет автоматизировать процесс.

Заключение

Существует два способа создания адаптивных таблиц в WordPress:

  1. Использовать специализированный плагин.
  2. Изменить файлы используемой темы оформления, чтобы сделать таблицы прокручиваемыми или автоматически объединить их столбцы.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *