Как использовать TablePress с Elementor (виджет + шорткод)

Ключевые выводы

• TablePress работает с Elementor двумя способами: виджет с именем TablePress, который TablePress 3.4 добавляет на панель Elementor, и короткий код [идентификатор таблицы=1 /], помещенный в виджет Shortcode.
• Виджет таблицы TablePress в Elementor имеет раскрывающуюся таблицу и поле параметров конфигурации, а также вкладку "Стиль".
• TablePress по умолчанию включает сортировку, поиск и нумерацию страниц для посетителей по 10 строк на странице.
• Горизонтальная прокрутка в TablePress по умолчанию отключена, поэтому на телефоне с разрешением 390px переполняется таблица из пяти столбцов, пока не пометишь ее в настройках таблицы.
• Для короткой таблицы, которую следует редактировать и стилизовать внутри Elementor, виджет таблицы, такой как динамическая таблица главных аддонов, менее полезен, чем TablePress.

TablePress и Elementor работают вместе без какого-либо плагина моста. Вы собираете таблицу в TablePress, затем размещаете ее на странице Elementor с виджетом таблицы TablePress или с коротким кодом. Таблица сохраняет свою сортировку, поиск и нумерацию страниц.

Это руководство охватывает оба метода, стиль и настройку, которая фиксирует широкие столы на телефонах, Он также говорит, когда простой виджет стола является лучшим выбором. здесь все было протестировано с TablePress 3.4 и Elementor 4.3.

Шаг 1: Создайте или импортируйте таблицу в TablePress

Сам стол сделан вне Elementor, на экранах TablePress в приборной панели WordPress.

1. Установить и активировать СтолПресса из плагинов добавьте новое.
2. Открытый СтолПресса в меню приборной панели.
3. Чтобы ввести таблицу, нажмите Добавить новый, введите имя, установите количество строк и столбцов и заполните ячейки.
4. Чтобы ввести электронную таблицу, нажмите Импорт, выбирай Файл Загрузить, выберите файл, сохраните Добавить как новую таблицу и нажмите Импорт.
5. Обратите внимание на идентификатор таблицы. Первая таблица - ID 1.

TablePress импортирует файлы Excel, CSV, HTML и JSON. Мы импортировали шестирядный CSV тарифов на доставку, и он прибыл с первой строкой, уже установленной в качестве заголовка.

Шаг 2: Добавьте его с помощью виджета таблицы TablePress

TablePress регистрирует собственный виджет Elementor, поэтому для этого метода не требуется короткий код.

1. Редактируйте свою страницу с помощью Elementor.
2. Найдите на панели виджетов СтолПресс.
3. Перетащите виджет в контейнер.
4. Открыть Таблица выпадайте и выбирайте таблицу. Таблицы перечислены по идентификатору и имени.
5. Опубликовать страницу.

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

Или добавьте его с помощью короткого кода

Короткий код выполняет ту же работу и работает везде, где работают короткие коды.

1. Драг Элементор Шорткод виджет в контейнер.
2. Тип [table id=1 /], заменив 1 на удостоверение табличного.
3. Нажмите Применить чтобы загрузить предварительный просмотр.

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

Сортировка, поиск и нумерация страниц

Они включаются для каждой новой таблицы. Вы меняете их для каждой таблицы в поле с именем Особенности таблицы для посетителей сайта на экране редактирования таблицы.

Для таблицы с шестью строками поиск и нумерация страниц помех. Отметьте их, и таблица отображается в виде простой сетки.

Стиль стола TablePress в Элементоре

Виджет таблицы TablePress не имеет элементов управления стилем стола в Elementor, поэтому внешний вид расположен в трех других местах.

• Параметры таблицы на экране редактирования таблицы: какие строки являются заголовком и нижним колонтитулом, Чередование цветов строк, Подсветка висения строкии ан Дополнительные классы CSS поле.
• Пользовательские CSS для цветов, шрифтов и границ.TablePress дает каждой таблице класс на основе ее ID, поэтому вы можете нацелиться на одну таблицу.
• Вкладка Расширенный виджет в Elementor для поля, подкладки и ширины вокруг стола.

Короткий пример CSS, в котором изменен заголовок таблицы 1:

.tablepress-id-1 thead th {
  background: #101223;
  color: #ffffff;
}
.tablepress-id-1 tbody td {
  padding: 12px 16px;
}

Вставьте его в внешний вид, настройку, дополнительный CSS или в любое пользовательское поле CSS, которое есть в вашей настройке. Elementor Pro имеет по одному на элемент, а главные дополнения Пользовательское расширение CSS добавляет еще и один.

Почини стол на телефонах

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

1. Редактировать таблицу в TablePress.
2. Под Особенности таблицы для посетителей сайта, тик Горизонтальная прокрутка.
3. Нажмите Сохранить изменения и перезагрузите страницу на телефоне.

TablePress также продает функцию адаптивных таблиц в своем плане Pro (89 долларов в год, когда мы проверили) с режимами, которые складывают или сворачивают строки на небольших экранах. Другие способы обработки широких таблиц находятся в нашем руководстве адаптивные таблицы в Elementor.

Когда виджет таблицы - лучший выбор

TablePress создан для данных. Для небольшой таблицы, которая действительно является частью дизайна страницы, он добавляет шаги: второй экран администратора, CSS в другом месте и плагин для постоянного обновления.

Нужен только маленький столик? выше Виджет динамической таблицы строит его на панели Elementor, с вкладкой Стиль и строками, которые стекаются на телефонах.

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

Часто задаваемые вопросы

Заключительные мысли

TablePress и Elementor хорошо подходят для таблиц данных: импортируйте файл, загляните в виджет таблицы TablePress и не забудьте включить горизонтальную прокрутку для телефонов. Стиль требует немного CSS, потому что у виджета нет вкладки "Стиль".

Для коротких таблиц, которые должны выглядеть как часть страницы, Динамическая таблица держит клетки и укладку внутри Элементора.

Связанное чтение

• Как создать таблицу в Elementor (4 способа)
• Лучшие плагины для WordPress