Как создать динамический список задач в WordPress с помощью REST API

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

Что такое REST API в WordPress и зачем он нужен для динамических списков задач

REST API — это интерфейс, предоставляемый WordPress, для взаимодействия с сайтом через HTTP-запросы. Благодаря ему можно создавать, читать, обновлять и удалять записи (CRUD) программно, используя JavaScript или другие технологии на стороне клиента.

Для динамического списка задач REST API позволяет:

• Получать список задач в формате JSON без перезагрузки страницы;
• Добавлять новые задачи по нажатию кнопки;
• Редактировать и удалять задачи прямо из интерфейса;
• Обновлять статус задачи (например, выполнено/не выполнено) мгновенно.

Это значительно улучшает UX и упрощает управление задачами для пользователей.

Создание пользовательского REST API endpoint для задач

Стандартный REST API WordPress работает с постами, но для кастомных задач лучше создать свой endpoint. Предположим, задачи — это кастомный тип записи wp_tasks. Для регистрации REST API маршрута добавим следующий код в файл functions.php вашей темы или в плагин:

add_action('rest_api_init', 'wptasks_register_tasks_endpoint');
function wptasks_register_tasks_endpoint() {
    register_rest_route('wptasks/v1', '/tasks', [
        'methods' => 'GET',
        'callback' => 'wptasks_get_tasks',
        'permission_callback' => '__return_true',
    ]);

    register_rest_route('wptasks/v1', '/tasks', [
        'methods' => 'POST',
        'callback' => 'wptasks_create_task',
        'permission_callback' => function () {
            return current_user_can('edit_posts');
        },
    ]);
}

function wptasks_get_tasks() {
    $args = [
        'post_type' => 'wp_tasks',
        'post_status' => 'publish',
        'numberposts' => -1,
    ];
    $tasks = get_posts($args);
    $data = [];
    foreach ($tasks as $task) {
        $data[] = [
            'id' => $task->ID,
            'title' => $task->post_title,
            'content' => $task->post_content,
            'status' => get_post_meta($task->ID, 'wptasks_status', true),
        ];
    }
    return $data;
}

function wptasks_create_task(WP_REST_Request $request) {
    $title = sanitize_text_field($request->get_param('title'));
    $content = sanitize_textarea_field($request->get_param('content'));
    if (empty($title)) {
        return new WP_Error('no_title', 'Заголовок задачи обязателен', ['status' => 400]);
    }
    $post_id = wp_insert_post([
        'post_type' => 'wp_tasks',
        'post_title' => $title,
        'post_content' => $content,
        'post_status' => 'publish',
    ]);
    if (is_wp_error($post_id)) {
        return $post_id;
    }
    update_post_meta($post_id, 'wptasks_status', 'pending');
    return ['id' => $post_id, 'title' => $title, 'content' => $content, 'status' => 'pending'];
}

В этом примере мы создали два эндпоинта: GET для получения всех задач и POST для создания новой. Каждая задача хранит статус в метаполе wptasks_status.

Отображение и управление списком задач на фронтенде с помощью JavaScript

Теперь, когда REST API готов, можно вывести список задач и добавить форму создания задачи на страницу. Для этого используем fetch API и немного JavaScript.

document.addEventListener('DOMContentLoaded', function() {
    const taskList = document.getElementById('task-list');
    const form = document.getElementById('task-form');

    function wptasks_loadTasks() {
        fetch('/wp-json/wptasks/v1/tasks')
            .then(response => response.json())
            .then(data => {
                taskList.innerHTML = '';
                data.forEach(task => {
                    const li = document.createElement('li');
                    li.textContent = `${task.title} — статус: ${task.status}`;
                    taskList.appendChild(li);
                });
            });
    }

    form.addEventListener('submit', function(e) {
        e.preventDefault();
        const title = form.querySelector('input[name="title"]').value;
        const content = form.querySelector('textarea[name="content"]').value;

        fetch('/wp-json/wptasks/v1/tasks', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-WP-Nonce': wptasks_vars.nonce
            },
            body: JSON.stringify({ title: title, content: content })
        })
        .then(response => response.json())
        .then(data => {
            if(data.id) {
                wptasks_loadTasks();
                form.reset();
            } else {
                alert('Ошибка при создании задачи');
            }
        });
    });

    wptasks_loadTasks();
});

И соответствующая HTML-разметка для вывода списка и формы:

<ul id="task-list"></ul>
<form id="task-form">
    <input type="text" name="title" placeholder="Название задачи" required />
    <textarea name="content" placeholder="Описание задачи"></textarea>
    <button type="submit">Добавить задачу</button>
</form>

Обратите внимание, что для POST-запросов необходим nonce для безопасности. Его можно добавить через wp_localize_script в вашем плагине или теме:

function wptasks_enqueue_scripts() {
    wp_enqueue_script('wptasks-script', get_template_directory_uri() . '/js/wptasks.js', ['jquery'], null, true);
    wp_localize_script('wptasks-script', 'wptasks_vars', [
        'nonce' => wp_create_nonce('wp_rest')
    ]);
}
add_action('wp_enqueue_scripts', 'wptasks_enqueue_scripts');

Расширение функционала: обновление и удаление задач через REST API

Для полноценного управления задачами полезно добавить возможность обновлять статус и удалять задачи. Дополнительно регистрируем методы PUT и DELETE в REST API:

register_rest_route('wptasks/v1', '/tasks/(?P<id>\d+)', [
    'methods' => 'PUT',
    'callback' => 'wptasks_update_task',
    'permission_callback' => function () {
        return current_user_can('edit_posts');
    },
]);

register_rest_route('wptasks/v1', '/tasks/(?P<id>\d+)', [
    'methods' => 'DELETE',
    'callback' => 'wptasks_delete_task',
    'permission_callback' => function () {
        return current_user_can('delete_posts');
    },
]);

function wptasks_update_task(WP_REST_Request $request) {
    $id = (int)$request['id'];
    $status = sanitize_text_field($request->get_param('status'));
    if (!in_array($status, ['pending', 'completed'])) {
        return new WP_Error('invalid_status', 'Неверный статус', ['status' => 400]);
    }
    update_post_meta($id, 'wptasks_status', $status);
    return ['id' => $id, 'status' => $status];
}

function wptasks_delete_task(WP_REST_Request $request) {
    $id = (int)$request['id'];
    $result = wp_delete_post($id, true);
    if (!$result) {
        return new WP_Error('delete_failed', 'Не удалось удалить задачу', ['status' => 500]);
    }
    return ['deleted' => true, 'id' => $id];
}

На фронтенде можно добавить кнопки "Выполнить" и "Удалить" для каждой задачи с соответствующими запросами fetch методом PUT и DELETE.

Практические советы и рекомендации

При работе с REST API и динамическими списками задач в WordPress учитывайте:

• Обязательно используйте nonce для защиты от CSRF-атак.
• Проверяйте права пользователя при создании, обновлении и удалении задач.
• Кэшируйте GET-запросы при необходимости, чтобы снизить нагрузку на сервер.
• Оптимизируйте запросы, выбирая только нужные поля через аргументы WP_Query.
• Разделяйте логику API и отображение, чтобы код был поддерживаемым и расширяемым.

Если вам нужна расширенная автоматизация управления задачами, обратите внимание на плагин WPTasks — он предлагает готовые решения для создания и управления задачами прямо в админке и на сайте с расширенными возможностями.