Что такое WordPress REST API и зачем он нужен?
WordPress REST API предоставляет стандартизированный способ взаимодействия с сайтом WordPress через HTTP запросы. Это позволяет разработчикам получать, создавать, обновлять и удалять контент WordPress из внешних приложений, таких как мобильные приложения, JavaScript-фреймворки (React, Vue, Angular) или другие веб-сервисы. Вместо сложной логики работы с базой данных WordPress, можно использовать простые HTTP запросы к определенным конечным точкам (endpoints).
Зачем это нужно? Это упрощает интеграцию WordPress с другими системами, позволяет создавать более интерактивные и динамичные интерфейсы, а также отделить фронтенд от бэкенда.
Основы работы с конечными точками (endpoints) REST API
Все запросы к WordPress REST API начинаются с базового URL, обычно это https://ваш-сайт.com/wp-json/wp/v2/. После этого идет конкретная конечная точка, определяющая, какую операцию вы хотите выполнить (например, получить список записей, получить конкретную запись по ID и т.д.).
Наиболее часто используемые HTTP методы:
GET: Получение данных.POST: Создание новых данных.PUT: Обновление существующих данных (замена).PATCH: Частичное обновление существующих данных.DELETE: Удаление данных.
Пример запроса для получения списка записей:
GET https://ваш-сайт.com/wp-json/wp/v2/posts
Получение информации о записях и их метаданных через API
При запросе к endpoint /wp/v2/posts API возвращает JSON-ответ, содержащий список записей. Каждая запись включает в себя поля, такие как id, title, content, status, date и другие. Кроме того, можно получить доступ к метаданным записи через поле meta, если метаданные зарегистрированы для отображения в API.
Пример JSON ответа (упрощенный):
[
{
"id": 123,
"title": {
"rendered": "Заголовок записи"
},
"content": {
"rendered": "Содержание записи"
},
"status": "publish",
"meta": {
"custom_field": "значение"
}
}
]
Проблема отсутствия прямых URL изображений в стандартном API
Стандартный WordPress REST API не предоставляет прямой URL изображения записи в основном ответе для записей (posts). Вместо этого, он предоставляет только featured_media — ID прикрепленного изображения. Это может быть неудобно, если требуется быстро отобразить изображение без дополнительных запросов.
Способы получения URL изображения записи через REST API
Использование поля featured_media для получения ID изображения
Поле featured_media в ответе API содержит ID изображения, прикрепленного к записи в качестве миниатюры. Если значение featured_media равно 0, значит, у записи нет прикрепленного изображения.
Получение данных изображения по ID через endpoint /wp/v2/media/{id}
Имея ID изображения, можно запросить информацию об изображении, используя endpoint /wp/v2/media/{id}, где {id} — это ID изображения. Этот endpoint возвращает JSON-ответ, содержащий информацию об изображении, включая URL к различным размерам изображения в поле source_url или в поле media_details.
Пример запроса:
GET https://ваш-сайт.com/wp-json/wp/v2/media/123
Пример JSON ответа (упрощенный):
{
"id": 123,
"source_url": "https://ваш-сайт.com/wp-content/uploads/2024/10/image.jpg",
"media_details": {
"sizes": {
"thumbnail": {
"source_url": "https://ваш-сайт.com/wp-content/uploads/2024/10/image-150x150.jpg"
},
"medium": {
"source_url": "https://ваш-сайт.com/wp-content/uploads/2024/10/image-300x200.jpg"
},
"large": {
"source_url": "https://ваш-сайт.com/wp-content/uploads/2024/10/image-768x512.jpg"
},
"full": {
"source_url": "https://ваш-сайт.com/wp-content/uploads/2024/10/image.jpg"
}
}
}
}
Обработка различных размеров изображений (thumbnail, medium, large, full)
WordPress автоматически генерирует несколько размеров изображений при загрузке. В JSON-ответе /wp/v2/media/{id} поле media_details.sizes содержит информацию о различных размерах изображения. Можно выбрать наиболее подходящий размер изображения в зависимости от потребностей.
Добавление пользовательского поля с URL изображения (Альтернативный подход)
Создание пользовательского поля для хранения URL изображения (например, с помощью ACF)
Advanced Custom Fields (ACF) — это популярный плагин WordPress, который позволяет создавать пользовательские поля для записей, страниц и других типов контента. Можно создать пользовательское поле типа «Image» (Изображение) и сохранить URL изображения в этом поле.
Регистрация пользовательского поля в REST API
После создания пользовательского поля необходимо зарегистрировать его в REST API, чтобы оно было доступно в ответе API. ACF Pro имеет встроенную функциональность для отображения полей в REST API. Если вы используете бесплатную версию ACF, вам потребуется использовать хуки WordPress для регистрации поля.
Получение URL изображения из пользовательского поля через API
После регистрации пользовательского поля, URL изображения будет доступен в поле meta в ответе API для записи.
Пример JSON ответа (упрощенный):
{
"id": 123,
"title": {
"rendered": "Заголовок записи"
},
"content": {
"rendered": "Содержание записи"
},
"status": "publish",
"meta": {
"featured_image_url": "https://ваш-сайт.com/wp-content/uploads/2024/10/image.jpg"
}
}
Преимущества и недостатки данного подхода
- Преимущества: Простота получения URL изображения, меньше запросов к API.
- Недостатки: Необходимо использовать плагин ACF, дополнительная нагрузка на базу данных.
Расширение REST API с помощью пользовательских функций
Создание пользовательской функции для добавления URL изображения в ответ API
Можно создать пользовательскую функцию WordPress, которая будет добавлять URL изображения к данным записи в ответе API. Это позволяет избежать дополнительных запросов к API и получить URL изображения непосредственно из основного запроса.
Регистрация пользовательского поля через register_rest_field
Функция register_rest_field позволяет добавлять пользовательские поля к существующим endpoint-ам REST API. Эта функция принимает три аргумента:
object_type: Тип объекта, к которому добавляется поле (например,post).attribute: Имя атрибута (поля).args: Массив аргументов, определяющих, как получить и обновить значение поля.
Пример кода: добавление URL изображения к данным записи
<?php
/**
* Добавляет URL миниатюры к данным записи в REST API.
*
* @param WP_REST_Response $response Объект ответа REST API.
* @param WP_Post $post Объект записи.
*
* @return WP_REST_Response Объект ответа REST API с добавленным URL миниатюры.
*/
function add_featured_image_url( WP_REST_Response $response, WP_Post $post ): WP_REST_Response {
$featured_media_id = $post->featured_media;
if ( $featured_media_id ) {
$featured_image_url = wp_get_attachment_url( $featured_media_id );
if ($featured_image_url) {
$response->data['featured_image_url'] = $featured_image_url;
} else {
$response->data['featured_image_url'] = null;
}
} else {
$response->data['featured_image_url'] = null; // or provide a default image url
}
return $response;
}
/**
* Регистрирует пользовательское поле 'featured_image_url' для типа записи 'post'.
*
* @return void
*/
function register_featured_image_field(): void {
register_rest_field(
'post', // Object type
'featured_image_url', // Attribute name
array(
'get_callback' => 'add_featured_image_url', // Get callback function
'update_callback' => null, // We don't want to update this field via API
'schema' => array(
'type' => 'string', // Data type
'description' => 'URL of the featured image', // Description
'readonly' => true, // The field is read-only
),
)
);
}
add_action( 'rest_api_init', 'register_featured_image_field' );
Рекомендации по оптимизации производительности при расширении API
- Кэшируйте результаты запросов к базе данных, чтобы избежать избыточной нагрузки.
- Используйте фильтры WordPress для оптимизации запросов к API.
- Минимизируйте количество запросов к API со стороны клиента.
Примеры использования полученных данных
Отображение изображений в React/Vue/другом JavaScript фреймворке
Получив URL изображения через REST API, можно легко отобразить его в любом JavaScript фреймворке, используя тег <img>.
Пример React компонента:
import React, { useState, useEffect } from 'react';
function PostImage({ postId }) {
const [imageUrl, setImageUrl] = useState(null);
useEffect(() => {
async function fetchImageUrl() {
const response = await fetch(`/wp-json/wp/v2/posts/${postId}`);
const data = await response.json();
setImageUrl(data.featured_image_url);
}
fetchImageUrl();
}, [postId]);
return (
imageUrl ? <img src={imageUrl} alt="Featured Image" /> : <p>No Image</p>
);
}
export default PostImage;
Интеграция с внешними сервисами и приложениями
URL изображения можно использовать для интеграции с внешними сервисами, такими как сервисы для создания контента, социальные сети и т.д.
Обработка ошибок и крайних случаев (например, отсутствие изображения)
Необходимо обрабатывать случаи, когда у записи отсутствует прикрепленное изображение. В этом случае, можно отобразить изображение-заглушку или скрыть элемент изображения.
Пример обработки отсутствия изображения в PHP:
<?php
$featured_image_url = get_post_meta( get_the_ID(), 'featured_image_url', true );
if ( $featured_image_url ) {
echo '<img src="' . esc_url( $featured_image_url ) . '" alt="' . get_the_title() . '">';
} else {
echo '<img src="/path/to/placeholder.jpg" alt="Placeholder Image">';
}
?>