В уроке разберём как создать адаптивные таблицы wordpress с помощью простого CSS, javascript и плагином. Проблема кроется в криво созданных темах, не поддерживающих сжатие, адаптивность. Вариантов два менять шаблон на более подходящий, или прописывать самому.
Адаптивные таблицы с помощью css кода
Любая таблица это набор HTML команд <table></table> начинают и закрывают, <tr> </tr> обозначение строки, <th><td> столбцы. Для понимания простая структура выглядит так:
<table>
<tr>
<th>заглавная строка -1</th>
<th>заглавная строка -2 </th>
<th>заглавная строка -3 </th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
А так выглядит на экране
| заглавная строка -1 | заглавная строка -2 | заглавная строка -3 |
|---|---|---|
| 1 | 2 | 3 |
| 4 | 5 | 6 |
С помощью css можно добиться крутых результатов, самый простой способ добавить в style.css такой код:
table {max-width:100%;}
Задаем таблицам wordpress стиль, чтобы растягивалась на всю ширину (контента) на 100%, но приставка max говорит о максимальном значении, и следует, что может быть и меньше при сжатии экрана. Если способ не помог, то прибегнем к более продвинутому. Использую бутстрап можно добиться универсального решения для адаптивности.
Информация взята с официального репозитива бутстрапа. Оборачиваем таблицу в:
<div class="table-responsive">здесь сам код, можно взять из примера выше</div>
А эту часть вставляем в любую свободную область в файле style.css
.table-responsive {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
Но если статей много, и добавлять для каждой таблицы отдельный div становится сложно, то справиться JS. Так же можно почитать:
JS для адаптивных таблиц wordpress
Чтобы одним разом сделать адаптивными все таблицы на сайте, необходимо применить функцию, или как принято называть хук. Записываем его в файл function.php перед закрывающим тегом ?> . Вот комбинация:
add_action( 'wp_footer', 'resp_tables' );
function resp_tables() {
if ( is_singular() ) {
?>
<script>
jQuery(document).ready(function ($) {
$('article table').wrap('<div class="table-resp"></div>');
});
</script>
<style>
@media screen and (max-width: 1035px) {
.table-resp {
width: 100%;
overflow: auto;
margin: 0 0 1em;
}
}
</style>
<?php
}
} И вставляем например сюда:
Теперь всё будет перезаписываться, и применять класс table-resp. Естественно, все манипуляции лучше производить через редакторы по FTP соединению. Если стало не понятно, предлагаю просмотреть видео ролик.
С помощью плагина
Нашёл один достойный вариант плагин WP Responsive Table. Принудительно перезаписывает стили которые были до его установки, и добавляет собственные. Понравился минимализмом и наличием русского языка. Устанавливается стандартно, либо поиском или загрузкой с официального хранилища wordpress.
- Дополнительные настройки не требуются
- Не использует шорткоды, работает с любым редактором (с guttenberg тоже)
- Возможность сортировки столбцов
- Не увеличивает высоту
- Совершенно бесплатно
После установки во вкладке “внешний вид-настроить” появится новый пункт с одноимённым названием “настройки таблиц”. Зайдя, найдёте не большой функционал, которого хватит с головой для адаптации.
На скриншоте показаны не все параметры. Поэтому устанавливайте плагин если не хотите возиться с программированием. Он протестирован и обновляется регулярно, за безопасность можно не переживать.
Мы советуем использовать для нового сайта обёртывание в дополнительные теги, если ресурс старый то скрипт. В статье вы познакомились, научились делать адаптивные таблицы wordpress, если урок не понятен пишите нам.
