Как создать автоматический снимок экрана страницы в WordPress

Автоматическое создание снимков экрана (скриншотов) страниц WordPress — полезный инструмент для создания превью, кеширования визуального контента или мониторинга изменений. В этой статье разберём, как реализовать автоматический скриншот страницы с помощью готовых плагинов и собственного PHP-кода, используя headless браузер и API.

Почему полезно создавать автоматические скриншоты страниц WordPress

Скриншоты страниц позволяют визуально представить содержимое, особенно если вы создаёте каталог ссылок, отзывы, портфолио, или хотите быстро проверять визуальное состояние сайта. Автоматизация избавляет от необходимости делать скриншоты вручную, что экономит время и упрощает поддержку сайта.

Например, для сайта с обзорами плагинов или тем можно автоматически генерировать превью страниц с актуальным отображением интерфейса.

Плагины WordPress для автоматического создания скриншотов

Есть несколько плагинов, которые позволяют интегрировать создание скриншотов прямо в ваш сайт:

• WP Screenshot — простой плагин для создания скриншотов URL с возможностью вставки их в посты и страницы. Можно настроить периодический запуск.
• Screenshot Machine — использует внешний API для генерации скриншотов. Позволяет управлять параметрами размера, задержки и формата.
• Auto Screenshot — автоматически генерирует превью для заданных URL и сохраняет их в медиабиблиотеку.

Однако у всех этих решений есть ограничения: либо платные тарифы, либо ограниченный контроль над процессом. Поэтому рассмотрим, как сделать собственное решение.

Реализация автоматического скриншота страницы с помощью PHP и Puppeteer

Для создания скриншотов программно рекомендуется использовать headless браузер, например, Puppeteer. Он позволяет запускать Chromium в фоновом режиме и делать скриншоты страниц.

Ниже пример реализации на Node.js, который можно интегрировать с WordPress через WP-CLI, REST API или запускать как отдельный сервис.

const puppeteer = require('puppeteer');

async function wpmarkCaptureScreenshot(url, outputPath) {
    const browser = await puppeteer.launch({args: ['--no-sandbox']});
    const page = await browser.newPage();
    await page.setViewport({ width: 1280, height: 800 });
    await page.goto(url, { waitUntil: 'networkidle2' });
    await page.screenshot({ path: outputPath, fullPage: true });
    await browser.close();
}

// Использование
wpmarkCaptureScreenshot('https://wpmark.ru', './screenshots/wpmark.png');

Для запуска нужен установленный Node.js и Puppeteer (npm install puppeteer).

Как интегрировать с WordPress

1. Создайте REST API endpoint в WordPress, который принимает URL и вызывает скрипт Node.js через exec или shell_exec.

2. Сохраните полученный скриншот в медиабиблиотеку WordPress программно, используя функции wp_upload_bits и wp_insert_attachment.

3. Можно вызвать API из административной части сайта для автоматического обновления скриншотов.

Автоматизация с помощью WP-Cron и кастомного плагина

Чтобы скриншоты обновлялись регулярно, создайте собственный плагин WordPress, который будет запускать скрипт через WP-Cron.

<?php
/**
 * Plugin Name: WPMark Auto Screenshot
 * Description: Автоматический скриншот страниц через Puppeteer
 * Version: 1.0
 * Author: wpmark.ru
 */

register_activation_hook(__FILE__, 'wpmark_schedule_screenshot_cron');
register_deactivation_hook(__FILE__, 'wpmark_clear_screenshot_cron');

function wpmark_schedule_screenshot_cron() {
    if (!wp_next_scheduled('wpmark_screenshot_cron_hook')) {
        wp_schedule_event(time(), 'hourly', 'wpmark_screenshot_cron_hook');
    }
}

function wpmark_clear_screenshot_cron() {
    $timestamp = wp_next_scheduled('wpmark_screenshot_cron_hook');
    wp_unschedule_event($timestamp, 'wpmark_screenshot_cron_hook');
}

add_action('wpmark_screenshot_cron_hook', 'wpmark_run_screenshot_script');

function wpmark_run_screenshot_script() {
    $url = site_url();
    $output = ABSPATH . 'wp-content/uploads/screenshots/auto_screenshot.png';
    $command = 'node ' . escapeshellarg(ABSPATH . 'screenshot.js') . ' ' . escapeshellarg($url) . ' ' . escapeshellarg($output);
    exec($command);
    // Здесь можно добавить код сохранения скриншота в медиабиблиотеку
}
?>

Этот плагин запускает внешний Node.js скрипт ежечасно, который генерирует скриншот домашней страницы.

Альтернативные сервисы для создания скриншотов через API

Если нет возможности запускать Puppeteer, можно использовать API сторонних сервисов:

• ScreenshotAPI.net
• ApiFlash
• Urlbox

Они предлагают REST API, которые можно вызывать из WordPress, получая URL изображения. В сочетании с WPRemark можно автоматически размещать визуальные отзывы с превью страницы.

Пример вызова API из PHP

function wpmark_get_screenshot_via_api($url) {
    $api_key = 'ВАШ_API_КЛЮЧ';
    $api_url = 'https://api.screenshotapi.net/screenshot';
    $response = wp_remote_get(add_query_arg([
        'token' => $api_key,
        'url' => $url,
        'full_page' => 'true'
    ], $api_url));

    if (is_wp_error($response)) {
        return false;
    }

    $body = json_decode(wp_remote_retrieve_body($response), true);
    return $body['screenshot'] ?? false;
}

Заключение по теме создания автоматических скриншотов в WordPress

Автоматизация создания скриншотов страниц WordPress — задача с множеством вариантов решения. Использование headless браузера Puppeteer даёт полный контроль и высокое качество, но требует настройки сервера. Плагины и API-сервисы упрощают процесс, но могут иметь ограничения.

Для сайтов на wpmark.ru, где важна визуализация контента, особенно полезно комбинировать собственные решения с сервисами, а также интегрировать скриншоты с плагинами вроде WPRemark для отзывов или WPStories для визуальных историй.

Если нужна помощь с внедрением, рекомендуем рассмотреть профессиональные плагины на WPSHOP.RU.