Как создать внешние таблицы в WordPress с помощью shortcode

Автор: Ярослав Васильев | Опубликовано: 24.01.2026

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

Почему стоит использовать внешние таблицы в WordPress

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

Упрощается обновление данных — достаточно изменить таблицу в одном месте.
Меньше нагрузки на редактор WordPress и база данных.
Легко интегрировать данные из Excel, Google Sheets или CSV.
Можно использовать единый стиль оформления для всех таблиц через CSS.

Кроме того, с помощью shortcode можно вставлять таблицы в любое место сайта — в записи, страницы, виджеты и даже шаблоны.

Создание shortcode для вывода внешней таблицы из CSV файла

Самый простой способ — хранить таблицу в формате CSV и выводить её на страницу при помощи shortcode. Ниже пример функции wpeducation_csv_table_shortcode, которая считывает CSV, преобразует данные в HTML-таблицу и выводит её.

function wpeducation_csv_table_shortcode($atts) {
    $atts = shortcode_atts(array(
        'file' => '', // Путь к CSV файлу
        'class' => 'wpeducation-table', // CSS класс таблицы
    ), $atts, 'csv_table');

    if (empty($atts['file']) || !file_exists($atts['file'])) {
        return '<p>Файл таблицы не найден.</p>';
    }

    $rows = array();
    if (($handle = fopen($atts['file'], 'r')) !== false) {
        while (($data = fgetcsv($handle, 1000, ',')) !== false) {
            $rows[] = $data;
        }
        fclose($handle);
    } else {
        return '<p>Не удалось открыть файл.</p>';
    }

    if (empty($rows)) {
        return '<p>Таблица пуста.</p>';
    }

    $output = '<table class="' . esc_attr($atts['class']) . '">';
    $output .= '<thead><tr>';
    foreach ($rows[0] as $header) {
        $output .= '<th>' . esc_html($header) . '</th>';
    }
    $output .= '</tr></thead>';
    $output .= '<tbody>';

    for ($i = 1; $i < count($rows); $i++) {
        $output .= '<tr>';
        foreach ($rows[$i] as $cell) {
            $output .= '<td>' . esc_html($cell) . '</td>';
        }
        $output .= '</tr>';
    }

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

    return $output;
}
add_shortcode('csv_table', 'wpeducation_csv_table_shortcode');

Эта функция регистрирует shortcode [csv_table file="путь_к_файлу.csv"], который выводит содержимое файла в виде таблицы. Путь можно задавать абсолютный или относительный к корню сайта. Для удобства часто используют папку wp-content/uploads.

Пример использования shortcode

Если у вас есть файл wp-content/uploads/data.csv, вставьте в пост или страницу:

[csv_table file="'.ABSPATH.'wp-content/uploads/data.csv"]

Таблица автоматически преобразуется в HTML и отобразится на сайте.

Добавление стилей и адаптивности для таблиц

По умолчанию таблицы выглядят просто. Чтобы улучшить внешний вид, добавим CSS. Для примера используем класс wpeducation-table, который мы указали в shortcode.

/* Стили для таблиц */
.wpeducation-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-family: Arial, sans-serif;
}
.wpeducation-table th,
.wpeducation-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}
.wpeducation-table th {
    background-color: #f4f4f4;
    font-weight: bold;
}

/* Адаптивность: горизонтальная прокрутка */
@media screen and (max-width: 600px) {
    .wpeducation-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

Добавьте этот CSS в файл стилей темы или через кастомизатор WordPress в раздел «Дополнительные стили».

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

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

TablePress — один из самых популярных плагинов для создания и управления таблицами. Позволяет импортировать CSV, Excel, Google Sheets, а также использовать shortcode для вывода. Подробнее о TablePress
WP Table Builder — визуальный конструктор таблиц с drag-and-drop интерфейсом, подходит для сложных таблиц без навыков кодинга.
Advanced Custom Fields (ACF) — в сочетании с повторяющимися полями можно реализовать динамические таблицы, выводя их через кастомные shortcode.

Для интеграции Google Sheets есть специализированные решения, например, плагин Inline Google Spreadsheet Viewer, который позволяет выводить таблицы из Google Sheets напрямую на сайт.

Расширенные возможности: импорт данных из Google Sheets через REST API и shortcode

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

Основная идея:

Настроить Google API и получить ключ доступа.
Сделать запрос к таблице через API, получить JSON с данными.
Обработать данные и вывести в виде таблицы.

Пример упрощённого кода для получения и вывода таблицы из публичного Google Sheets:

function wpeducation_google_sheet_shortcode($atts) {
    $atts = shortcode_atts(array(
        'sheet_id' => '',
        'gid' => '0',
        'class' => 'wpeducation-table',
    ), $atts, 'google_sheet');

    if(empty($atts['sheet_id'])) {
        return '<p>ID Google Sheets не указан.</p>';
    }

    $url = 'https://docs.google.com/spreadsheets/d/' . esc_attr($atts['sheet_id']) . '/gviz/tq?tqx=out:csv&gid=' . intval($atts['gid']);

    $response = wp_remote_get($url);
    if(is_wp_error($response)) {
        return '<p>Не удалось получить данные из Google Sheets.</p>';
    }

    $body = wp_remote_retrieve_body($response);
    if(empty($body)) {
        return '<p>Данные из Google Sheets пусты.</p>';
    }

    $rows = array_map('str_getcsv', explode("\n", $body));
    if(empty($rows)) {
        return '<p>Данные не распарсены.</p>';
    }

    $output = '<table class="' . esc_attr($atts['class']) . '">';
    $output .= '<thead><tr>';
    foreach($rows[0] as $header) {
        $output .= '<th>' . esc_html($header) . '</th>';
    }
    $output .= '</tr></thead>';
    $output .= '<tbody>';

    for($i=1; $i < count($rows); $i++) {
        if(empty($rows[$i][0])) continue; // пропускаем пустые строки
        $output .= '<tr>';
        foreach($rows[$i] as $cell) {
            $output .= '<td>' . esc_html($cell) . '</td>';
        }
        $output .= '</tr>';
    }

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

    return $output;
}
add_shortcode('google_sheet', 'wpeducation_google_sheet_shortcode');

Используйте shortcode так:

[google_sheet sheet_id="ваш_id_таблицы" gid="0"]

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

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

При работе с внешними таблицами важно учитывать следующие моменты:

Проверяйте пути к файлам и права доступа. Никогда не выводите содержимое произвольных файлов без проверки — это может привести к утечке данных.
Кэшируйте результаты. Если таблица большая или данные часто не меняются, используйте transient API WordPress для кэширования HTML таблицы и уменьшения нагрузки.
Обрабатывайте ошибки. Добавляйте понятные сообщения пользователям, если файл не найден или данные не загружены.
Минимизируйте использование сторонних API. Если используете Google Sheets API, следите за лимитами запросов и используйте кэширование.

Заключение

Внешние таблицы в WordPress — мощный инструмент для организованного и динамического представления данных. Создание собственного shortcode позволяет создавать гибкие решения без перегрузки редактора, а использование популярных плагинов, таких как TablePress, упрощает работу для пользователей без навыков программирования.

Используйте приведённые примеры и адаптируйте их под свои задачи, чтобы сделать работу с таблицами на сайте максимально удобной и эффективной.