Руководство по плагину TablePress для пользователей WordPress »WebNots

В нашей предыдущей статье мы видели, как добавлять таблицы на сайт WordPress, а TablePress — один из плагинов, позволяющих пользователям легко добавлять таблицы на сайт WordPress. В этой статье давайте рассмотрим возможности и способы использования плагина TablePress.

Руководство по плагину TablePress для пользователей WordPress

Почему TablePress?

Перейдите к «Плагины> Добавить новый»В панели администратора WordPress и выполните поиск по ключевому слову« Таблица ». Вы найдете тысячи плагинов для создания различных типов таблиц, а поиск «tablepress» покажет плагин TablePress на первой странице.

Это полностью бесплатный плагин, созданный автором Тобиасом Бетге. Хотя расширения предлагаются как отдельные премиум-плагины, на панели инструментов нет навязчивых баннеров или ссылок с просьбой выполнить обновление.
400 000+ активных установок с 5-звездочным рейтингом от 2K + пользователей не могут быть неправильным суждением.
Достойная документация и очень хорошая поддержка на форуме.
Создавайте унифицированные таблицы на сайте, а также настраивайте внешний вид любой конкретной таблицы с помощью настраиваемого CSS.

Особенности плагина TablePress

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

Таблицы можно создавать и встраивать на любые страницы вашего сайта в виде шорткода.
Импортируйте таблицы из Microsoft Excel в форматах XLS, XLSX и CSV. Также возможен импорт путем копирования вручную и из формата JSON / HTML.
Таблицы можно экспортировать в форматы CSV, JSON и HTML.
Прямая вставка шорткода таблицы в визуальный редактор.
Отдельные таблицы можно настроить с помощью настраиваемого CSS.
Можно легко создавать сложные таблицы данных с полем поиска, разбивкой на страницы и фильтрацией.

Как использовать плагин TablePress?

Установите и активируйте плагин, чтобы увидеть меню администратора, созданное, как показано ниже:

Положение меню TablePress можно изменить в разделе «Параметры плагина» раздел.

Плагин имеет следующие разделы:

Все таблицы — показывает список всех созданных таблиц.
Добавить новую — позволяет создать новую таблицу.
Импорт — предлагает различные варианты импорта одной или нескольких таблиц.
Экспорт — предлагает различные варианты экспорта одной или нескольких таблиц.
Параметр плагина — в этом разделе можно настроить отдельные таблицы с помощью CSS.
О программе — показывает подробную информацию о плагине и другие подробности.

Создание таблицы в TablePress

Перейдите к «Добавить новое», Где вы можете ввести основные сведения, такие как имя таблицы, краткое описание и выбрать количество столбцов и строк для создания таблицы.

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

Раздел информации таблицы

Здесь вы можете просмотреть основные сведения, которые вы ввели на экране создания, а также шорткод для своей таблицы.

Содержимое таблицы

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

Управление таблицей

Этот раздел предлагает следующие возможности:

Добавьте в таблицу строки и столбцы.
Скрывать, отображать, удалять, дублировать и вставлять строки и столбцы.

Нажмите кнопку «Вставить ссылку» и выберите ячейку таблицы, чтобы открыть всплывающее окно для вставки ссылки WordPress по умолчанию. Вы также можете напрямую добавлять ссылки с помощью тегов привязки HTML.
Как и в случае со ссылками, щелкните «Вставить изображение» и щелкните ячейку, чтобы вставить изображения из медиатеки WordPress. Вы также можете напрямую добавлять изображения с помощью тега HTML img.
Расширенный редактор позволяет добавлять форматированный контент с помощью простого редактора.

Используйте параметры rowspan и colspan, чтобы объединить ячейку в строке и столбцы.

Атрибуты Rowspan и Colspan нельзя использовать в таблицах расширенных данных с использованием библиотеки JavaScript для сортировки.

Параметры стола

Здесь вы можете определить верхний и нижний колонтитулы, разные цвета для альтернативных строк и выделить строку при наведении. Вы также можете отобразить имя и описание таблицы над или под таблицей.

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

Особенности библиотеки JavaScript DataTables

Если вы включили первую строку таблицы в качестве заголовка в разделе «Параметры стола”, То таблицу можно преобразовать в таблицу данных, включив функции в этом разделе.

Создание таблиц данных с помощью TablePress

Сортировка по любому столбцу, просто нажав на столбец.
Поиск / Фильтрация — позволяет отображать окно поиска в правом верхнем углу таблицы, и пользователи могут фильтровать результаты, вводя ключевое слово. Это очень полезная функция, особенно когда у вас много строк, а содержимое не отображается из-за разбивки на страницы.
Разбиение на страницы — включите разбиение на страницы, чтобы отображать только определенные строки со ссылками «предыдущая / следующая» в правом нижнем углу таблицы. Вы также можете разрешить пользователю фильтровать и просматривать определенное количество строк.
Включите горизонтальную прокрутку, если у вас много столбцов в таблице, и добавьте пользовательские команды, если вы знаете, как использовать расширенные таблицы данных.

После того, как вы заполнили параметры, просмотрите таблицу и сохраните изменения. Вы также можете удалить, скопировать и экспортировать таблицу с того же экрана.

Вставка таблицы в сообщение или страницу

Каждая таблица в TablePress будет иметь уникальный идентификатор, который можно увидеть на странице «Информация о таблице»И используется как шорткод в визуальном редакторе, например [ table id = 100 /]. Также вы можете напрямую вставить таблицу в редактор, используя значок TablePress.

Просмотр всех таблиц

Все таблицы, созданные с помощью TablePress, можно увидеть в разделе «TablePress> Все таблицы»Меню. Вы можете выполнять такие действия, как копирование, экспорт и удаление как для отдельных таблиц, так и для всех.

Импорт таблиц

Хотя создание таблицы на экране легко, для больших таблиц это будет утомительной задачей. В таких сценариях вы можете создавать таблицы, используя электронную таблицу Excel в формате XLS, XLSX или CSV, и импортировать ее на свой сайт WordPress в разделе «ИмпортироватьВкладка плагина TablePress. Перейдите на вкладку «Импорт», чтобы увидеть следующие параметры:

Источник импорта может быть из файла на локальном компьютере, из URL-адреса, из файла на сервере или вручную.
В зависимости от источника загрузите файл со своего локального компьютера или предоставьте необходимые сведения.
Выберите формат файла, если вы используете XLSX, выберите вариант «XLSX -» в раскрывающемся списке. Хотя XLSX все еще находится в стадии бета-тестирования, он отлично работает, как мы тестировали.
Выберите, следует ли создать новую таблицу или изменить или добавить существующую таблицу. При выборе вариантов замены и добавления отобразится раскрывающийся список всех существующих таблиц, из которого вы можете выбрать таблицу.
Нажмите кнопку «Импорт», чтобы начать импорт таблицы.

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

Экспорт таблиц

Как и при импорте, все существующие таблицы можно экспортировать в формат CSV, JSON или HTML на ваш локальный компьютер. Также плагин позволяет выбирать несколько таблиц и экспортировать их в виде zip-файла.

Форматы CSV и HTML экспортируют только содержимое таблицы, а формат JSON также включает параметры таблицы.

Настройка таблиц в TablePress

До сих пор мы видели параметры по умолчанию и в разделе «Параметры плагина”Вы можете ввести собственный CSS для единообразного управления всеми таблицами или для управления отображением отдельных таблиц.

Добавление собственного CSS в TablePress

Ниже приведены селекторы для определения вашего стиля:

.tablepress — все таблицы TablePress должны иметь этот класс.
.tablepress-id — используется для стилизации определенной таблицы.
.column-id — используется для стилизации столбца таблицы.
.row-id — используется для стилизации строки таблицы.

Ниже приведен пример таблицы, созданной с помощью TablePress, предположим, что идентификатор равен 3, а некоторые стили настройки даны на основе этого примера:

[table “100nbsp” not found /]

Код CSS ниже необходимо добавить в текстовую область в разделе «Параметры плагина> Пользовательский CSS»И убедитесь, что установлен флажок«Загрузите эти команды «Custom CSS», чтобы повлиять на стиль таблицы.».

Измените ширину второго столбца на 200 пикселей:

.tablepress-id-3 .column-2 {
width: 200px;
}

Измените цвет фона строки 2 на красный:

.tablepress-id-3 .row-2 td {
Background-color: red;
}

Измените цвет альтернативных строк:

.tablepress-id-3 .odd td {
background-color: red;
}

.tablepress-id-3 .even td {
background-color: blue;
}

Изменить цвет строки при наведении:

.tablepress-id-3 .row-hover tr:hover td {
background-color lightgrey;
}

Общие вопросы

При использовании TablePress мы заметили несколько основных проблем:

Отзывчивость таблиц на мобильных устройствах, которую можно решить, установив расширение плагина.
Вставка таблиц в нижний колонтитул или боковую панель сайта — это можно решить, используя теги шаблона с «$ query » как строка или массив. Например, ниже приведен пример получения данных таблицы для таблицы id = 1:

<?php tablepress_print_table( array( 'id' => '1', 'use_datatables' => true, 'print_name' => false ) ); ?>

Если вы столкнулись с какой-либо другой конкретной проблемой на своем сайте, обратитесь к Форум чтобы узнать, адресован ли он, и проверить документация прежде чем подавать запрос в службу поддержки. Мы заметили, что большинство проблем решено в одном из этих мест.

Руководство по плагину TablePress для пользователей WordPress »WebNots