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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Для этого нужно добавить определенный 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 для объединения столбцов:

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

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

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

Затем нужно обернуть заголовки столбцов в теги <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. Изменить файлы используемой темы оформления, чтобы сделать таблицы прокручиваемыми или автоматически объединить их столбцы.