Как создать динамический список выполненных задач в WordPress с помощью пользовательских типов записей и AJAX

Введение в пользовательские типы записей для задач в WordPress

Для организации и хранения задач в WordPress лучше всего использовать пользовательские типы записей (Custom Post Types, CPT). Это позволит разделить задачи от обычных записей и страниц, а также добавить к ним собственные поля и таксономии. В нашем случае мы создадим CPT с названием wplesson_task, где будут храниться задачи, а для статуса выполнения используем мета-поле.

Регистрация CPT происходит с помощью функции register_post_type. В файле темы или в пользовательском плагине добавьте следующий код:

function wplesson_register_task_cpt() {
    $labels = array(
        'name' => 'Задачи',
        'singular_name' => 'Задача',
        'add_new' => 'Добавить задачу',
        'add_new_item' => 'Добавить новую задачу',
        'edit_item' => 'Редактировать задачу',
        'all_items' => 'Все задачи',
        'menu_name' => 'Задачи'
    );
    $args = array(
        'labels' => $labels,
        'public' => true,
        'has_archive' => true,
        'supports' => array('title', 'editor'),
        'show_in_rest' => true,
        'menu_position' => 20
    );
    register_post_type('wplesson_task', $args);
}
add_action('init', 'wplesson_register_task_cpt');

Теперь в админке появится раздел «Задачи», где можно добавлять новые записи.

Добавление мета-поля для статуса задачи (выполнена/не выполнена)

Для управления статусом задачи добавим мета-поле с чекбоксом. Для этого используем стандартные функции WordPress.

Добавим мета-бокс в админке, чтобы отмечать задачу как выполненную:

function wplesson_add_task_meta_box() {
    add_meta_box('wplesson_task_status', 'Статус задачи', 'wplesson_task_status_meta_box_callback', 'wplesson_task', 'side');
}
add_action('add_meta_boxes', 'wplesson_add_task_meta_box');

function wplesson_task_status_meta_box_callback($post) {
    wp_nonce_field('wplesson_save_task_status', 'wplesson_task_status_nonce');
    $value = get_post_meta($post->ID, '_wplesson_task_completed', true);
    ?>
    <label><input type="checkbox" name="wplesson_task_completed" value="1" <?php checked($value, '1'); ?>> Выполнена</label>
    <?php
}

function wplesson_save_task_status($post_id) {
    if (!isset($_POST['wplesson_task_status_nonce']) || !wp_verify_nonce($_POST['wplesson_task_status_nonce'], 'wplesson_save_task_status')) {
        return;
    }
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }
    if (isset($_POST['wplesson_task_completed'])) {
        update_post_meta($post_id, '_wplesson_task_completed', '1');
    } else {
        delete_post_meta($post_id, '_wplesson_task_completed');
    }
}
add_action('save_post', 'wplesson_save_task_status');

Теперь при редактировании задачи можно ставить галочку «Выполнена».

Вывод динамического списка выполненных задач на фронтенде

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

Создадим шорткод [wplesson_completed_tasks], который подключит контейнер для списка и загрузит скрипт:

function wplesson_completed_tasks_shortcode() {
    wp_enqueue_script('wplesson-tasks-js', get_template_directory_uri() . '/js/wplesson-tasks.js', array('jquery'), null, true);
    wp_localize_script('wplesson-tasks-js', 'wplessonTasksAjax', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wplesson_tasks_nonce')
    ));

    return '<div id="wplesson-tasks-container">Загрузка задач...</div>';
}
add_shortcode('wplesson_completed_tasks', 'wplesson_completed_tasks_shortcode');

Создадим обработчик AJAX запроса, который вернет список выполненных задач в формате HTML:

function wplesson_ajax_get_completed_tasks() {
    check_ajax_referer('wplesson_tasks_nonce', 'nonce');

    $args = array(
        'post_type' => 'wplesson_task',
        'meta_key' => '_wplesson_task_completed',
        'meta_value' => '1',
        'posts_per_page' => -1
    );
    $query = new WP_Query($args);

    if ($query->have_posts()) {
        $output = '<ul>';
        while ($query->have_posts()) {
            $query->the_post();
            $output .= '<li>' . get_the_title() . '</li>';
        }
        $output .= '</ul>';
    } else {
        $output = '<p>Выполненных задач нет.</p>';
    }
    wp_reset_postdata();

    wp_send_json_success($output);
}
add_action('wp_ajax_wplesson_get_completed_tasks', 'wplesson_ajax_get_completed_tasks');
add_action('wp_ajax_nopriv_wplesson_get_completed_tasks', 'wplesson_ajax_get_completed_tasks');

JavaScript для динамической загрузки задач через AJAX

Создайте файл wplesson-tasks.js в папке js вашей темы со следующим содержимым:

jQuery(document).ready(function($) {
    function wplessonLoadTasks() {
        $.ajax({
            url: wplessonTasksAjax.ajax_url,
            method: 'POST',
            data: {
                action: 'wplesson_get_completed_tasks',
                nonce: wplessonTasksAjax.nonce
            },
            success: function(response) {
                if (response.success) {
                    $('#wplesson-tasks-container').html(response.data);
                } else {
                    $('#wplesson-tasks-container').html('<p>Ошибка загрузки задач.</p>');
                }
            },
            error: function() {
                $('#wplesson-tasks-container').html('<p>Ошибка AJAX запроса.</p>');
            }
        });
    }
    wplessonLoadTasks();
});

Рекомендованные плагины для расширения функционала задач

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

• Clearfy Pro — оптимизация и расширение возможностей WordPress, включая управление мета-данными.
• WPCommunity — плагин для создания форумов и сообществ, можно адаптировать для совместной работы над задачами.
• ABC Pagination — удобная постраничная навигация для большого списка задач.

Использование этих плагинов поможет упростить реализацию и добавить полезные функции без лишнего кода.

Подведение итогов и советы по доработке

Созданный пример — это базовая система для отображения выполненных задач с возможностью динамического обновления на фронтенде. Вы можете расширить её, добавив:

• Фильтрацию задач по дате, пользователю или категории.
• Возможность отметить задачу как выполненную прямо на фронтенде с помощью AJAX.
• Интеграцию с плагинами уведомлений и автоматизации.

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