Динамічні таблиці даних на WordPress: автооновлення з API через Elementor

Навіщо динамічні таблиці

Коли на сторінці є дані, що змінюються щодня чи щогодини — курси валют, тарифні плани, залишки на складі, актуальні ставки, — ручне оновлення перетворюється на пастку: хтось забув поправити цифру, і користувач бачить неактуальну інформацію. Це підриває довіру й псує конверсію.

Рішення — таблиця, яка сама тягне дані з джерела: ваш власний бекенд, зовнішній API постачальника чи публічний сервіс курсів. Одне джерело правди, нуль ручної рутини, завжди свіжі цифри.

Дані з REST API з кешуванням

Основа підходу — отримати дані через REST API, закешувати відповідь (щоб не смикати зовнішній сервіс на кожен перегляд) і відрендерити таблицю через шорткод. Кешування робимо на Transients API — вбудований механізм WordPress. Додайте сніпет у functions.php дочірньої теми:

// Шорткод [dynamic_table] — таблиця даних з REST API з кешем на 1 годину
function sw_dynamic_table_shortcode() {
    $api_url = 'https://api.example.com/v1/rates'; // ваш ендпоінт
    $data = get_transient( 'sw_dynamic_table' );

    if ( false === $data ) {
        $response = wp_remote_get( $api_url, array( 'timeout' => 10 ) );
        if ( is_wp_error( $response ) ) {
            return '<p>Дані тимчасово недоступні. Спробуйте пізніше.</p>';
        }
        $data = json_decode( wp_remote_retrieve_body( $response ), true );
        if ( ! is_array( $data ) ) { $data = array(); }
        set_transient( 'sw_dynamic_table', $data, HOUR_IN_SECONDS );
    }

    // Демо-рядки, якщо API порожнє (заміните на свої дані)
    if ( empty( $data ) ) {
        $data = array(
            array( 'name' => 'Тариф Старт',  'value' => '299 грн/міс', 'updated' => 'сьогодні' ),
            array( 'name' => 'Тариф Бізнес', 'value' => '899 грн/міс', 'updated' => 'сьогодні' ),
        );
    }

    $html  = '<div class="sw-table-wrap"><table class="sw-data-table">';
    $html .= '<thead><tr><th>Назва</th><th>Значення</th><th>Оновлено</th></tr></thead><tbody>';
    foreach ( $data as $row ) {
        // ОБОВ'ЯЗКОВО екрануємо дані з зовнішнього джерела
        $html .= sprintf(
            '<tr><td>%s</td><td>%s</td><td>%s</td></tr>',
            esc_html( $row['name'] ?? '' ),
            esc_html( $row['value'] ?? '' ),
            esc_html( $row['updated'] ?? '' )
        );
    }
    $html .= '</tbody></table></div>';
    return $html;
}
add_shortcode( 'dynamic_table', 'sw_dynamic_table_shortcode' );

Ключова відмінність від «швидких» рішень з інтернету — екранування через esc_html(). Дані приходять із зовнішнього джерела, і якщо вставляти їх у HTML напряму, скомпрометований чи ворожий API відкриває шлях до XSS. Екрануйте завжди.

Впровадження в Elementor

• Крок 1. Відкрийте сторінку в редакторі Elementor.
• Крок 2. Перетягніть у потрібну секцію віджет «Шорткод» (Shortcode).
• Крок 3. Вставте [dynamic_table] у поле віджета.
• Крок 4. Стилізуйте таблицю під сайт — класи .sw-data-table і .sw-table-wrap задаєте у CSS теми (не забудьте overflow-x:auto на обгортці для мобільних).

Кеш, безпека і типові помилки

Ще три речі, які легко пропустити:

• Тайм-аут і фолбек. Зовнішній API може не відповісти. Завжди обробляйте is_wp_error() і показуйте запасний контент, а не порожнечу чи фатал.
• Екранування виводу. esc_html() для тексту, esc_url() для посилань — на будь-яких даних не з вашої бази.
• Не зловживайте зовнішніми даними. Показуйте лише те, на що маєте право, і чого користувач очікує — таблиця має інформувати, а не вводити в оману.

Бонус: інтерактивний калькулятор ROI

Той самий принцип «рахуємо на льоту» працює і для інтерактивних елементів. Ось простий калькулятор рентабельності рекламної кампанії — порахуйте прямо тут:

Часті питання