Створення динамічної таблиці цін у WordPress за допомогою PHP

Динамічна таблиця цін може значно покращити користувацький досвід на вашому WordPress-сайті, особливо для сайтів послуг або електронної комерції. Використовуючи PHP та власні поля або типи записів WordPress, можна створити повністю адаптивну та налаштовувану таблицю цін, яка автоматично оновлюється під час внесення змін у панелі адміністратора.

Чому варто використовувати динамічні таблиці цін?

• Легке оновлення: Можливість змінювати ціни з панелі адміністратора без редагування коду.
• Послідовність: Забезпечення актуальності цін на всіх сторінках сайту.
• Масштабованість: Легке додавання або видалення рівнів цін без редизайну таблиці.

Крок 1: Створення типу запису для тарифних планів

function create_pricing_post_type() {
    $labels = array(
        'name' => 'Тарифні плани',
        'singular_name' => 'Тарифний план',
        'add_new' => 'Додати новий план',
        'add_new_item' => 'Додати новий тарифний план',
        'edit_item' => 'Редагувати тарифний план',
        'view_item' => 'Переглянути тарифний план',
        'all_items' => 'Всі тарифні плани'
    );

    $args = array(
        'labels' => $labels,
        'public' => true,
        'supports' => array('title', 'editor', 'custom-fields'),
        'menu_icon' => 'dashicons-money',
        'menu_position' => 5
    );

    register_post_type('pricing_plan', $args);
}
add_action('init', 'create_pricing_post_type');

Цей код реєструє тип запису для управління тарифними планами.

Крок 2: Додавання користувацьких полів для цінових деталей

Ви можете додати користувацькі поля за допомогою плагінів, таких як Advanced Custom Fields (ACF), або вручну, змінюючи редактор записів.

Для ручного додавання використайте наступний код:

function add_pricing_meta_box() {
    add_meta_box(
        'pricing_meta',
        'Деталі тарифу',
        'render_pricing_meta_box',
        'pricing_plan',
        'normal',
        'default'
    );
}

function render_pricing_meta_box($post) {
    $price = get_post_meta($post->ID, 'plan_price', true);
    ?>
    <label for="plan_price">Ціна ($):</label>
    <input type="text" name="plan_price" value="<?php echo esc_attr($price); ?>" />
    <?php
}

add_action('add_meta_boxes', 'add_pricing_meta_box');

Крок 3: Відображення таблиці цін на фронтенді

Після збереження даних можна вивести їх на сторінку динамічно.

Додайте це до шаблону або створіть шорткод:

function display_pricing_table() {
    $args = array(
        'post_type' => 'pricing_plan',
        'posts_per_page' => -1,
    );

    $pricing_plans = new WP_Query($args);
    $output = '<div class="pricing-table">';

    while ($pricing_plans->have_posts()) {
        $pricing_plans->the_post();
        $price = get_post_meta(get_the_ID(), 'plan_price', true);

        $output .= '<div class="pricing-item">';
        $output .= '<h3>' . get_the_title() . '</h3>';
        $output .= '<p>' . get_the_content() . '</p>';
        $output .= '<strong>Ціна: $' . esc_html($price) . '</strong>';
        $output .= '</div>';
    }

    $output .= '</div>';
    wp_reset_postdata();
    return $output;
}

add_shortcode('pricing_table', 'display_pricing_table');

Як це працює:

• Скрипт отримує всі тарифні плани та виводить їх у форматі сітки.
• Ви можете вставити [pricing_table] на будь-яку сторінку, щоб показати таблицю.

Крок 4: Стилізація таблиці цін

Додайте цей CSS до style.css для базової стилізації:

.pricing-table {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.pricing-item {
    border: 1px solid #ddd;
    padding: 20px;
    width: 30%;
    margin: 10px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

Висновок

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