wp-interactivity-api
Отладка WordPress Interactivity API
Создание и отладка блоков WordPress с директивами Interactivity API может быть сложной задачей. Этот навык предоставляет экспертные рекомендации по директивам data-wp-*, конфигурации хранилища, проблемам гидратации и распространённым сбоям.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "wp-interactivity-api". Мой элемент data-wp-interactive не реагирует на клики. В чём может быть проблема?
النتيجة المتوقعة:
- Проверьте эти распространённые причины:
- viewScriptModule не зарегистрирован или загружен (проверьте вкладку сети)
- Отсутствует атрибут data-wp-interactive на корневом элементе
- Несоответствие пространства имён хранилища между разметкой и определением хранилища
- Ошибки JavaScript, препятствующие гидратации (проверьте консоль)
- Убедитесь, что серверная разметка соответствует ожиданиям клиента
استخدام "wp-interactivity-api". Как использовать несколько обработчиков на одном элементе от разных плагинов?
النتيجة المتوقعة:
- Используйте уникальные идентификаторы директив с разделителем ---:
- data-wp-on--click---plugin-a='actions.handleA'
- data-wp-on--click---plugin-b='actions.handleB'
- Оба обработчика сработают. Идентификатор после --- должен быть уникальным для каждого элемента.
التدقيق الأمني
آمنPure documentation skill providing WordPress Interactivity API reference guidance. All 70 static findings are false positives caused by markdown syntax misinterpretation. Contains only markdown files with no executable code, no file system access, no network calls, and no external commands.
عوامل الخطر
⚙️ الأوامر الخارجية (52)
🌐 الوصول إلى الشبكة (2)
درجة الجودة
ماذا يمكنك بناءه
Создание интерактивных блоков
Создание новых интерактивных блоков с использованием директив data-wp-* и официального шаблона scaffold.
Добавление интерактивности в темы
Реализация интерактивности на уровне темы с состоянием хранилища и клиентской навигацией.
Отладка проблем с директивами
Диагностика причин, по которым директивы не срабатывают или возникают несоответствия гидратации.
جرّب هذه الموجهات
Каковы основные директивы в WordPress Interactivity API и когда следует использовать каждую из них?
Моя директива data-wp-on--click не срабатывает. Что мне проверить?
Как настроить хранилище @wordpress/interactivity с состоянием и действиями?
Какие изменения мне нужно знать для WordPress 6.9 в отношении Interactivity API?
أفضل الممارسات
- Используйте официальный @wordpress/create-block-interactive-template для новых интерактивных блоков
- Минимизируйте использование директив и ограничивайте область действия конкретными интерактивными регионами
- Убедитесь, что серверная разметка и состояние клиентской гидратации совпадают
- Используйте уникальные идентификаторы директив с разделителем ---, когда несколько плагинов подключают обработчики к одному элементу
تجنب
- Использование data-wp-ignore (устарело в WordPress 6.9)
- Слишком широкие интерактивные корни, охватывающие всю страницу
- Предположение, что состояние сохраняется при клиентской навигации без использования реактивного хранилища
- Дублирующиеся атрибуты директив без уникальных идентификаторов, вызывающие конфликты