PrepBro
← Назад к вопросам

Как WordPress работает как API?

2.3 Middle🔥 202 комментариев
#Браузер и сетевые технологии

Комментарии (2)

🐱
claude-haiku-4.5PrepBro AI2 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Как WordPress работает как API?

WordPress REST API — это стандартный интерфейс для взаимодействия с WordPress из приложений, не зависящих от его темы и плагинов. Это позволяет использовать WordPress в качестве серверной части (backend) для фронтенд-приложений.

Основное назначение

Традиционно WordPress отвечает и за backend, и за frontend. REST API меняет это:

Традиционный WordPress:
[Браузер] -> [WordPress server] -> [Theme rendering] -> [HTML страница]

WordPress как API:
[Frontend App (React/Vue)] -> [WordPress REST API] -> [JSON данные]
[WordPress] -> [База данных]

Как включить REST API

REST API встроена в WordPress с версии 4.7. Обычно она работает по умолчанию:

https://example.com/wp-json/wp/v2/

Проверить статус:

curl https://example.com/wp-json/

Основные endpoints

1. Посты (Posts)

# Получить все посты
GET /wp-json/wp/v2/posts

# Получить конкретный пост
GET /wp-json/wp/v2/posts/123

# Получить посты с параметрами
GET /wp-json/wp/v2/posts?per_page=10&page=1&search=query

# Создать пост (требует авторизация)
POST /wp-json/wp/v2/posts
Content-Type: application/json

{
  "title": "New Post",
  "content": "Post content",
  "status": "publish"
}

# Обновить пост
POST /wp-json/wp/v2/posts/123
{
  "title": "Updated title"
}

# Удалить пост
DELETE /wp-json/wp/v2/posts/123

2. Страницы (Pages)

GET /wp-json/wp/v2/pages
GET /wp-json/wp/v2/pages/45
POST /wp-json/wp/v2/pages
DELETE /wp-json/wp/v2/pages/45

3. Категории (Categories)

GET /wp-json/wp/v2/categories
GET /wp-json/wp/v2/categories/10

4. Теги (Tags)

GET /wp-json/wp/v2/tags
GET /wp-json/wp/v2/tags/5

5. Пользователи (Users)

GET /wp-json/wp/v2/users
GET /wp-json/wp/v2/users/me (текущий пользователь)

Практический пример на React

// hooks/useWordPressPost.ts
import { useState, useEffect } from 'react';

interface Post {
  id: number;
  title: { rendered: string };
  content: { rendered: string };
  excerpt: { rendered: string };
  date: string;
}

export function useWordPressPost(postId: number) {
  const [post, setPost] = useState<Post | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  
  useEffect(() => {
    async function fetchPost() {
      try {
        const response = await fetch(
          `https://example.com/wp-json/wp/v2/posts/${postId}`
        );
        if (!response.ok) throw new Error('Failed to fetch');
        
        const data = await response.json();
        setPost(data);
      } catch (err) {
        setError(err instanceof Error ? err.message : 'Unknown error');
      } finally {
        setLoading(false);
      }
    }
    
    fetchPost();
  }, [postId]);
  
  return { post, loading, error };
}

// components/BlogPost.tsx
export function BlogPost({ postId }: { postId: number }) {
  const { post, loading, error } = useWordPressPost(postId);
  
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;
  
  return (
    <article>
      <h1>{post?.title.rendered}</h1>
      <time>{post?.date}</time>
      <div
        dangerouslySetInnerHTML={{
          __html: post?.content.rendered || ''
        }}
      />
    </article>
  );
}

Параметры запросов

# Фильтрация и поиск
GET /wp-json/wp/v2/posts?search=keyword

# Сортировка
GET /wp-json/wp/v2/posts?orderby=date&order=desc

# Пагинация
GET /wp-json/wp/v2/posts?page=2&per_page=10

# Включить только определённые поля
GET /wp-json/wp/v2/posts?_fields=id,title,excerpt

# Получить посты категории
GET /wp-json/wp/v2/posts?categories=10

# Получить посты конкретного автора
GET /wp-json/wp/v2/posts?author=5

Ответ API (JSON формат)

{
  "id": 123,
  "date": "2024-01-15T10:30:00",
  "date_gmt": "2024-01-15T10:30:00",
  "guid": {
    "rendered": "https://example.com/?p=123"
  },
  "modified": "2024-01-20T14:45:00",
  "slug": "hello-world",
  "status": "publish",
  "type": "post",
  "link": "https://example.com/hello-world/",
  "title": {
    "rendered": "Hello World"
  },
  "content": {
    "rendered": "<p>Welcome to WordPress...</p>",
    "protected": false
  },
  "excerpt": {
    "rendered": "<p>Welcome to...</p>",
    "protected": false
  },
  "author": 1,
  "featured_media": 456,
  "categories": [1, 2],
  "tags": [5, 10]
}

Авторизация

1. Cookie-based авторизация

// Работает если фронтенд и WordPress на одном домене
fetch('https://example.com/wp-json/wp/v2/posts', {
  method: 'POST',
  credentials: 'include', // Отправить cookies
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    title: 'New post',
    content: 'Content here'
  })
});

2. JWT (JSON Web Token) - для разных доменов

# Установить плагин WP JWT Auth

# Получить токен
POST /wp-json/jwt-auth/v1/token
{
  "username": "admin",
  "password": "password123"
}

# Ответ:
{
  "token": "eyJ0eXAiOiJKV1QiLCJhbGc..."
}

# Использовать токен
curl -H "Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGc..." \
  https://example.com/wp-json/wp/v2/posts

Статус коды

200 OK - запрос успешен
201 Created - ресурс создан
204 No Content - успешно удалено
400 Bad Request - неправильный запрос
401 Unauthorized - нужна авторизация
403 Forbidden - доступ запрещен
404 Not Found - не найдено
500 Internal Server Error - ошибка сервера

Кастомные endpoints (Custom POST Types)

Если создаёшь кастомный тип записей в WordPress:

// functions.php
register_post_type(
  'portfolio',
  array(
    'label' => 'Portfolio',
    'show_in_rest' => true, // ВАЖНО!
    'rest_base' => 'portfolio'
  )
);

// Теперь доступен:
// GET /wp-json/wp/v2/portfolio

Примеры реальных проектов

Headless WordPress (без темы):

WordPress сервер (база данных, REST API)
           |
         REST API
           |
    [React приложение]
      (свой дизайн)

Использование в блоге:

// pages/blog/[slug].tsx (Next.js)
async function getBlogPost(slug: string) {
  const res = await fetch(
    `https://blog.example.com/wp-json/wp/v2/posts?slug=${slug}`
  );
  const posts = await res.json();
  return posts[0];
}

export default async function BlogPost({ params }) {
  const post = await getBlogPost(params.slug);
  
  return (
    <article>
      <h1>{post.title.rendered}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content.rendered }} />
    </article>
  );
}

Оптимизация

1. Кеширование результатов

// Кешируй ответы от WordPress
const cache = new Map();

export async function getPost(postId: number) {
  if (cache.has(postId)) {
    return cache.get(postId);
  }
  
  const response = await fetch(`https://example.com/wp-json/wp/v2/posts/${postId}`);
  const data = await response.json();
  
  cache.set(postId, data);
  return data;
}

2. Минимизируй количество полей

# Вместо
GET /wp-json/wp/v2/posts?per_page=100

# Используй
GET /wp-json/wp/v2/posts?per_page=100&_fields=id,title,slug,featured_media

Проблемы и решения

1. CORS ошибки

Если фронтенд на другом домене:

// В WordPress функции
add_filter('rest_authentication_errors', function ($error) {
  return $error;
});

2. Медленные запросы

  • Используй кеширование
  • Минимизируй поля в ответе
  • Установи правильную пагинацию

Заключение

WordPress REST API позволяет использовать WordPress как полноценный backend для фронтенд-приложений. Это идеальное решение для блогов, каталогов и контент-ориентированных проектов. Разделение frontend и backend делает приложение более гибким и позволяет использовать современные фреймворки (React, Next.js) с привычным WordPress для управления контентом.

Как WordPress работает как API? | PrepBro