В современном веб-разработке для WordPress часто требуется создавать динамические иконки, которые меняются в зависимости от данных пользователя или состояния сайта. В этой статье мы подробно разберём, как реализовать динамические иконки с помощью REST API WordPress и библиотеки React, что позволит вам создавать интерактивные иконки, загружаемые асинхронно без перезагрузки страницы.
Что такое REST API в WordPress и зачем он нужен для иконок
WordPress с версии 4.7 включает встроенный REST API — мощный инструмент для обмена данными между клиентом и сервером. REST API позволяет получить, создать, обновить или удалить данные с помощью HTTP-запросов в формате JSON.
Для динамических иконок REST API предоставляет возможность получать данные, например, настройки иконок, статусы или пользовательские параметры, и отображать их на фронтенде без перезагрузки страницы. В сочетании с React можно создать современный интерфейс, который будет быстро реагировать на изменения данных.
Создаем собственный REST API эндпоинт для иконок
Первым шагом создадим кастомный REST API маршрут в WordPress, который будет возвращать данные для иконок. Добавьте следующий код в functions.php вашей темы или в плагин:
add_action('rest_api_init', function () {
register_rest_route('wpicons/v1', '/icons', array(
'methods' => 'GET',
'callback' => 'wpicons_get_icons_data',
'permission_callback' => '__return_true',
));
});
function wpicons_get_icons_data() {
// Пример данных: можно заменить на динамическую выборку из БД
$icons = array(
array('id' => 1, 'name' => 'home', 'svg' => '<svg>...</svg>'),
array('id' => 2, 'name' => 'user', 'svg' => '<svg>...</svg>'),
array('id' => 3, 'name' => 'settings', 'svg' => '<svg>...</svg>'),
);
return rest_ensure_response($icons);
}Этот код регистрирует маршрут /wp-json/wpicons/v1/icons, который возвращает массив иконок с их SVG-кодом. В реальном проекте данные можно хранить в опциях, пользовательских типах записей или ACF полях.
Создаем React-компонент для отображения иконок
Теперь создадим React-компонент, который будет получать иконки из нашего API и отображать их динамически. Если у вас нет готового React-окружения, рекомендуем использовать Create React App или встроить React в тему через wp_enqueue_script с babel.
import React, { useEffect, useState } from 'react';
function WpiconsDynamicIcons() {
const [icons, setIcons] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
fetch('/wp-json/wpicons/v1/icons')
.then(response => {
if (!response.ok) throw new Error('Ошибка загрузки данных');
return response.json();
})
.then(data => {
setIcons(data);
setLoading(false);
})
.catch(err => {
setError(err.message);
setLoading(false);
});
}, []);
if (loading) return <p>Загрузка иконок...</p>;
if (error) return <p>Ошибка: {error}</p>;
return (
<div className="wpicons-icons-container">
{icons.map(icon => (
<div key={icon.id} className="wpicons-icon" dangerouslySetInnerHTML={{ __html: icon.svg }} />
))}
</div>
);
}
export default WpiconsDynamicIcons;В этом компоненте мы делаем GET-запрос к нашему эндпоинту, получаем массив иконок и рендерим каждую иконку, вставляя SVG прямо в DOM через dangerouslySetInnerHTML. Это удобно для динамического отображения SVG без дополнительных файлов.
Интеграция React-компонента в WordPress
Есть несколько способов подключить React к WordPress. Если вы используете классическую тему без сборщиков, можно подключить скомпилированный React скрипт через wp_enqueue_script. Например:
function wpicons_enqueue_scripts() {
wp_enqueue_script(
'wpicons-react-app',
get_template_directory_uri() . '/js/wpicons-react-app.js',
array('wp-element'), // wp-element включает React и ReactDOM
'1.0',
true
);
}
add_action('wp_enqueue_scripts', 'wpicons_enqueue_scripts');После этого в нужном месте темы (например, в page.php) добавьте контейнер для React приложения:
<div id="wpicons-react-root"></div>И в вашем React коде инициализируйте рендер:
import React from 'react';
import { createRoot } from 'react-dom/client';
import WpiconsDynamicIcons from './WpiconsDynamicIcons';
const root = createRoot(document.getElementById('wpicons-react-root'));
root.render(<WpiconsDynamicIcons />);Работа с динамическими изменениями иконок
Чтобы делать иконки по-настоящему динамическими, можно расширить REST API, добавив возможность обновлять данные иконок или получать их в зависимости от параметров. Например, фильтры по категории иконок или пользовательские настройки.
Также можно добавить переходы и анимации для иконок на React-стороне с помощью CSS или библиотек анимаций, например, Framer Motion.
Пример расширенного REST API с параметрами
Добавим параметр category для фильтрации иконок:
add_action('rest_api_init', function () {
register_rest_route('wpicons/v1', '/icons', array(
'methods' => 'GET',
'callback' => 'wpicons_get_icons_data_filtered',
'permission_callback' => '__return_true',
'args' => array(
'category' => array(
'required' => false,
'validate_callback' => function($param, $request, $key) {
return is_string($param);
}
),
),
));
});
function wpicons_get_icons_data_filtered(WP_REST_Request $request) {
$category = $request->get_param('category');
// Здесь логика фильтрации иконок по категории
$all_icons = array(
array('id' => 1, 'name' => 'home', 'category' => 'navigation', 'svg' => '<svg>...</svg>'),
array('id' => 2, 'name' => 'user', 'category' => 'users', 'svg' => '<svg>...</svg>'),
array('id' => 3, 'name' => 'settings', 'category' => 'settings', 'svg' => '<svg>...</svg>'),
);
if ($category) {
$filtered = array_filter($all_icons, function($icon) use ($category) {
return $icon['category'] === $category;
});
return rest_ensure_response(array_values($filtered));
}
return rest_ensure_response($all_icons);
}Соответственно, в React можно передавать параметр в fetch, чтобы загружать нужные иконки.
Полезные плагины для работы с иконками и REST API
Для расширения функционала можно использовать плагины:
- Clearfy Pro — для оптимизации и контроля загрузки скриптов и иконок.
- Advanced Custom Fields (ACF) — для удобного управления метаданными иконок и интеграции с REST API.
- WPRemark — помогает создавать и управлять SVG иконками в админке.
Например, с ACF можно создать группу полей для иконок и автоматически выводить их через REST API, что значительно упрощает управление контентом.
Заключение по теме динамических иконок на REST API и React
Использование REST API совместно с React даёт гибкость и мощь для создания динамических иконок в WordPress. Вы получаете возможность загружать и обновлять иконки без перезагрузки страницы, создавать уникальные пользовательские интерфейсы и легко расширять функционал.
Реализуя собственные REST маршруты и React-компоненты, вы контролируете весь процесс и можете адаптировать решение под любые задачи. Рекомендуется также изучить WPGraphQL, если вам нужен более сложный API, и использовать современные инструменты сборки для React.
При необходимости автоматизировать создание иконок и их загрузку можно обратить внимание на инструменты и плагины из экосистемы WPSHOP.