Учебное пособие по блокировке таблиц WordPress Gutenberg —
Раньше вам нужен сторонний плагин с Classic Editor для создания таблиц в WordPress. Тем не менее, Gutenberg предлагает блок Table по умолчанию для вставки адаптивных таблиц, которые выглядят красиво. Вот как вы можете создавать таблицы в редакторе WordPress Gutenberg вместе с различными примерами. Эти таблицы используют блок «Таблица» по умолчанию и не используют какой-либо другой сторонний плагин. Если вы ищете создание таблиц с помощью плагина, ознакомьтесь с руководством по TablePress и узнайте, как создать сравнительную таблицу в WordPress.
Типы таблиц, которые вы можете создать с помощью Gutenberg
Вы можете создавать следующие типы таблиц, используя блок таблиц.
- Простая таблица по умолчанию
- Полосатый стол
- Цветной стол
- Таблица с разделами верхнего и нижнего колонтитула
- Стол фиксированной ширины
На данный момент вы не можете создавать таблицы данных с фильтрами, функциями поиска и разбиения на страницы, используя блок таблицы Гутенберга по умолчанию. Узнайте больше о различных других блоках Гутенберга и о том, как использовать их на своем сайте.
Добавление блока таблицы по умолчанию в WordPress
Просто введите /стол чтобы вставить блок таблицы в любое место при редактировании записи или страницы в редакторе Гутенберга.
Вставить блок таблицы в WordPressВам будет предложено выбрать количество строк и столбцов для вашей таблицы. Выберите количество строк/столбцов и нажмите кнопку «Создать таблицу».
Выберите столбцы и строки для таблицыЭто вставит базовую таблицу, которая будет выглядеть, как показано ниже (фиктивные данные заполнены для демонстрации).
Нажмите на блок таблицы, чтобы увидеть дополнительные параметры блока на панели инструментов. Вы можете использовать параметры для выравнивания всей таблицы или настроить выравнивание только определенного столбца в таблице. Вы также можете вставить гиперссылку на содержимое внутри ячейки, выделить, добавить/удалить строки, добавить/удалить столбцы и вставить встроенное изображение внутри ячейки.
Редактировать таблицу Гутенберга в WordPressПомните, что вы можете настроить выравнивание содержимого в каждом столбце независимо. В приведенном ниже примере таблицы показано, что первый столбец выровнен по центру, а второй столбец выровнен по правому краю.
Таблица по умолчанию Таблица по умолчанию Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4Создание разных типов таблиц
На правой боковой панели также доступны настройки блока. Там вы можете найти дополнительные параметры для настройки внешнего вида вашей таблицы в разделах «Настройки» и «Стили».
Настройки блока таблицы
Стили табличных блоковИспользуя настройки боковой панели для блока «Таблица», вы можете создавать различные типы таблиц, как описано ниже.
Полосатый блок стола
На правой боковой панели выберите параметр «Полосы» в разделе «Стили», чтобы создать полосатую таблицу, как показано ниже. Параметр типографики в верхнем регистре используется для изменения всего текстового содержимого внутри таблицы на использование заглавных букв.
Таблица по умолчанию Таблица по умолчанию Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4Таблица с разделами верхнего и нижнего колонтитула
Выберите параметры «Раздел верхнего колонтитула» и «Раздел нижнего колонтитула» в разделе «Настройки», чтобы добавить верхний/нижний колонтитул в таблицу.
Метка заголовка 1Головаer Label 2Default TableDefault TableCell 1Cell 2Cell 3Cell 4Footer Label 1Footer Label 2Таблица с цветами
В разделе «Стили» у вас есть возможность изменить цвет текста и фона. В дополнение к сплошному фону вы также можете создать градиентный фон, как показано в примере ниже.
Таблица сплошных цветовТаблица сплошных цветовЯчейка 1Ячейка 2Ячейка 3Ячейка 4 Таблица градиентных цветовТаблица градиентных цветовЯчейка 1Ячейка 2Ячейка 3Ячейка 4Стол фиксированной ширины – полосатый и цветной
Используйте параметр «Ячейки таблицы с фиксированной шириной» в разделе «Настройки», чтобы зафиксировать ширину столбца таблицы независимо от содержимого внутри ячеек. Вы можете комбинировать полосы, цвета и фиксированную ширину, чтобы создать собственную таблицу, как показано ниже.
Метка заголовка 1Метка заголовка 2Default TableDefault TableCell 1Cell 2Cell 3Cell 4Блок кода для таблицы Гутенберга
Вы можете скопировать код таблицы из редактора кода в Гутенберге (Параметры > Редактор кода) и вставить в любое место на своем сайте. Например, просто скопируйте и вставьте приведенный ниже код в свой редактор, чтобы создать простую таблицу по умолчанию, как показано в приведенном выше примере (блок таблицы по умолчанию). В противном случае вы можете создать многоразовый блок для своего пользовательского дизайна таблицы, чтобы вставить его в любое место на вашем сайте. После вставки многоразового блока таблицы вы можете преобразовать его в обычный блок, чтобы редактировать и обновлять содержимое этого конкретного сообщения.
| Таблица по умолчанию | |
| Ячейка 1 | Ячейка 2 |
| Ячейка 4 |
Обратите внимание, что вы также можете использовать блок элементов Custom HTML для создания собственной таблицы с помощью тегов таблицы HTML.
Проблемы с использованием табличного блока
Блок «Таблица Гутенберга» идеально подходит для размещения небольшой таблицы внутри вашего контента. Например, вы можете легко создать адаптивную таблицу с 15–30 строками. Однако невозможно редактировать большие таблицы, и редактор будет работать очень медленно или даже давать сбой при попытке скопировать и вставить данные больших таблиц из Excel или другого приложения для работы с электронными таблицами. Кроме того, блок Table также не поддерживает таблицы данных.
Итак, если у вас есть большая таблица с сотнями строк, то лучше всего использовать такой плагин, как TablePress. Преимущество в том, что вы можете централизованно управлять всеми таблицами в одном месте и редактировать их, не заходя в редактор Гутенберга. Отредактированный контент будет автоматически применен во всех местах, где вы вставили эту таблицу. В противном случае вам нужно перейти к каждому экземпляру и отредактировать блок таблицы по умолчанию.
Узнайте о 4 различных способах вставки таблиц в WordPress, их преимуществах и недостатках.
