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

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

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

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

В прошлый раз я описал решение на 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 и сейчас работает с текущей темой этого блога.

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