Как создать динамическую таблицу в WordPress с использованием PHP и плагинов

Что такое динамическая таблица и зачем она нужна в WordPress

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

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

Создание таких таблиц требует знаний PHP, понимания работы с базой данных WordPress и, при необходимости, умения работать с JavaScript для улучшения интерактивности.

Работа с базой данных WordPress: подготовка данных для таблицы

Для начала нужно определиться, откуда будут браться данные для таблицы. В WordPress есть несколько вариантов:

  • Использование стандартных таблиц WordPress — например, таблицы пользователей, постов и метаданных.
  • Создание собственной таблицы в базе данных с помощью dbDelta и сохранение в ней нужных данных.
  • Получение данных из внешних API или других источников.

Рассмотрим пример создания динамической таблицы с данными из собственной таблицы в базе. Сначала создадим таблицу при активации плагина или темы:

function wpsolution_create_table() {
    global $wpdb;
    $table_name = $wpdb->prefix . 'wpsolution_data';
    $charset_collate = $wpdb->get_charset_collate();

    $sql = "CREATE TABLE $table_name (
        id mediumint(9) NOT NULL AUTO_INCREMENT,
        name varchar(255) NOT NULL,
        value varchar(255) NOT NULL,
        PRIMARY KEY  (id)
    ) $charset_collate;";

    require_once( ABSPATH . 'wp-admin/includes/upgrade.php' );
    dbDelta( $sql );
}
register_activation_hook( __FILE__, 'wpsolution_create_table' );

Эта функция создаст таблицу wp_wpsolution_data с двумя полями: name и value. Далее можно вставлять и читать данные из этой таблицы.

Вывод динамической таблицы на страницу с помощью шорткода

Чтобы отобразить таблицу на странице или в записи, удобнее всего использовать шорткод. Ниже пример функции, которая получает данные из таблицы и выводит их в HTML-таблице:

function wpsolution_show_dynamic_table() {
    global $wpdb;
    $table_name = $wpdb->prefix . 'wpsolution_data';
    $results = $wpdb->get_results( "SELECT * FROM $table_name" );

    if ( empty( $results ) ) {
        return '<p>Данные отсутствуют.</p>';
    }

    $output = '<table border="1" cellpadding="5" cellspacing="0">';
    $output .= '<tr><th>ID</th><th>Название</th><th>Значение</th></tr>';

    foreach ( $results as $row ) {
        $output .= '<tr>';
        $output .= '<td>' . esc_html( $row->id ) . '</td>';
        $output .= '<td>' . esc_html( $row->name ) . '</td>';
        $output .= '<td>' . esc_html( $row->value ) . '</td>';
        $output .= '</tr>';
    }

    $output .= '</table>';
    return $output;
}
add_shortcode( 'wpsolution_table', 'wpsolution_show_dynamic_table' );

Добавьте шорткод [wpsolution_table] в любую страницу, чтобы вывести таблицу с данными.

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

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

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

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

Улучшение динамической таблицы: сортировка, фильтрация и пагинация

Для удобства пользователей часто требуется добавить возможность сортировки и фильтрации данных в таблице. Это можно реализовать с помощью JavaScript-библиотек, например, DataTables.js.

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

function wpsolution_enqueue_scripts() {
    wp_enqueue_style( 'datatables-css', 'https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css' );
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'datatables-js', 'https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js', array('jquery'), null, true );
    wp_add_inline_script( 'datatables-js', 'jQuery(document).ready(function($){ $("#wpsolution-table").DataTable(); });' );
}
add_action( 'wp_enqueue_scripts', 'wpsolution_enqueue_scripts' );

В функции вывода таблицы добавим идентификатор:

$output = '<table id="wpsolution-table" border="1" cellpadding="5" cellspacing="0">';

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

Создание формы для добавления данных в динамическую таблицу

Чтобы таблица была действительно динамичной, полезно иметь возможность добавлять данные прямо с сайта. Ниже пример простой формы и обработки её отправки в WordPress:

function wpsolution_form_shortcode() {
    if ( isset( $_POST['wpsolution_submit'] ) ) {
        wpsolution_handle_form();
    }

    $form = '<form method="post">';
    $form .= '<p><label>Название: <input type="text" name="name" required></label></p>';
    $form .= '<p><label>Значение: <input type="text" name="value" required></label></p>';
    $form .= '<p><input type="submit" name="wpsolution_submit" value="Добавить"></p>';
    $form .= '</form>';

    return $form;
}
add_shortcode( 'wpsolution_form', 'wpsolution_form_shortcode' );

function wpsolution_handle_form() {
    if ( ! isset( $_POST['name'] ) || ! isset( $_POST['value'] ) ) {
        echo '<p style="color:red;">Ошибка: заполните все поля.</p>';
        return;
    }

    global $wpdb;
    $table_name = $wpdb->prefix . 'wpsolution_data';
    $name = sanitize_text_field( $_POST['name'] );
    $value = sanitize_text_field( $_POST['value'] );

    $inserted = $wpdb->insert( $table_name, array('name' => $name, 'value' => $value) );

    if ( $inserted ) {
        echo '<p style="color:green;">Данные успешно добавлены.</p>';
    } else {
        echo '<p style="color:red;">Ошибка при добавлении данных.</p>';
    }
}

Добавьте шорткод [wpsolution_form] на страницу с формой, и пользователи смогут добавлять новые записи в таблицу.

Советы по безопасности и оптимизации динамических таблиц

При работе с динамическими таблицами важно учитывать безопасность и производительность:

  • Очистка данных: всегда используйте функции sanitize_text_field, esc_html и другие для обработки входящих и выводимых данных.
  • Проверка прав доступа: если таблица содержит конфиденциальные данные, убедитесь, что доступ к ней имеют только авторизованные пользователи.
  • Использование кэширования: для больших таблиц можно кэшировать результаты запроса, чтобы снизить нагрузку на базу данных.
  • Оптимизация запросов: используйте только необходимые поля и добавляйте индексы в таблицу, если это требуется.

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

Как автоматизировать работу с мета-тегами в WordPress
28.12.2025
Как удалить или изменить выставку данных в WordPress без поддержки плагинов
19.12.2025
Автоматическое удаление отзывов в WooCommerce после их модерации
22.05.2026
Как создать автозаполняемый формат даты в WordPress с примером кода
04.04.2026
Автоматическое удаление товара из WooCommerce после продажи
20.04.2026