TablePress: создавайте таблицы в WordPress без единой строчки кода

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

Однако есть определенные типы запросов, которые всегда вызывают немедленную сыпь у многих дизайнеров сайтов : любой запрос, который включает слово «таблица» .

Эти маленькие зверюшки такие хрупкие! Одна маленькая ложная манипуляция, такая как « < » или « > », удаленная по ошибке, и ваша онлайн-страница теряет свою красивую геометрическую структуру и становится похожей на руины Помпеи. ЭТО ВСЕ СЛОМАНО!

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

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

Внезапно возникло желание добавить таблицу, в которой сравнивались бы ваши тарифные планы или характеристики ваших флагманских продуктов? Следуйте руководству. К концу этого руководства вы сможете уверенно добавлять таблицы в WordPress .

Первоначально написанная в феврале 2019 года, эта статья последний раз обновлялась в марте 2022 года.

Вашим лучшим проектам WordPress нужен лучший хостинг!

WPMarmite рекомендует Bluehost: отличная производительность, отличная поддержка. Все, что нужно для отличного старта.

Попробуйте Блюхост

Ознакомьтесь с нашими подробными руководствами по выбору доменного имени и созданию профессионального веб-сайта на WordPress.

Что такое Таблепресс?

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

Благодаря более чем 800 тысячам активных установок и общему рейтингу 5 звезд из 5 в официальном каталоге WordPress (более 4200 отзывов), нет никаких сомнений: это флагманский плагин для создания таблиц и управления ими .

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

Что предлагает TablePress?

TablePress имеет много интересных функций:

• Интуитивно понятный интерфейс с функцией перетаскивания.
• Возможность интегрировать таблицы в ваши статьи, страницы или текстовые виджеты с помощью шорткода.
• Простое редактирование табличных данных, как в Excel.
• Импорт и экспорт таблиц в форматах Excel, CSV, JSON и HTML.
• Синхронизация с Google Таблицами.
• Ячейки таблицы, принимающие математические функции и расчетные формулы.
• Графическая настройка с помощью кода CSS.

Как добавить таблицу в WordPress с помощью плагина TablePress?

После установки и активации TablePress вы увидите новую вкладку с названием плагина в меню администратора WordPress.

Чтобы добавить новую таблицу на свой сайт WordPress, просто нажмите TablePress > Добавить новую таблицу в меню администратора или вкладку «Добавить новую» в верхней части интерфейса TablePress.

Чтобы создать таблицу, вам будет предложено:

• Дайте вашей таблице имя . Если вы планируете разместить на своем сайте много таблиц, подумайте о том, чтобы дать им четкое и описательное имя.
• Дайте краткое описание (необязательно). Потратьте время, чтобы добавить любую информацию, которая может быть полезна позже.
• Укажите количество строк и столбцов в таблице . Хотя плагин позволяет вам легко добавлять и удалять эти элементы позже, я рекомендую вам потратить несколько минут, чтобы перечислить информацию, которую вы хотите представить в своей таблице. Этот маленький шаг предвкушения сэкономит вам много времени позже.

Затем нажмите синюю кнопку «Добавить таблицу» внизу страницы. Теперь вы попадете на экран «Редактировать таблицу», где вы можете редактировать свою таблицу.

TablePress также имеет две функции для импорта и экспорта существующей таблицы (через TablePress > Import a Table или TablePress > Export a Table).
Например, вы можете импортировать таблицу из файла CSV, XLS или XLSX из электронной таблицы (например, Excel). Наконец, вы также можете экспортировать свои таблицы в другие программы, например электронные таблицы.

Как редактировать структуру и содержимое таблицы?

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

С помощью перетаскивания легко изменить порядок строк и столбцов.

Как обогатить свои таблицы TablePress?

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

Как добавить изображение в таблицу TablePress?

Чтобы добавить изображение, нет ничего проще. Прокрутите страницу вниз до блока «Манипуляции с таблицей» и нажмите «Вставить изображение».

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

Как добавить ссылку в таблицу?

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

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

Как вы добавляете богатый контент в свою таблицу?

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

Чтобы найти расширенный редактор, прокрутите вниз до блока «Манипуляции с таблицами» и нажмите одноименную кнопку.

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

Какие дополнительные параметры существуют для настройки вашей таблицы?

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

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

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

Наконец, поле «Дополнительные классы CSS» позволит вам назначить один или несколько классов по вашему выбору, если вы хотите настроить его в CSS.

JavaScript-библиотека DataTables

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

Вы можете отключить все, если вам это не нужно.

Присоединяйтесь к подписчикам WPMarmite

Получите последние сообщения WPMarmite (а также эксклюзивные ресурсы).

ПОДПИШИСЬ СЕЙЧАС

Как редактировать свои таблицы?

TablePress позволяет легко редактировать структуру таблицы.

В поле «Управление таблицей» вы найдете различные варианты добавления, удаления, дублирования и скрытия строк и столбцов . Вы также можете объединить ячейки в строку или столбец.

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

Затем выберите подходящий эффект. Например, ниже мы решили вставить новый столбец между двумя существующими столбцами:

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

Как изменить старую таблицу?

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

Чтобы найти список существующих таблиц, выберите TablePress > All Tables в меню WordPress.

Теперь вы можете выбрать таблицу, которую хотите редактировать.

Как вставить таблицу в пост или на страницу?

Теперь, когда вы создали свою таблицу, все, что вам нужно сделать, это вставить ее в запись или страницу на вашем сайте WordPress.

Для этого откройте или создайте целевой документ, в котором вы хотите опубликовать свою таблицу, в редакторе контента WordPress (Gutenberg).

Скопируйте шорткод стола, доступный в поле «Информация о столе»:

К вашему сведению, этот шорткод имеет следующий формат: [table id=<the-ID> /] . Каждая таблица имеет свой идентификатор (цифра 2 в примере выше).

Вставьте шорткод в блок «Шорткод» в публикации по вашему выбору, где вы хотите, чтобы он был в содержании:

Вот результат на сайте:

Обратите внимание, что отображение может немного отличаться в зависимости от используемой темы.

В любом случае, поздравляю: вы сделали это с пальцами в носу!

Дополнительные функции для дальнейшего развития TablePress

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

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

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

Ускорьте свой сайт с помощью WP Rocket

Превратите свой сайт в ракету с помощью самого мощного плагина кэширования, признанного экспертами WordPress.

Попробуйте WP Rocket

Бонус: расширение TablePress

Вы можете добавить еще больше функциональности в TablePress с библиотекой из примерно 20 бесплатных или премиальных расширений.

На сайте плагина вы найдете 20 официальных расширений. Вот некоторые из наиболее полезных:

• Адаптивные таблицы (премиум): иметь красивые таблицы, адаптированные ко всем устройствам (настольным, планшетным и мобильным). Мы сожалеем, что этот плагин платный, он оставляет большие возможности для потенциального конкурента…
• Шорткод для вызова содержимого одной ячейки: очень полезно, если вы хотите опубликовать некоторые элементы таблицы, такие как средний балл, в разных местах вашей страницы.
• Автоматический и запланированный импорт таблиц (премиум): очень полезно, если вы обновляете свои таблицы с помощью внешнего решения, такого как, например, Excel.

Технически подавляющее большинство так называемых премиум-расширений TablePress можно загрузить и использовать бесплатно. Тем не менее, разработчик Тобиас Батж призывает вас сделать пожертвование в размере любой суммы, чтобы вознаградить его работу.

Какие еще есть варианты добавления таблицы в WordPress?

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

Блок «Таблица» в редакторе контента WordPress

Во-первых, редактор контента WordPress имеет удобный блок «Таблица» для простого и быстрого создания таблицы в вашем контенте.

В частности, вы можете:

• Добавляйте или удаляйте строки или столбцы в режиме реального времени.
• Выберите один из двух стилей отображения: «по умолчанию» и «полосы».
• Измените цвет текста и фона.
• Назначьте ячейкам фиксированную ширину.
• Установите ширину и стиль ваших границ, а также типографику.

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

Те из вас, кто хочет создавать более сложные, реорганизуемые таблицы или иметь функции, подобные Excel, предпочтут TablePress.

Строители страниц

Другой вариант добавления таблицы в WordPress — использовать конструктор страниц.

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

Самый известный из них — Elementor, который аккумулирует более 5 миллионов активных установок в официальном каталоге. Каким бы мощным и гибким он ни был, Elementor не предлагает виджет (модуль) для построения таблицы!

Однако для достижения своих целей вы можете использовать одно из многочисленных дополнений премиум-класса, например Crocoblock, ElementsKit или Ultimate Addons.

А у меня может быть даже кое-что получше: вы можете просто добавить таблицу, созданную с помощью… TablePress, в Elementor. Вам просто нужно добавить его шорткод в виджет Shortcode, предложенный Elementor, точно так же, как в редакторе контента.

Это все для Elementor. Давайте также кратко упомянем Divi Builder, другого тяжеловеса в отрасли.

Например, TablePress предлагает сторонний плагин премиум-класса TablePress Styler от Divi-Modules, который поможет вам настроить внешний вид таблицы из интерфейса Divi Builder.

Создайте свой сайт с Elementor

Легко создавайте внешний вид вашего сайта WordPress с помощью известного конструктора страниц.

Попробуйте Элементор

Другие плагины для создания таблицы

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

• Конструктор таблиц WP
• wpDataTables
• Генератор таблиц данных от Supsystic
• Столы Ниндзя

Наше окончательное мнение о TablePress

Как вы, наверное, уже поняли, я большой поклонник TablePress по нескольким причинам:

• Этот плагин — отличный вариант, если вы хотите легко добавить расширенные таблицы на свой сайт WordPress без программирования.
• Благодаря его функциям вы сможете быстро создавать элегантные таблицы, которые помогут вам суммировать и сортировать данные в удобном для чтения формате.
• Его интерфейс, вдохновленный Excel, позволяет вам пойти дальше, чем простые таблицы, предлагаемые редактором контента WordPress.
• И самое главное, это позволяет вам не создавать таблицы в HTML и часами безрезультатно возиться с кодом.

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

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

Опять же, иногда рекомендуется добавить немного CSS. Вы также можете использовать расширение Responsive Tables, упомянутое выше, для решения этой проблемы.

Скачайте TablePress из официального каталога:

А вы пользуетесь TablePress? Что вы думаете об этом флагманском плагине вселенной WordPress?