Современный редактор WordPress Gutenberg предоставляет широкие возможности для создания гибких и удобных интерфейсов редактирования контента. Однако часто возникает задача автоматизировать генерацию дополнительного контекста для блоков, чтобы облегчить создание контента и повысить его релевантность. В этой статье мы рассмотрим, как использовать плагин WPGPT для автоматизации создания контекста в блоках Gutenberg с помощью искусственного интеллекта GPT, а также приведём примеры кода для реализации этой функциональности.
Что такое автоматизация создания контекста в блоках Gutenberg
Автоматизация создания контекста — это процесс, при котором дополнительная информация, пояснения или сопутствующий текст генерируются автоматически на основе содержимого основного блока. Это позволяет снизить нагрузку на автора контента, улучшить качество текста и сделать его более информативным.
В WordPress Gutenberg каждый блок — это отдельный элемент, обладающий своими атрибутами и содержимым. С помощью API плагина WPGPT можно интегрировать вызовы к GPT-модели для анализа содержимого блока и генерации дополнительного текста, который будет автоматически подставлен в соседний блок или в расширенную часть текущего.
Зачем нужна автоматизация контекста
- Ускоряет процесс создания контента;
- Повышает уникальность и глубину материала;
- Облегчает работу с крупными текстами и сложными темами;
- Улучшает SEO-задачи за счёт расширения текстового наполнения;
- Повышает вовлечённость читателей за счёт более развернутых пояснений.
Установка и подготовка WPGPT для работы с Gutenberg
Перед началом реализации важно убедиться, что плагин WPGPT установлен и активирован на вашем сайте WordPress. Для этого:
- Перейдите в админ-панель WordPress -> Плагины -> Добавить новый;
- Найдите плагин WPGPT и установите его;
- Активируйте плагин и настройте API-ключ OpenAI в разделе настроек WPGPT.
После этого можно приступать к интеграции с Gutenberg.
Создание кастомного блока с автоматическим генератором контекста
Рассмотрим пример создания собственного блока Gutenberg, который при вводе основного текста автоматически добавляет сгенерированный WPGPT контекст.
Регистрация блока и подключение скриптов
В functions.php вашей темы или в отдельном плагине добавьте регистрацию нового блока с использованием JavaScript и React:
function wpgpt_register_custom_context_block() {
wp_register_script(
'wpgpt-context-block',
get_template_directory_uri() . '/js/wpgpt-context-block.js',
array('wp-blocks', 'wp-element', 'wp-editor', 'wp-components', 'wpgpt-api'),
filemtime(get_template_directory() . '/js/wpgpt-context-block.js')
);
register_block_type('wpgpt/context-block', array(
'editor_script' => 'wpgpt-context-block',
));
}
add_action('init', 'wpgpt_register_custom_context_block');JavaScript код блока с вызовом WPGPT
В файле js/wpgpt-context-block.js создайте блок с полем для основного текста и кнопкой для генерации контекста:
const { registerBlockType } = wp.blocks;
const { TextControl, Button, PanelBody } = wp.components;
const { useState } = wp.element;
registerBlockType('wpgpt/context-block', {
title: 'WPGPT Контекстный блок',
icon: 'edit',
category: 'common',
attributes: {
mainText: { type: 'string', default: '' },
contextText: { type: 'string', default: '' },
},
edit: ({ attributes, setAttributes }) => {
const { mainText, contextText } = attributes;
const [loading, setLoading] = useState(false);
const generateContext = () => {
setLoading(true);
// Вызов API WPGPT
wpgpt.api.generateContext(mainText).then(response => {
setAttributes({ contextText: response });
setLoading(false);
}).catch(() => {
setLoading(false);
alert('Ошибка при генерации контекста');
});
};
return (
<div>
<TextControl
label="Основной текст"
value={mainText}
onChange={(value) => setAttributes({ mainText: value })}
placeholder="Введите основной текст"
/>
<Button isPrimary onClick={generateContext} disabled={loading || !mainText}>
{loading ? 'Генерация...' : 'Сгенерировать контекст'}
</Button>
{contextText && <div style={{ marginTop: '1em', padding: '1em', backgroundColor: '#f9f9f9' }}>
<strong>Сгенерированный контекст:</strong>
<p>{contextText}</p>
</div>}
</div>
);
},
save: ({ attributes }) => {
return (
<div>
<p>{attributes.mainText}</p>
{attributes.contextText && <div className="wpgpt-context">
<p>{attributes.contextText}</p>
</div>}
</div>
);
}
});Пример PHP функции для API вызова внутри плагина WPGPT
Для выполнения генерации контекста с серверной стороны можно использовать PHP функцию, которую затем вызвать через AJAX или REST API:
function wpgpt_generate_context($text) {
$api_key = get_option('wpgpt_api_key');
if (empty($api_key) || empty($text)) {
return new WP_Error('empty_data', 'API ключ или текст не задан');
}
$endpoint = 'https://api.openai.com/v1/chat/completions';
$args = array(
'headers' => array(
'Content-Type' => 'application/json',
'Authorization' => 'Bearer ' . $api_key,
),
'body' => json_encode(array(
'model' => 'gpt-4',
'messages' => array(
array('role' => 'system', 'content' => 'Вы — помощник по созданию контекста для текста.'),
array('role' => 'user', 'content' => 'Создай контекст для следующего текста: ' . $text),
),
'max_tokens' => 150,
)),
'timeout' => 20,
);
$response = wp_remote_post($endpoint, $args);
if (is_wp_error($response)) {
return $response;
}
$body = json_decode(wp_remote_retrieve_body($response), true);
if (isset($body['choices'][0]['message']['content'])) {
return trim($body['choices'][0]['message']['content']);
}
return new WP_Error('empty_response', 'Пустой ответ от API');
}Данную функцию можно зарегистрировать для вызова по AJAX и связать с JavaScript кодом блока.
Интеграция с WPGPT и расширение возможностей
Плагин WPGPT уже содержит удобные методы для работы с GPT API и позволяет настроить шаблоны запросов. Вы можете использовать его API для генерации не только контекста, но и заголовков, описаний, подсказок и других элементов контента прямо внутри блоков Gutenberg.
Также обратите внимание на возможности плагинов Clearfy Pro и WPRemark, которые помогут оптимизировать работу сайта и улучшить пользовательский опыт при использовании автоматизированного контента.
Рекомендации по оптимизации и безопасности
При работе с AI-генерацией контента важно контролировать качество и релевантность сгенерированного текста. Рекомендуется внедрить проверки и возможность редактирования результатов перед публикацией. Также не забывайте про ограничения API по количеству запросов и обрабатывайте ошибки корректно.
Для безопасности API ключа не храните его в открытом виде в JavaScript, используйте серверные вызовы и передавайте данные через AJAX или REST API с проверкой прав пользователя.