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

Поиск нужной таблицы после её создания может быть очень утомительным, так как приходится копировать и вставлять шорткод. Но что делать, если есть отдельный блок, предназначенный для поиска всех таблиц? WP Table Manager позволяет сделать это с помощью простого в использовании редактора WordPress Gutenberg.

WP Table Manager добавляет в редактор Gutenberg блоки, которые позволят добавлять эти таблицы с полем поиска непосредственно в блок.

Создание таблиц WordPress с помощью этого плагина для Gutenberg

В этой статье мы будем использовать WP Table Manager для создания таблицы сравнения цен. Для начала рассмотрим, как создавать таблицы.

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

Вы увидите все варианты тем оформления, поэтому мы выберем ту, которая подойдет для таблицы сравнения цен.

Теперь нажмите «ОК» (имейте в виду, что все данные в таблице будут удалены).

Поскольку мы добавили тему оформления, практически вся работа уже выполнена.

Нам нужно лишь внести простые корректировки и адаптировать таблицу под наши нужды. Я удалю много строк и отредактирую многие из них; редактировать их можно, просто щелкнув по ним и начав вводить текст, как в Excel.

Чтобы удалить, просто щелкните по строкам, щелкните правой кнопкой мыши и выберите «Удалить» .

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

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

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

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

Перейдите в раздел «Записи» > «Добавить новую» , вы увидите редактор Gutenberg, выберите WP Table Manager .

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

Таблица будет добавлена, и теперь вам останется только опубликовать этот пост, и таблица появится — достаточно просто щелкнуть по таблице и опубликовать пост/страницу.

Вот и все, мы создали и разместили таблицу цен менее чем за 10 минут, очень просто, не правда ли?

Использование WP Table Manager в WordPress для создания диаграмм

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

Теперь, чтобы создать диаграммы, перейдите в Диспетчер таблиц > Все таблицы . У нас должна быть создана таблица с данными, которые мы хотим отобразить на диаграмме, то есть таблица подготовлена ​​с информацией для создания этой диаграммы.

Хорошей практикой может быть создание категории для каждого типа таблиц, которые мы хотим создать. Например, здесь мы создали категорию под названием «Диаграммы».

Создать категории очень просто: для этого нажмите + Создать новую > Категория .

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

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

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

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

Для этого примера мы воспользуемся круговой диаграммой.

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

Теперь, когда мы создали/настроили диаграмму, перейдем в раздел «Запись» > «Добавить новую» , чтобы создать запись и добавить созданную нами диаграмму.

В редакторе Gutenberg найдите блок «WP Table Manager Chart» и добавьте его в запись.

Откроется поле поиска, где вы сможете увидеть все доступные графики.

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

Как видите, шорткод будет добавлен автоматически, поэтому вам останется только опубликовать его, и все будет готово.

Но что произойдет, если мы захотим обновить данные на диаграмме? Нужно ли создавать новую диаграмму? Ответ — нет! Вы можете просто отредактировать данные в таблице, и диаграмма автоматически обновится.

В этом примере население Тувалу составляет 11147 человек, как видно на изображении, поэтому давайте изменим численность населения на 20000 и снова посмотрим на диаграмму.

Теперь график должен обновиться, давайте проверим.

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

Кроме того, таблицы из баз данных в WordPress

Также есть возможность создавать таблицы из базы данных, и эта таблица будет автоматически обновляться при изменениях в базе данных. Поэтому, если у вас есть информация, хранящаяся в базе данных, и вы хотите создать на её основе таблицу/диаграмму, просто нажмите « + Создать новую» > «Таблица базы данных»

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

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

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

Теперь нажмите на Создать таблицу Таблица будет создана автоматически. Имейте в виду, что можно добавить условия, например, отображать переменную только в том случае, если email автора равен "Этот адрес электронной почты защищен от спам-ботов. Для его просмотра необходимо включить JavaScript.”.

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

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

Наш новый дизайн сделает всё ещё проще!

Начните создавать таблицы с помощью WP Table Manager

Теперь, когда вы знаете, как легко создавать таблицы и управлять ими с помощью WP Table Manager , чего же вы ждете? Перейдите сюда и приобретите подписку, чтобы начать профессионально управлять всеми этими таблицами.