Таблицы – важный элемент для структурирования данных на сайте. Однако стандартные таблицы HTML плохо отображаются на мобильных устройствах, что ухудшает пользовательский опыт. В этой статье мы разберём, как сделать адаптивные таблицы в WordPress, используя собственные шорткоды и минимальный CSS, а также рассмотрим полезные плагины, которые помогут решить эту задачу без лишнего кода.
Почему стандартные таблицы в WordPress неадаптивны? Особенности мобильного отображения таблиц
HTML-таблицы по умолчанию имеют фиксированную структуру с колонками и строками. При уменьшении ширины экрана содержимое таблицы остаётся прежним, что приводит к горизонтальной прокрутке или сжатию текста, делая таблицу неудобной для чтения. Многие темы WordPress не предусматривают стили для адаптивных таблиц, а встроенный редактор Gutenberg использует классический HTML без адаптивных настроек.
Чтобы исправить это, нужно либо использовать CSS-решения с прокруткой, либо менять структуру таблицы на мобильных устройствах, либо применять JavaScript. Мы сосредоточимся на простом и эффективном способе — создании шорткода, который оборачивает таблицу в адаптивный блок с нужными стилями.
Создание шорткода для адаптивных таблиц в WordPress
Добавим в functions.php вашей темы или в отдельный плагин код, который создаст шорткод [wpid_table]. Этот шорткод обернёт содержимое в контейнер с классом для адаптивности и вставит необходимые стили.
function wpid_shortcode_adaptive_table( $atts, $content = null ) {
// Убираем лишние пробелы
$table_html = trim(do_shortcode($content));
// Добавляем контейнер для адаптивности
$output = '<div class="wpid-adaptive-table">' . $table_html . '</div>';
// Добавляем CSS стили (один раз)
static $added_styles = false;
if ( ! $added_styles ) {
$custom_css = '<style>
.wp-id-adaptive-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wp-id-adaptive-table table { border-collapse: collapse; width: 100%; }
.wp-id-adaptive-table th, .wp-id-adaptive-table td { padding: 8px 12px; border: 1px solid #ddd; text-align: left; }
@media (max-width: 600px) {
.wp-id-adaptive-table table, .wp-id-adaptive-table thead, .wp-id-adaptive-table tbody, .wp-id-adaptive-table th, .wp-id-adaptive-table td, .wp-id-adaptive-table tr { display: block; }
.wp-id-adaptive-table thead tr { position: absolute; top: -9999px; left: -9999px; }
.wp-id-adaptive-table tr { margin: 0 0 1rem 0; }
.wp-id-adaptive-table td { border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; }
.wp-id-adaptive-table td:before {
position: absolute;
top: 0;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
font-weight: bold;
}
/* Добавим заголовки ячеек для каждой колонки */
.wp-id-adaptive-table td:nth-of-type(1):before { content: "Колонка 1"; }
.wp-id-adaptive-table td:nth-of-type(2):before { content: "Колонка 2"; }
.wp-id-adaptive-table td:nth-of-type(3):before { content: "Колонка 3"; }
/* Добавьте больше, если у вас больше колонок */
}
</style>';
$output = $custom_css . $output;
$added_styles = true;
}
return $output;
}
add_shortcode( 'wpid_table', 'wpid_shortcode_adaptive_table' );Этот код позволяет оборачивать любую таблицу в шорткод [wpid_table]. При просмотре на экранах шириной менее 600px таблица становится блочной, каждая ячейка получает заголовок из псевдоэлемента :before, что улучшает восприятие на мобильных устройствах.
Важно: замените текст "Колонка 1", "Колонка 2" и т.д. в CSS на реальные названия ваших столбцов, чтобы пользователи понимали содержимое.
Пример использования шорткода с таблицей
В редакторе WordPress вставьте таблицу в классическом режиме (HTML или визуальный) и оберните её шорткодом:
[wpid_table]
<table>
<thead>
<tr>
<th>Название</th>
<th>Описание</th>
<th>Цена</th>
</tr>
</thead>
<tbody>
<tr>
<td>Товар 1</td>
<td>Описание товара 1</td>
<td>1000 руб.</td>
</tr>
<tr>
<td>Товар 2</td>
<td>Описание товара 2</td>
<td>1500 руб.</td>
</tr>
</tbody>
</table>
[/wpid_table]При таком подходе таблица будет адаптивной, а для мобильных устройств автоматически появятся заголовки в каждой ячейке.
Плагины для создания адаптивных таблиц в WordPress: обзор и рекомендации
Если не хочется писать код, можно воспользоваться готовыми плагинами. Вот несколько популярных с адаптивным режимом:
- TablePress — самый популярный плагин для таблиц. Позволяет создавать и вставлять таблицы через шорткоды. Есть расширение TablePress Responsive Tables, которое добавляет адаптивность.
- Ninja Tables — современный плагин с удобным редактором, поддерживает адаптивный режим и интеграцию с WooCommerce.
- WP Table Builder — визуальный конструктор таблиц с возможностью создавать адаптивные таблицы и добавлять мультимедийный контент.
Для установки плагина перейдите в админке WordPress в «Плагины» → «Добавить новый» и введите название плагина. После активации настройте адаптивность согласно документации.
Как оптимизировать адаптивные таблицы для SEO и скорости
При использовании адаптивных таблиц важно не только сделать их удобными, но и не навредить SEO и скорости загрузки.
- Используйте семантические теги
<thead>,<tbody>,<th>для правильного восприятия контента поисковиками. - Минимизируйте объем CSS и JavaScript, чтобы не замедлять сайт.
- Проверяйте отображение на разных устройствах и браузерах.
- Если таблица очень большая, рассмотрите возможность пагинации или сворачиваемых секций, чтобы не перегружать страницу.
Интеграция с плагином Clearfy Pro для ускорения
Если вы используете Clearfy Pro для оптимизации сайта, убедитесь, что он не отключает важные стили или скрипты, связанные с таблицами. Clearfy позволяет тонко настраивать загрузку ресурсов, что поможет ускорить загрузку страниц с таблицами.
Включите опцию "Оптимизация CSS" с исключением стилей таблиц, чтобы адаптивные таблицы работали корректно.
Заключение по адаптивным таблицам в WordPress
Создание адаптивных таблиц — задача, которую можно решить как собственным кодом через шорткоды, так и с помощью популярных плагинов. Ключевое — обеспечить удобство чтения на мобильных устройствах без потери структуры и информативности.
Приведённый шорткод и CSS отлично подходят для небольших проектов и тех, кто предпочитает минимализм. Для более сложных таблиц и дополнительного функционала лучше использовать проверенные плагины с адаптивными возможностями.
Используйте данный материал как отправную точку и адаптируйте под свои задачи — так вы улучшите пользовательский опыт и качество сайта на WordPress.