WordPress

Obrazki OG w
WordPress

Wygeneruj obrazek przy publikacji wpisu i zapisz go w meta.

Gdzie to wpiąć

W WordPressie nie chcesz wołać API przy każdym wyświetleniu strony. Podpinasz się pod zapis wpisu, generujesz raz i zapisujesz adres w polu meta, z którego korzysta potem twój motyw albo wtyczka SEO.

functions.php

add_action('save_post_post', function (int $post_id, WP_Post $post): void {
    if (wp_is_post_revision($post_id) || $post->post_status !== 'publish') {
        return;
    }

    $response = wp_remote_post('https://imageapi.dev/v1/images?wait=true', [
        'timeout' => 15,
        'headers' => [
            'Authorization' => 'Bearer ' . IMAGE_API_KEY,
            'Content-Type'  => 'application/json',
        ],
        'body' => wp_json_encode([
            'template' => 'blog-og',
            'modifications' => [
                'title'  => get_the_title($post),
                'author' => get_the_author_meta('display_name', $post->post_author),
                'site'   => wp_parse_url(home_url(), PHP_URL_HOST),
            ],
        ]),
    ]);

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

    $body = json_decode(wp_remote_retrieve_body($response), true);

    if (! empty($body['url'])) {
        update_post_meta($post_id, '_og_image', esc_url_raw($body['url']));
    }
}, 10, 2);

// Print it in <head> if you are not using an SEO plugin.
add_action('wp_head', function (): void {
    if (! is_singular('post')) {
        return;
    }

    $image = get_post_meta(get_the_ID(), '_og_image', true);

    if ($image) {
        printf('<meta property="og:image" content="%s">' . "\n", esc_attr($image));
        echo '<meta name="twitter:card" content="summary_large_image">' . "\n";
    }
});
Pułapka

Hak `save_post` odpala się także przy autozapisie i przy każdej aktualizacji. Warunek na `post_status` i `wp_is_post_revision` chroni przed generowaniem obrazka kilkanaście razy w trakcie pisania jednego wpisu.

Co dostajesz w odpowiedzi

Z ?wait=true czekasz na gotowy obrazek w tym samym połączeniu — zwykle około sekundy.

{
    "id": "img_01m08s3ez1zcv28h335g9923bw",
    "status": "completed",
    "url": "https://cdn.imageapi.dev/renders/img_01m08s3ez1zcv28h335g9923bw.png",
    "duration_ms": 912
}

Ile to kosztuje

Sto obrazków miesięcznie za darmo, potem $9 za dwa tysiące. Ten sam wpis wyrenderowany drugi raz zwraca istniejący adres i nie zużywa limitu — więc przebudowanie strony nic nie kosztuje.

Inne frameworki