Как добавить таблицу в WordPress с помощью шорткода и плагинов

Автор: Елена Семенова | Опубликовано: 04.01.2026

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

Использование шорткода для создания таблицы в WordPress

Хотя в Gutenberg есть блок "Таблица", иногда хочется иметь более гибкий способ добавления таблиц — например, через шорткод, чтобы вставлять таблицы прямо в текст без переключения блоков.

Создадим простой шорткод [wplearn_table], который выводит HTML-таблицу с заданными данными. Для этого добавим следующий код в файл functions.php вашей темы или в плагин для пользовательских функций:

function wplearn_table_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array(
        'headers' => '',
        'rows' => '',
    ), $atts, 'wplearn_table');

    // Парсим заголовки и строки, разделённые запятыми
    $headers = array_map('trim', explode(',', $atts['headers']));
    $rows_raw = explode('|', $atts['rows']);

    $html = '<table class="wplearn-table" border="1" cellpadding="5" cellspacing="0"><thead><tr>';
    foreach ($headers as $header) {
        $html .= '<th>' . esc_html($header) . '</th>';
    }
    $html .= '</tr></thead><tbody>';

    foreach ($rows_raw as $row) {
        $cells = array_map('trim', explode(',', $row));
        $html .= '<tr>';
        foreach ($cells as $cell) {
            $html .= '<td>' . esc_html($cell) . '</td>';
        }
        $html .= '</tr>';
    }

    $html .= '</tbody></table>';

    return $html;
}
add_shortcode('wplearn_table', 'wplearn_table_shortcode');

Пример использования шорткода в редакторе WordPress:

[wplearn_table headers="Имя, Возраст, Город" rows="Иван, 30, Москва|Мария, 25, Санкт-Петербург|Олег, 35, Новосибирск"]

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

Популярные плагины для создания и управления таблицами в WordPress

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

TablePress — один из самых популярных и универсальных плагинов для создания таблиц. Позволяет импортировать данные из Excel, CSV, Google Sheets, имеет удобный интерфейс редактирования и шорткод для вставки.
wpDataTables — продвинутый плагин с поддержкой больших наборов данных, фильтрами, сортировкой и адаптивностью. Подходит для бизнес-сайтов и аналитики.
Data Tables Generator by Supsystic — ещё один удобный конструктор таблиц с визуальным редактором и множеством опций для стилизации и работы с данными.

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

Пример работы с TablePress

После установки и активации плагина из репозитория WordPress перейдите в админку » TablePress » Добавить новую таблицу. Укажите количество строк и столбцов, заполните ячейки, затем сохраните.

В списке таблиц скопируйте шорткод — что-то вроде [table id=1 /] — и вставьте его в нужное место на сайте.

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

.tablepress {
    border-collapse: collapse;
    width: 100%;
}
.tablepress th, .tablepress td {
    border: 1px solid #ddd;
    padding: 8px;
}
.tablepress th {
    background-color: #f4f4f4;
    text-align: left;
}

Как интегрировать таблицы с REST API WordPress для динамического вывода данных

В современных проектах часто требуется выводить таблицы с данными, получаемыми динамически через REST API. Рассмотрим пример, как получить посты из WordPress и вывести их в таблицу с помощью JavaScript и шорткода.

Создадим шорткод, который вставляет контейнер и подключает скрипт:

function wplearn_dynamic_table_shortcode() {
    $html = '<div id="wplearn-dynamic-table">Загрузка данных...</div>';
    $html .= '<script>
';
    $html .= 'document.addEventListener("DOMContentLoaded", function() {
';
    $html .= '  fetch("' . esc_url_raw(rest_url('wp/v2/posts?per_page=5')) . '")
';
    $html .= '    .then(response => response.json())
';
    $html .= '    .then(posts => {
';
    $html .= '      let html = `<table border="1" cellpadding="5" cellspacing="0"><thead><tr><th>Заголовок</th><th>Дата</th></tr></thead><tbody>`;
';
    $html .= '      posts.forEach(post => {
';
    $html .= '        html += `<tr><td><a href="${post.link}">${post.title.rendered}</a></td><td>${new Date(post.date).toLocaleDateString()}</td></tr>`;
';
    $html .= '      });
';
    $html .= '      html += `</tbody></table>`;
';
    $html .= '      document.getElementById("wplearn-dynamic-table").innerHTML = html;
';
    $html .= '    });
';
    $html .= '});
';
    $html .= '</script>';

    return $html;
}
add_shortcode('wplearn_dynamic_table', 'wplearn_dynamic_table_shortcode');

Вставьте [wplearn_dynamic_table] в статью — и вы получите таблицу из 5 последних постов с заголовками и датами публикации. Такой метод отлично подходит для отображения актуального контента без ручного обновления таблиц.

Оптимизация таблиц и советы по производительности

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

Используйте пагинацию и фильтры (например, в TablePress или wpDataTables), чтобы не перегружать страницу.
Для динамических таблиц применяйте AJAX-загрузку данных, чтобы минимизировать время отклика и уменьшить нагрузку на сервер.
Добавляйте CSS для адаптивности таблиц, чтобы они корректно отображались на мобильных устройствах.
Кэшируйте результаты запросов, если данные не меняются часто.

Например, для кэширования REST API-запросов можно использовать плагин Clearfy Pro, который помогает оптимизировать и кэшировать запросы на сайте.

Заключение по теме создания таблиц в WordPress

Добавление таблиц в WordPress можно реализовать разными способами — от простых шорткодов с HTML до мощных плагинов с визуальными редакторами и динамическим выводом через REST API. Выбор зависит от ваших задач:

Для лёгких таблиц — собственный шорткод с HTML.
Для удобного управления и импорта — TablePress или аналогичные плагины.
Для динамического контента — интеграция с REST API и JavaScript.

Экспериментируйте с подходами, комбинируйте плагины и код, чтобы добиться идеального результата для вашего сайта. Удачной работы!