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

Список задач (to-do list) — это удобный инструмент для управления задачами прямо на сайте. В WordPress можно реализовать такой функционал с помощью кастомных типов записей, AJAX и метаполей. В этой статье мы подробно разберем, как создать интерактивный список задач, где пользователь сможет отмечать задачи как выполненные, а изменения будут сохраняться без перезагрузки страницы.

Создаем кастомный тип записей «Задачи» (Tasks) в WordPress

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

function wpkpi_register_task_post_type() {
    $labels = array(
        'name'               => 'Задачи',
        'singular_name'      => 'Задача',
        'add_new'            => 'Добавить задачу',
        'add_new_item'       => 'Добавить новую задачу',
        'edit_item'          => 'Редактировать задачу',
        'new_item'           => 'Новая задача',
        'view_item'          => 'Просмотр задачи',
        'search_items'       => 'Поиск задач',
        'not_found'          => 'Задачи не найдены',
        'not_found_in_trash' => 'В корзине задач не найдено',
        'menu_name'          => 'Задачи',
    );
    $args = array(
        'labels'             => $labels,
        'public'             => true,
        'has_archive'        => false,
        'supports'           => array('title'),
        'show_in_rest'       => true,
    );
    register_post_type('wpkpi_task', $args);
}
add_action('init', 'wpkpi_register_task_post_type');

Этот код создаст тип записей wpkpi_task с поддержкой REST API, что важно для AJAX-запросов.

Добавляем метаполе для отметки выполненных задач

Для каждой задачи нам нужно хранить состояние — выполнена она или нет. Для этого создадим метаполе _wpkpi_task_done, которое будет принимать значения yes или no.

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

Добавление чекбокса в админке для удобного редактирования

Чтобы редактировать статус задачи из админки без дополнительных плагинов, добавим метабокс с чекбоксом.

function wpkpi_add_task_metabox() {
    add_meta_box(
        'wpkpi_task_done_metabox',
        'Статус выполнения',
        'wpkpi_task_done_metabox_callback',
        'wpkpi_task',
        'side'
    );
}
add_action('add_meta_boxes', 'wpkpi_add_task_metabox');

function wpkpi_task_done_metabox_callback($post) {
    wp_nonce_field('wpkpi_task_done_nonce_action', 'wpkpi_task_done_nonce');
    $value = get_post_meta($post->ID, '_wpkpi_task_done', true);
    $checked = ($value === 'yes') ? 'checked' : '';
    echo '<label><input type="checkbox" name="wpkpi_task_done" value="yes" ' . $checked . ' /> Выполнено</label>';
}

function wpkpi_save_task_done_meta($post_id) {
    if (! isset($_POST['wpkpi_task_done_nonce']) || ! wp_verify_nonce($_POST['wpkpi_task_done_nonce'], 'wpkpi_task_done_nonce_action')) {
        return;
    }
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }
    if (isset($_POST['wpkpi_task_done'])) {
        update_post_meta($post_id, '_wpkpi_task_done', 'yes');
    } else {
        update_post_meta($post_id, '_wpkpi_task_done', 'no');
    }
}
add_action('save_post_wpkpi_task', 'wpkpi_save_task_done_meta');

Вывод списка задач на фронтенде с возможностью отметки выполнено

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

function wpkpi_tasks_list_shortcode() {
    wp_enqueue_script('wpkpi-tasks-script', get_template_directory_uri() . '/js/wpkpi-tasks.js', array('jquery'), null, true);
    wp_localize_script('wpkpi-tasks-script', 'wpkpiTasks', array(
        'ajaxurl' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wpkpi_tasks_nonce')
    ));

    $query = new WP_Query(array(
        'post_type' => 'wpkpi_task',
        'posts_per_page' => -1,
        'orderby' => 'date',
        'order' => 'ASC'
    ));

    if (! $query->have_posts()) {
        return '<p>Задачи не найдены.</p>';
    }

    $output = '<ul class="wpkpi-tasks-list">';

    while ($query->have_posts()) {
        $query->the_post();
        $done = get_post_meta(get_the_ID(), '_wpkpi_task_done', true) === 'yes';
        $checked = $done ? 'checked' : '';
        $output .= '<li data-id="' . get_the_ID() . '">'
            . '<label><input type="checkbox" class="wpkpi-task-checkbox" ' . $checked . ' /> ' . esc_html(get_the_title()) . '</label></li>';
    }
    wp_reset_postdata();

    $output .= '</ul>';

    return $output;
}
add_shortcode('wpkpi_tasks_list', 'wpkpi_tasks_list_shortcode');

Обработка AJAX-запроса для обновления статуса задачи

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

function wpkpi_ajax_toggle_task_done() {
    check_ajax_referer('wpkpi_tasks_nonce', 'nonce');

    $task_id = intval($_POST['task_id']);
    $done = sanitize_text_field($_POST['done']);

    if (! current_user_can('edit_post', $task_id)) {
        wp_send_json_error('Нет прав на редактирование задачи');
    }

    if ($done === 'yes' || $done === 'no') {
        update_post_meta($task_id, '_wpkpi_task_done', $done);
        wp_send_json_success('Статус задачи обновлен');
    } else {
        wp_send_json_error('Неверное значение статуса');
    }
}
add_action('wp_ajax_wpkpi_toggle_task_done', 'wpkpi_ajax_toggle_task_done');

JavaScript для отправки AJAX-запросов при изменении чекбокса

Создайте файл wpkpi-tasks.js в папке темы или плагина с таким содержанием:

jQuery(document).ready(function($) {
    $('.wpkpi-tasks-list').on('change', '.wpkpi-task-checkbox', function() {
        var checkbox = $(this);
        var li = checkbox.closest('li');
        var taskId = li.data('id');
        var done = checkbox.is(':checked') ? 'yes' : 'no';

        $.post(wpkpiTasks.ajaxurl, {
            action: 'wpkpi_toggle_task_done',
            nonce: wpkpiTasks.nonce,
            task_id: taskId,
            done: done
        }, function(response) {
            if (!response.success) {
                alert('Ошибка: ' + response.data);
                // Восстанавливаем прежний статус чекбокса
                checkbox.prop('checked', !checkbox.is(':checked'));
            }
        });
    });
});

Оптимизация и расширение функционала списка задач

Чтобы улучшить пользовательский опыт, можно добавить:

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

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

Заключение

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