сайт на #Wordpress - адаптация таблиц под мобильники

Мои соцсети: https://webprograms.ru/#channels
#адаптивная вёрстка wordpress #код для адаптивной таблицы #wordpress #tablepress #адаптивнаявёрстка #css #мобильныйсайт

00:01 Введение и проблема

• Обсуждение проблемы преобразования таблицы в мобильный вид на сайте WordPress.
• Проблема: заголовки таблицы исчезают при переходе в мобильный вид, требуется перемещение контента для просмотра таблицы.
• Поиск альтернатив и изучение плагинов.

01:00 Обзорплагинов

• Обзорплагинов: TablePress, MakeTable, MagicResponsiveTable.
• Проблемы с настройкой MakeTable: столбцы сбрасываются.
• Недовольство заказчика результатом с MagicResponsiveTable.
• Решение написать собственный код для преобразования таблицы.

01:55 Начало работы с кодом

• Скачивание кода и стилей для преобразования таблицы.
• Определение места для нового кода в теме WordPress.

02:53 Поиск таблицы и контейнера

• Поиск таблицы и контейнера с классом report_table.
• Нахождение таблицы по классу table_press.

04:44 Создание новых элементов

• Создание нового контейнера и мобильного блока для новой таблицы.
• Идея: новая таблица будет выводиться вместе со старой, но скрываться при переходе в мобильный вид.

05:47 Получение заголовков и строк

• Получение текстового содержания заголовков и строк таблицы.
• Проверка заголовков и строк через консоль.

08:11 Работа со строками

• Создание временного контейнера для строк.
• Перебор строк и получение необходимой информации.

10:33 Создание таблиц для строк

• Создание отдельной таблицы для каждой строки.
• Вставка заголовков и значений в таблицы.

14:13 Вставка таблиц в блок

• Вставка таблиц в блок с дивами.
• Проверка правильности сборки матрешки таблиц.

17:01 Завершение формирования таблицы

• Вставка фрагментов в контейнеры.
• Проверка отображения таблицы на экране.

19:03 Добавление значений ячеек

• Проверка пустоты ячеек и добавление значений.
• Формирование ячеек внутри цикла по заголовкам.

20:50 Формирование стилей

• Переход к формированию стилей для компактного отображения таблицы в мобильном виде.
• Оценка текущего отображения таблицы в мобильном виде.

21:13 Стилизация мобильной таблицы

• Создан файл для стилизации мобильной таблицы.
• Стили привязаны к классу `tr` для действия внутри класса `str`.
• Ширина мобильного блока установлена на 75%.

21:53 Настройка медиазапроса

• Медиазапрос настроен так, что мобильный блок открывается только при переходе в мобильную версию.
• При уменьшении экрана до 700 пикселей основной контейнер `dt-container` исчезает.

22:39 Применение класса `dt-container`

• Класс `dt-container` применяется к другим табличкам в разных местах.
• При уменьшении экрана `dt-container` убирается.

23:07 Проверка работы

• При уменьшении экрана таблица появляется.
• Можно протестировать на отзывчивом устройстве.

23:44 Заключение

• Автор делится своими наработками и просит зрителей исправить ошибки в комментариях.
• Приглашает к сотрудничеству через сайт и телеграм-канал.
• Прощается с аудиторией.

Видео сайт на #Wordpress - адаптация таблиц под мобильники канала Yura_kodit