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

Люди говорят, что WordPress поддерживает более 30% веб-сайтов в Интернете. Однако создать веб-сайт со всеми необходимыми функциями – непростая задача. Создание таблиц в WordPress – один из простых примеров этого. WordPress представил блок таблиц с Gutenberg и постоянно обновляет его. Однако он не реагирует и не будет работать должным образом на мобильных устройствах, если у вас три или более столбца. Хотя плагины, такие как TablePress, решают эту проблему с помощью бесплатного плагина, по-прежнему неудобно создавать сравнительную таблицу, для которой нужны звезды обзора. В этой статье мы объясним, как создать сравнительную таблицу в WordPress.

Что такое сравнительная таблица?

Многие блоггеры WordPress пишут обзоры и рекомендуют продукты, которые они используют, своим читателям. Это помогает читателям получать достоверную информацию обоими способами, а блоггеры получают партнерскую комиссию, когда читатель покупает этот продукт. Во многих случаях таблица сравнения наиболее полезна для демонстрации информации.

  • Отображение списка 10 лучших продуктов в таблице – например, 10 ведущих хостинговых компаний.
  • Сравните характеристики двух продуктов – например, iPhone и Samsung Galaxy.

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

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

  • Войдите в свою панель управления WordPress и перейдите в раздел «Плагины> Добавить».
  • Найдите ключевое слово «таблица» и найдите «WP Table Builder – плагин таблиц для WordPress».
  • Установите и активируйте плагин для создания красивых таблиц.
Конструктор таблиц WP

Создание таблиц с помощью Drag and Drop Table Builder

После активации плагина он создаст меню «Построитель таблиц» на боковой панели навигации. Перейдите в меню «Построитель таблиц> Добавить новую», чтобы создать новую таблицу. Это приведет вас к интерфейсу конструктора таблиц плагина с перетаскиванием на панели инструментов WordPress.

Редактор перетаскивания WP Table Builder
Редактор перетаскивания WP Table Builder

Введите таблицу имен для своей таблицы и выберите столбцы / строки. Щелкните по кнопке «Создать».

Настроить параметры таблицы

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

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

Если вы не знакомы с таблицами, узнайте здесь, как создавать таблицы HTML.

Добавление содержимого в таблицу

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

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

Таблица сравнения в построителе таблиц
Таблица сравнения в построителе таблиц

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

Получение шорткода для сравнительной таблицы

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

Получить встроенный шорткод
Получить встроенный шорткод

Вы также можете просмотреть все созданные таблицы в меню «Table Builder> All Tables» вместе с короткими кодами для каждой таблицы.

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

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

  • Просто вставьте шорткод в блок «Абзац» или «Шорткод» редактора Гутенберга.
  • Вы также можете вставить таблицу в нижний колонтитул или боковую панель с помощью текстового виджета. Перетащите виджет «Текст» в область боковой панели или нижнего колонтитула и вставьте шорткод таблицы. Сохраните изменения, и таблица начнет отображаться в соответствующей области виджетов на опубликованном сайте.

Опубликованная таблица на рабочем столе будет выглядеть примерно так:

Пример сравнительной таблицы
Образец сравнительной таблицы

А отзывчивое мобильное представление будет выглядеть так:

Сравнительная таблица на мобильных устройствах
Сравнительная таблица на мобильных устройствах

Плюсы и минусы плагина WP Table Builder

У плагина есть как преимущества, так и несколько ограничений.

Плюсы

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

Минусы

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

Мы надеемся, что в будущих обновлениях будут включены эти параметры.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *