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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Перейдите в Posts > Add New , вы увидите редактор Gutenberg, мы выберем блок WP Table Manager

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

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

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

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

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

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

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

Категории очень легко создать, для этого нажмите + Create New > Category .

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

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

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

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

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

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

Теперь, когда мы создали/настроили диаграмму, давайте перейдем к Post> Add New , чтобы мы могли создать публикацию и добавить новую диаграмму, которую мы создали.

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

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

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

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

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

В этом примере население Тувалу составляет 11 147 человек, как вы можете видеть на изображении, поэтому давайте изменим население на 20 000 и еще раз проверим диаграмму.

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

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

Плюс, таблицы из баз данных в WordPress

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

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

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

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

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

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

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

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

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

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