Jak dodać src i alt obrazka (featured image) do WordPress API?

WordPress API pozwala programistom na wykorzystanie wordpressowego backendu w nowy sposób. Od dodania pojedynczych funkcjonalności aż po całe szablony pisane np. w React.js.

WordPress API dla postów dostęne jest pod adresem www.twojastrona.pl/wp-json/wp/v2/posts

Możesz znaleźć tam podstawowe informacje o postach na blogu, takie jak tytuł, slug czy treść wpisu. Mimo, że informacji jest dość sporo, brakuje podstawowych danych, które umożliwiłyby wyświetlenie na front-endzie obrazków. Mianowicie, brakuje atrybutów src i alt dla featured image.

Na szczęście WordPress API może być rozszerzone o dodatkowe, potrzebne nam endpointy. Z tej funkcjonalności skorzystamy rozszerzając API o atrybuty src i alt. Można to zrobić za pomocą poniższego kodu wklejonego np. w functions.php

Na szczęście WordPress API może być rozszerzone o dodatkowe, potrzebne nam endpointy. Z tej funkcjonalności skorzystamy rozszerzając API o atrybuty src i alt. Można to zrobić za pomocą poniższego kodu wklejonego np. w functions.php

register_rest_field(array('post'), 'featured_img', array('get_callback' => 'mytheme_get_featured_image'));

function mytheme_get_featured_image($object) {
    if ($object['featured_media']) {
        $image = wp_get_attachment_image_src($object['featured_media'], 'size');
        $alt = get_post_meta($object['featured_media'], '_wp_attachment_image_alt', true);

        return array('url' => $image[0], 'alt' => $alt);
    }
}

Pierwszy argument funkcji register_rest_field wskazuje pole, do którego rejestrujemy endpoint. W tym przypadku będzie to post. Drugi argument, w naszym przypadku ‚featured_img’ to atrybut pod którym dodamy w API dane dotyczące naszego obrazka. Zamiast użytego przeze mnie ‚featured_img’ możesz użyć innej nazwy. Trzeci argument w naszym przypadku wskazuje na funkcję, która ma być użyta. Tutaj również możesz użyć dowolnej nazwy.

Tworząc funkcje warto podążać za dobrymi praktykami i jako pierwszego członu nazwy funkcji używać nazwy szablonu, którego funkcja dotyczy. Nasza funkcja korzystać będzie z ID obrazka, które przekazane będzie w zmiennej $object[‚featured_media’].

Pobierając dane o src i alt korzystamy z dwóch wordpressowych funkcji, czyli wp_get_attachment_image_src i get_post_meta. Pamiętaj, by zamiast ‚size’ wpisać rozmiar obrazka, którego chcesz użyć. Argument ten jest opcjonalny, więc możesz go pominąć.

Na koniec zwracamy url i alt obrazka. Zamiast ‚url’ i ‚alt’ możesz użyć innych nazw. Pod tymi nazwami dostępne będą dane dotyczące featured image. Jeżeli dany obrazek nie będzie miał określonego atrybutu alt, w API dla alt zobaczysz po prostu „”.

Efekt końcowy, który zobaczymy w WordPress API wyglądać będzie mniej więcej tak, jak poniżej:

...
tags: []
featured_img {
	url: "https://mojastrona.pl/2020/01/nazwapliku.jpg"
	alt: "alt obrazka"
	}
_links: {}
...


Leave a Comment

Twój adres email nie zostanie opublikowany.