Головна/WordPress Fullstack/Блупринти/Gutenberg & FSE/Розробка панелі SEO та керування статтею в сайдбарі Gutenberg (PluginSidebar)
До карток розділу «Gutenberg & FSE»
Gutenberg & FSE(ТЗ 34 из 54)
ТЗ: Розробка панелі SEO та керування статтею в сайдбарі Gutenberg (PluginSidebar)
Gutenberg & FSE5 шагов • +25 XP

ТЗ: Розробка панелі SEO та керування статтею в сайдбарі Gutenberg (PluginSidebar)

Створення кастомних інструментів редакційного контролю в інтерфейсі Gutenberg: компоненти PluginSidebar, PluginSidebarMoreMenuItem, реєстрація метаполів із show_in_rest, робота зі сховищем редактора через useSelect та useDispatch.

~10 ч работыУровень: Middle@wordpress/pluginsPluginSidebarPluginDocumentSettingPanel@wordpress/datauseEntityPropREST APIReact 19
+5 XP за шаг
Выполнено 0 из 5 шагов (0%)
Трудозатраты~10 рабочих часов
Фриланс вилка~$450 – $750 (€400 – €700)
Оценка веб-студии~$950 – $1,600 (€900 – €1500)

ТЗ заказчика (исходный бриф):

Редакції нашого видання потрібна окрема панель безпосередньо в інтерфейсі Gutenberg для контролю метаданих SEO, статусу перевірки статті, ключових слів та часу читання без переходу в інші вкладки.
Ключевые требования:
  • •Кастомна бічна панель PluginSidebar, зареєстрована через API registerPlugin()
  • •Кнопка відкриття панелі у правому верхньому меню через PluginSidebarMoreMenuItem
  • •Зчитування тексту статті та аналітики в реальному часі за допомогою @wordpress/data useSelect
  • •Збереження метаполів у базу через useDispatch('core/editor').editPost()
  • •Автоматичний підрахунок слів, орієнтовного часу читання та чекліст готовності SEO
Ограничения проекта:
  • •Повна сумісність як зі сторінками (Page), так і зі статтями (Post)
  • •Обмеження прав: заборона авторам змінювати статус схвалення матеріалу
Критерии приёмки (KPI):
  • Оновлення метаданих у реальному часі без затримок у роботі редактора (< 16мс)
  • Автоматичне збереження полів разом зі стандартною кнопкою «Зберегти статтю»
  • 100% відповідність вимогам доступності для всіх полів введення

Конфигурация блупринта под условия проекта

Выберите архитектуру и стек — шаги роадмапа, структура файлов и примеры кода переключатся автоматически:

Пошаговое практическое руководство по ТЗ

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

1
Этап 1 из 5

Крок 1: Реєстрація кастомних метаполів у PHP

~25 минЛегкий

Практическое руководство:

У functions.php зареєструйте поля через register_post_meta('post', '_seo_focus_keyword', [ 'show_in_rest' => true, 'single' => true, 'type' => 'string' ]) та '_editorial_status'.

План и контрольные точки реализации:
1Зарегистрировать метаполя через register_post_meta
2Включить show_in_rest => true для всех полей
3Задать корректные типы данных
Важные технические нюансы и подводные камни:

Налаштуйте auth_callback для метаполів, якщо вони потребують обмеженого доступу за ролями.

Ожидаемый артефакт этапа:

Метаполя, доступные для Redux-хранилища Gutenberg.

PHP
<?php
// functions.php - Метаполя для PluginSidebar
declare(strict_types=1);

add_action('init', function (): void {
    $meta_fields = [
        '_seo_title'        => 'string',
        '_seo_description'  => 'string',
        '_telegram_preview' => 'string',
    ];

    foreach ($meta_fields as $field => $type) {
        register_post_meta('post', $field, [
            'show_in_rest'  => true,
            'single'        => true,
            'type'          => $type,
            'auth_callback' => fn() => current_user_can('edit_posts'),
        ]);
    }
});
2
Этап 2 из 5

Крок 2: Створення компонента PluginSidebar у React

~35 минСредний
3
Этап 3 из 5

Крок 3: Інтеграція зі сховищем через useSelect та useDispatch

~20 минЛегкий
4
Этап 4 из 5

Крок 4: Калькулятор часу читання та щільності ключових слів

~25 минЛегкий
5
Этап 5 из 5

Крок 5: Підключення скрипта та тестування в редакторі

~20 минЛегкий

Типичные грабли на этом ТЗ

2 антипаттерна

Инструменты экосистемы Fullstack AI Lab для этого ТЗ

Интеграция

AI-Собеседование

Пройти голосовое или текстовое интервью по технологиям ТЗ

Архитектурные Воркфлоу

43 пошаговых сценария с командами CLI и готовыми конфигами