Как создать иконки для WordPress через REST API и AJAX

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

Почему REST API и AJAX важны для динамических иконок

REST API позволяет работать с данными WordPress через HTTP-запросы. Вместе с AJAX это дает возможность менять содержимое страниц на лету без полной перезагрузки. Для иконок это значит, что можно обновлять их параметры, менять состояние (активна/неактивна), подгружать новые иконки и т.д.

Пример из практики: пользователь выбирает иконку для поста в настройках, и эта иконка сразу же отображается рядом с заголовком без обновления страницы.

Для реализации нам понадобится зарегистрировать собственные REST API endpoints и написать JavaScript для AJAX-запросов.

Создание REST API endpoint для работы с иконками

Начнем с регистрации REST API маршрута. Предположим, что мы хотим получить список доступных иконок и менять выбранную иконку для записи.

add_action('rest_api_init', function() {
    register_rest_route('wpicons/v1', '/icons', [
        'methods' => 'GET',
        'callback' => 'wpicons_get_icons',
        'permission_callback' => function () {
            return current_user_can('edit_posts');
        }
    ]);

    register_rest_route('wpicons/v1', '/icons/(?P<post_id>>\d+)', [
        'methods' => 'POST',
        'callback' => 'wpicons_set_icon',
        'permission_callback' => function () {
            return current_user_can('edit_post', get_param('post_id'));
        }
    ]);
});

function wpicons_get_icons() {
    // Пример: возвращаем фиксированный набор иконок
    return [
        ['id' => 'star', 'label' => 'Звезда', 'svg' => '<svg>...</svg>'],
        ['id' => 'heart', 'label' => 'Сердце', 'svg' => '<svg>...</svg>'],
        ['id' => 'check', 'label' => 'Галочка', 'svg' => '<svg>...</svg>'],
    ];
}

function wpicons_set_icon(WP_REST_Request $request) {
    $post_id = (int) $request['post_id'];
    $icon_id = sanitize_text_field($request->get_param('icon'));
    if (!in_array($icon_id, ['star', 'heart', 'check'])) {
        return new WP_Error('invalid_icon', 'Недопустимая иконка', ['status' => 400]);
    }
    update_post_meta($post_id, '_wpicons_icon', $icon_id);
    return ['success' => true];
}

В этом коде мы создали два маршрута: один возвращает список иконок, другой — сохраняет выбранную иконку для поста.

Отправка AJAX-запросов из JavaScript

Теперь реализуем фронтенд для получения и установки иконок. Для этого используем wp.apiFetch или обычный fetch с nonce для безопасности.

document.addEventListener('DOMContentLoaded', function() {
    const nonce = wpApiSettings.nonce; // wp_localize_script передаёт nonce
    const postId = document.getElementById('post-id').value;
    const iconsWrapper = document.getElementById('icons-wrapper');

    // Получаем список иконок
    fetch(wpApiSettings.root + 'wpicons/v1/icons', {
        headers: {
            'X-WP-Nonce': nonce
        }
    })
    .then(response => response.json())
    .then(icons => {
        icons.forEach(icon => {
            const btn = document.createElement('button');
            btn.innerHTML = icon.svg + icon.label;
            btn.addEventListener('click', () => {
                fetch(wpApiSettings.root + `wpicons/v1/icons/${postId}`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-WP-Nonce': nonce
                    },
                    body: JSON.stringify({ icon: icon.id })
                })
                .then(res => res.json())
                .then(data => {
                    if(data.success) {
                        alert('Иконка сохранена!');
                    } else {
                        alert('Ошибка при сохранении');
                    }
                });
            });
            iconsWrapper.appendChild(btn);
        });
    });
});

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

Вывод иконки на фронтенде

Чтобы вывести выбранную иконку рядом с постом, используем фильтр the_title или шаблонную функцию. Например:

function wpicons_display_icon_with_title($title, $post_id) {
    if (!is_admin()) {
        $icon_id = get_post_meta($post_id, '_wpicons_icon', true);
        $icons_svg = [
            'star' => '<svg><!-- star svg --></svg>',
            'heart' => '<svg><!-- heart svg --></svg>',
            'check' => '<svg><!-- check svg --></svg>',
        ];
        if (isset($icons_svg[$icon_id])) {
            $title = $icons_svg[$icon_id] . ' ' . $title;
        }
    }
    return $title;
}
add_filter('the_title', 'wpicons_display_icon_with_title', 10, 2);

Так мы динамически добавим иконку к заголовку поста.

Рекомендации по плагинам и безопасности

Для работы с REST API в WordPress рекомендуем использовать библиотеку wp.apiFetch — она упрощает AJAX-запросы и учитывает nonce автоматически.

Для управления иконками удобно использовать плагин Clearfy Pro, который помогает оптимизировать загрузку и безопасность REST API.

При регистрации REST маршрутов важно правильно настроить permission_callback, чтобы избежать несанкционированного доступа.

Выводы и практические советы

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

Если хотите расширить функционал, можно добавить загрузку кастомных SVG иконок через медиа-библиотеку, интеграцию с ACF для удобного выбора иконок в админке или использовать плагины для создания собственных шорткодов с иконками.