Создание и управление таблицами в редакторе Gutenberg

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

И это всё — мы создали и опубликовали таблицу цен менее чем за 10 минут, действительно легко, не так ли?

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

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

Теперь, чтобы создать диаграммы, перейдите в Table Manager > All Tables, у нас должна быть создана таблица с данными, которые мы хотим отразить на диаграмме, у нас есть таблица, подготовленная с информацией для создания этой диаграммы.

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

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

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

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

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

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

В этом примере мы будем использовать круговую диаграмму.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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