Обратите внимание! Недорогие виртуальные серверы в Амстердаме (Нидерланды). Оплата в рублях картами банков РФ, СБП, электронными деньгами. Подробнее.

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

Опубликовано: 27 октября 2019
Раздел(ы): HTML & CSS, WordPress
Просмотры: 1624
Комментарии: 0

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

Напомню, что для просмотра таблиц на смартфонах их необходимо помести внутрь тега <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 и сейчас работает с текущей темой этого блога.

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

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

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

Нажимая кнопку "Отправить" Вы даёте свое согласие на обработку введенной персональной информации в соответствии с Федеральным Законом №152-ФЗ от 27.07.2006 "О персональных данных", на условиях и для целей определенных политикой конфиденциальности сайта.
© Юрий Рассадников, 2011 - 2024
uptime узнать
Домен : reg.ru
Хостинг : adman.com
SQL - 7 | 0,224 сек. | 7.25 МБ