Здравствуйте, дамы и господа, а также те, кто уже успел запутаться в собственных таблицах сайта при переходе на мобильную версию. Сегодня у нас на повестке дня — тема, которая лично меня зацепила за живое (и, надеюсь, вас тоже). Речь пойдёт о том, как лихо таблица в CMS WordPress теряет заголовки при переезде на маленький экран.
Представьте себе: живёт себе табличка. Скромная, но гордая. Сделана с любовью через Table Press. И вдруг — бац! — мобильный вид, и её прекрасные шляпки (заголовки, если по-взрослому) куда-то улетают. Пользователь остаётся один на один с контентом, который надо двигать пальцем, как гигантский рулон обоев. Удобства — ноль, одни страдания.
Был у меня на примете один сайт-альтернатива (не на Table Press, но с интересной идеей), где таблица красиво превращалась в то, что хочу https://advita.ru/otchety . Дай, думаю, поищу уже готовое решение по WordPress. Начал искать плагины. Перерыл всё, что смог. В итоге, как настоящий сыщик, вышел на двух подозреваемых.
Первый — #Make Tables Responsive, который обещал всё, что нужно, но настроить его оказалось тем ещё квестом: после моих стараний все столбцы и настройки дружно собрали чемоданы и уехали в неизвестном направлении.
Второй плагин — #Magic Liquidizer Responsive Table. С ним кое-как удалось добиться вида, который я отправил заказчику. А заказчик сказал: «Это не то пальто». В общем, время поджимало, и я решил: хватит плясок с бубном вокруг плагинов! Буду писать свой код. Не через PHP и базу данных, а на коленке, из того, что выдает #TablePress (аргументы – Заказчик уже научился заносить данные через этот плагин и это стоило мне много времени ).
Итак, сажусь за парту. Скачал код странички, нашёл нужный файл со стилями, загрузил в #VS Code. И поехали.
Первым делом — функция-обёртка с «try-catch», чтоб ошибки не разбегались, а сидели смирно и показывались там, где надо.
Затем — переменные:
- Ищем саму таблицу (контейнер с классом *reports_table*).
- Находим контейнер побольше, где таблица живёт.
- Ищем Table Press по классу (тут без вариантов).
Дальше начинается магия. Создаём новую таблицу, новые элементы, новый мобильный блок. Задумка простая: старую таблицу не трогаем, новую лепим рядышком. А CSS уже будет решать, кому показываться, а кому прятаться, в зависимости от ширины экрана.
Лезем в заголовки — получаем их текстовое содержание массивом. Чистим trim’ом от лишних пробелов, чтобы осталось одно мясо. Потом достаём строки (а внутри них — ячейки, наши родные «td-шечки»). Проверяем через консоль — всё выводится, красота!
Создаём временный контейнер (#fragment), куда будем складывать дивы с нашими строками. Цикл по строкам, внутри — цикл по заголовкам.
Для каждой «немобильной строки» создаём отдельную табличку, внутри неё — строку, внутри строки — ячейку с заголовком.
Потом вставляем туда же значение ячейки. И делаем проверку на пустоту: если ячейка пустая — пусть будет честно пусто, без иллюзий.
Когда матрёшка собрана, отправляем фрагмент в основной контейнер. Затем всё это хозяйство выводим на экран.
Дальше — стили. Создал отдельный файлик «стилизация мобильной таблицы». Всё привязал к классу .str (да-да, именно тот самый див). Сделал медиа-запрос: при ширине меньше 700 пикселей большая таблица исчезает, а маленькая — появляется. Проверил на айфоне — работает. Большая таблица ушла в закат, маленькая радует глаз.
PS. Вносить новые стили желательно не в отдельный файл .css , а в настройках самого плагина Tableprees -> Опции -> Произвольный стиль. Так меньше вероятность потерять стили при обновлении плагина.
Честно скажу: моя цель была не учить вас уму-разуму, а поделиться наработками и скромно попросить помощи. Друзья, если увидите ошибки — пишите! Я только за. Глаза у меня, конечно, есть, но четыре глаза, как известно, лучше двух. Буду признателен, благодарен и даже, пожалуй, растроган.
А если кто захочет сотрудничать — милости прошу. Заходите на мой сайт (webprograms.ru), подписывайтесь на Telegram-канал «Юра кодит». Ссылки — под видео, в описании и в закреплённом комментарии.
Всем пока! И пусть ваши таблицы никогда не слетают в самый неподходящий момент.