Как адаптировать существующие таблицы в WordPress для просмотра на смартфонах

27 октября 2019  /  HTML & CSS, WordPress

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

Напомню, что для просмотра таблиц на смартфонах их необходимо помести внутрь тега <div>..</div> со стилем overflow: auto;. И тогда, если они не помещаются по ширине, появляются полосы прокрутки, которые позволяют просмотреть содержимое таблиц.

Как адаптировать существующие таблицы в WordPress для просмотра на смартфонах

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

В прошлый раз я описал решение на jQuery, которое выполнялось на стороне посетителя, теперь — на PHP и оно выполняется сервером.

Как поместить таблицу внутрь блока DIV

Необходимо добавить следующий код в файл functions.php вашей темы WordPress.

/* Оборачиваем таблицы в DIV с целью мобильной совместимости */

function replace_table($text) {
    $text = str_replace('<table', '<div class="table"><table', $text);
    $text = str_replace('</table>', '</table></div>', $text);
    return $text;
}
add_filter('the_content', 'replace_table');

Как добавить полосы прокрутки к блоку DIV

Далее добавим оформление для блока с таблицей в файл таблицы стилей (style.css) вашей темы WordPress.

.table{
    overflow: auto;
    margin: 0 0 1em;
}    

Это решение было проверено на WordPress 5.2.4 и сейчас работает с текущей темой этого блога.

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

 

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Мой лучший VDS/VPS хостинг
2019 © Технический блог
uptime узнать
Домен : reg.ru
Хостинг : adman.com
SQL - 37 | 0,486 сек. | 8.95 МБ