Jednak większość poradników w sieci sprowadza się do jednego: „zainstaluj kolejną ciężką wtyczkę”. W Design Solutions podchodzimy do tematu inaczej. Zależy nam na maksymalnej wydajności, czystym kodzie i pełnej kontroli nad danymi.
Wraz z nadejściem WordPressa 7.0 i jeszcze głębszą integracją edytora blokowego, najlepszym sposobem na wdrożenie AI (np. od OpenAI, Anthropic czy lokalnych modeli) jest stworzenie dedykowanego, natywnego rozwiązania opartego na REST API i React.
Pokażemy Ci, jak krok po kroku podpiąć API sztucznej inteligencji pod Twojego WordPressa, tworząc własny, lekki blok w Gutenbergu.
Krok 1: Zabezpieczenie kluczy API (Podstawa bezpieczeństwa)
Nigdy nie przechowuj kluczy API bezpośrednio w plikach motywu, a tym bardziej w kodzie JavaScript (React) widocznym we frontendzie! Najlepszą i najbezpieczniejszą metodą jest wykorzystanie pliku wp-config.php.
Dodaj do swojego pliku konfiguracyjnego następującą linijkę:
PHP
define( 'DS_OPENAI_API_KEY', 'sk-twoj-tajny-klucz-api' );
Dzięki temu klucz jest bezpieczny na poziomie serwera, a my możemy się do niego odwołać w logice backendowej.
Krok 2: Rejestracja dedykowanego Endpointu w WP REST API
Aby nasz blok Gutenberga (napisany w React) mógł komunikować się z modelem AI bez ujawniania klucza API, musimy stworzyć „most” w postaci własnego endpointu REST API.
W pliku functions.php (lub w dedykowanej wtyczce site-specific) dodajemy kod, który odbierze zapytanie z edytora, wyśle je do np. OpenAI i zwróci odpowiedź:
PHP
add_action( 'rest_api_init', function () {
register_rest_route( 'ds-ai/v1', '/generate', array(
'methods' => 'POST',
'callback' => 'ds_ai_generate_content',
'permission_callback' => function () {
return current_user_can( 'edit_posts' ); // Tylko dla zalogowanych redaktorów
}
) );
} );
function ds_ai_generate_content( WP_REST_Request $request ) {
$prompt = sanitize_text_field( $request->get_param( 'prompt' ) );
$api_key = DS_OPENAI_API_KEY;
$response = wp_remote_post( 'https://api.openai.com/v1/chat/completions', array(
'headers' => array(
'Authorization' => 'Bearer ' . $api_key,
'Content-Type' => 'application/json',
),
'body' => wp_json_encode( array(
'model' => 'gpt-4-turbo',
'messages' => array(
array( 'role' => 'user', 'content' => $prompt )
)
) ),
'timeout' => 30, // AI potrzebuje chwili na odpowiedź
) );
if ( is_wp_error( $response ) ) {
return new WP_Error( 'ai_error', 'Błąd połączenia z API', array( 'status' => 500 ) );
}
$body = json_decode( wp_remote_retrieve_body( $response ) );
return rest_ensure_response( $body->choices[0]->message->content );
}
Krok 3: Tworzenie natywnego bloku Gutenberga
Teraz czas na interfejs użytkownika. Zamiast obciążać stronę builderami, tworzymy lekki, natywny blok oparty na React. Wykorzystamy do tego standardowe narzędzia deweloperskie WordPressa (@wordpress/create-block).
W pliku edit.js naszego nowego bloku, budujemy interfejs pozwalający na wpisanie promptu i przycisk generujący treść:
JavaScript
import { useState } from '@wordpress/element';
import { TextControl, Button, Spinner } from '@wordpress/components';
import apiFetch from '@wordpress/api-fetch';
export default function Edit( { attributes, setAttributes } ) {
const [ prompt, setPrompt ] = useState( '' );
const [ isLoading, setIsLoading ] = useState( false );
const generateContent = async () => {
setIsLoading( true );
try {
const response = await apiFetch( {
path: '/ds-ai/v1/generate',
method: 'POST',
data: { prompt: prompt }
} );
// Zapisujemy wygenerowany tekst do atrybutów bloku
setAttributes( { content: response } );
} catch ( error ) {
console.error( "Błąd generowania:", error );
}
setIsLoading( false );
};
return (
<div className="ds-ai-block-editor">
<TextControl
label="O czym ma napisać AI?"
value={ prompt }
onChange={ ( value ) => setPrompt( value ) }
/>
<Button isPrimary onClick={ generateContent } disabled={ isLoading }>
{ isLoading ? <Spinner /> : 'Generuj Treść' }
</Button>
{ attributes.content && (
<div className="ds-ai-output">
{ attributes.content }
</div>
) }
</div>
);
}
Krok 4: Zapis i wydajność (Frontend)
To, co czyni to rozwiązanie idealnym, to fakt, że sztuczna inteligencja pracuje tylko w panelu administracyjnym. Kiedy redaktor wygeneruje treść i kliknie „Zaktualizuj”, tekst jest zapisywany w bazie danych jako czysty HTML (wewnątrz funkcji save.js bloku).
Dla użytkownika odwiedzającego stronę i dla robotów Google, jest to zwykły, lekki, natywny blok tekstowy. Zero zewnętrznych zapytań na frontendzie, zero wpływu na wskaźniki Core Web Vitals, które są kluczowe przy nowoczesnym podejściu do SEO.
AI a nowoczesne SEO (AEO i GEO)
Podpinając AI pod własnego CMS-a, masz pełną kontrolę nad promptami. Warto to wykorzystać do strukturyzowania treści. Konfigurując ukryte, domyślne polecenia w backendzie (np. „Zawsze formatuj odpowiedź używając list i pogrubień dla kluczowych pojęć”), sprawiasz, że Twoje treści są automatycznie optymalizowane pod kątem AEO (Answer Engine Optimization). Wyszukiwarki napędzane przez AI (jak Google SGE) znacznie chętniej „zasysają” takie zwięzłe, dobrze sformatowane bloki danych.
Podsumowanie
Integracja AI w WordPressie nie musi oznaczać rewolucji technologicznej i spadku wydajności strony. Używając natywnego API WordPressa i komponentów React w Gutenbergu, możemy zbudować potężne narzędzie, które odciąży redaktorów, zachowując jednocześnie nieskazitelny kod i błyskawiczny czas ładowania.
Potrzebujesz dedykowanej integracji AI w swojej firmowej aplikacji lub portalu? W Design Solutions projektujemy rozwiązania skrojone pod specyficzne potrzeby biznesowe. Skontaktuj się z nami!
