{"id":233915,"date":"2023-02-25T18:39:00","date_gmt":"2023-02-25T15:39:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233915"},"modified":"2022-11-11T13:09:32","modified_gmt":"2022-11-11T10:09:32","slug":"szczegolowy-przewodnik-po-tworzeniu-i-pobieraniu-niestandardowych-punktow-koncowych-api-wp-rest","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/szczegolowy-przewodnik-po-tworzeniu-i-pobieraniu-niestandardowych-punktow-koncowych-api-wp-rest\/","title":{"rendered":"Szczeg\u00f3\u0142owy przewodnik po tworzeniu i pobieraniu niestandardowych punkt\u00f3w ko\u0144cowych API WP REST"},"content":{"rendered":"\n<p>Ten post poka\u017ce, jak tworzy\u0107 niestandardowe punkty ko\u0144cowe WordPress REST i r\u00f3\u017cne metody wykonywania \u017c\u0105da\u0144 do nich. B\u0119d\u0105 przyk\u0142ady zar\u00f3wno w PHP, jQuery, jak i waniliowym JavaScript.<\/p>\n<p>Zak\u0142adam, \u017ce wiesz ju\u017c, czym jest WP REST API, ale oto kr\u00f3tkie podsumowanie. WordPress REST API to interfejs JSON do wysy\u0142ania i odbierania danych z Twojej witryny WordPress. Mo\u017cesz uzyska\u0107 dost\u0119p do punkt\u00f3w ko\u0144cowych (okre\u015blonych \u015bcie\u017cek\/adres\u00f3w URL) zar\u00f3wno zewn\u0119trznie, jak i wewn\u0119trznie. WordPress ma ju\u017c kilka dost\u0119pnych punkt\u00f3w ko\u0144cowych, np. do pobierania post\u00f3w, kategorii, przeszukiwania witryny i nie tylko. Zobacz <a href=\"https:\/\/developer.wordpress.org\/rest-api\/reference\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">przegl\u0105d domy\u015blnych punkt\u00f3w ko\u0144cowych WordPressa<\/a> tutaj. Ale programi\u015bci maj\u0105 pe\u0142n\u0105 swobod\u0119 w tworzeniu w\u0142asnych niestandardowych punkt\u00f3w ko\u0144cowych za pomoc\u0105 tego interfejsu API, zar\u00f3wno do wykonywania dzia\u0142a\u0144, jak i pobierania danych.<\/p>\n<p>Zaczniemy od pierwszego kroku; czyli tworzenie niestandardowych punkt\u00f3w ko\u0144cowych. Je\u015bli interesuje Ci\u0119 tylko spos\u00f3b sk\u0142adania pr\u00f3\u015bb, przejd\u017a do drugiej cz\u0119\u015bci.<\/p>\n<h2>Tw\u00f3rz niestandardowe punkty ko\u0144cowe<\/h2>\n<p>Rejestracja niestandardowych punkt\u00f3w ko\u0144cowych odbywa si\u0119 w PHP. Mo\u017cesz doda\u0107 kod do <code>functions.php<\/code>pliku kodu motywu lub aktywnej wtyczki. Pod\u0142\u0105cz funkcj\u0119 <code>rest_api_init<\/code>i u\u017cyj jej <code>[register_rest_route](https:\/\/developer.wordpress.org\/reference\/functions\/register_rest_route\/)()<\/code>dla ka\u017cdego punktu ko\u0144cowego, kt\u00f3ry chcesz doda\u0107.<\/p>\n<p>Jako pierwszy parametr <code>register_rest_route()<\/code>musisz poda\u0107 unikaln\u0105 przestrze\u0144 nazw, aby upewni\u0107 si\u0119, \u017ce punkty ko\u0144cowe nie s\u0105 w konflikcie z \u017cadnym innym. U\u017cyj \u015blimaka swojego motywu lub wtyczki. Powszechn\u0105 praktyk\u0105 jest nast\u0119pnie do\u0142\u0105czanie a <code>\/<\/code>po nim numeru wersji kodu. Jako przyk\u0142ad u\u017cyj\u0119 przestrzeni nazw <code>awhitepixel\/v1<\/code>. Drugim parametrem jest \u015bcie\u017cka (kt\u00f3ra nast\u0119puje po przestrzeni nazw). Na koniec mo\u017cesz opcjonalnie poda\u0107 tablic\u0119 jako trzeci parametr z opcjami. W tej tablicy mo\u017cna na przyk\u0142ad zdefiniowa\u0107 metod\u0119 \u017c\u0105dania (GET, POST lub dowoln\u0105 inn\u0105), zdefiniowa\u0107 parametry i, co najwa\u017cniejsze, zdefiniowa\u0107 funkcj\u0119, kt\u00f3ra ma zosta\u0107 uruchomiona, gdy zostanie za\u017c\u0105dany ten punkt ko\u0144cowy.<\/p>\n<p>Jako minimum nale\u017cy poda\u0107 argumenty \u201emetoda&quot; i \u201eodwo\u0142anie zwrotne&#8221; (czyli funkcja do obs\u0142ugi danych punktu ko\u0144cowego) jako trzeci parametr. W przypadku \u201emetody&#8221; mo\u017cesz ustawi\u0107 je jako \u201e <code>GET'<\/code>, <code>'POST'<\/code>, <code>'PUT'<\/code>, lub dowoln\u0105 inn\u0105 prawid\u0142ow\u0105 metod\u0119 \u017c\u0105dania (lub tablic\u0119 wielu), ale polecam do tego u\u017cywa\u0107 domy\u015blnych ustawie\u0144 WordPressa. S\u0105 to:<\/p>\n<ul>\n<li><code>WP_REST_Server::READABLE<\/code> metoda &#8217; <code>GET<\/code>&#8217;<\/li>\n<li><code>WP_REST_Server::EDITABLE<\/code> metody &#8217; <code>POST<\/code>&#8217;, &#8217; <code>PUT<\/code>&#8217; i &#8217; <code>PATCH<\/code>&#8217;<\/li>\n<li><code>WP_REST_Server::DELETABLE<\/code> metoda &#8217; <code>DELETE<\/code>&#8217;<\/li>\n<li><code>WP_REST_Server::ALLMETHODS<\/code> wszystkie powy\u017csze metody<\/li>\n<\/ul>\n<p>Stw\u00f3rzmy podstawowy niestandardowy punkt ko\u0144cowy, do kt\u00f3rego mo\u017cna dotrze\u0107 za pomoc\u0105 \u017c\u0105da\u0144 GET:<\/p>\n<pre><code>add_action( 'rest_api_init', function() {\n    register_rest_route( 'awhitepixel\/v1', '\/getsomedata', [\n        'method'   =&gt; WP_REST_Server::READABLE,\n        'callback' =&gt; 'awhitepixel_rest_route_getsomedata',\n    ] );\n} );<\/code><\/pre>\n<p>W wierszu <code>#2<\/code>zdefiniowali\u015bmy nasz niestandardowy punkt ko\u0144cowy jako \u201e <code>awhitepixel\/v1\/getsomedata<\/code>&#8222;. Pe\u0142ny adres URL b\u0119dzie zawiera\u0142 prefiks g\u0142\u00f3wnego adresu URL interfejsu API REST WordPressa, kt\u00f3rym jest <code>&lt;yourdomain&gt;\/wp-json<\/code>. Tak wi\u0119c pe\u0142ny adres URL do powy\u017cszego punktu ko\u0144cowego to \u201e <code>&lt;yourdomain&gt;\/wp-json\/awhitepixel\/v1\/getsomedata<\/code>&#8222;. W linii <code>#4<\/code>podali\u015bmy nazw\u0119 funkcji jako callback, kt\u00f3r\u0105 dodamy wkr\u00f3tce.<\/p>\n<p>Podczas rejestrowania (lub zmieniania) tras REST API za pomoc\u0105 <code>register_rest_route()<\/code>, musisz <strong>usun\u0105\u0107 swoje permalinki<\/strong>, aby to zadzia\u0142a\u0142o. Mo\u017cesz to zrobi\u0107, odwiedzaj\u0105c Ustawienia&gt; Permalinki w admin i po prostu kliknij Zapisz.<\/p>\n<p>Nie zdefiniowali\u015bmy jeszcze funkcji wywo\u0142ania zwrotnego \u2013 czyli funkcji dla kodu obs\u0142uguj\u0105cego reakcj\u0119 na u\u017cycie tego punktu ko\u0144cowego. Musi zwr\u00f3ci\u0107 prawid\u0142ow\u0105 odpowied\u017a REST (w formacie JSON), wi\u0119c musisz co\u015b zwr\u00f3ci\u0107, nawet je\u015bli punkt ko\u0144cowy nie powinien zwraca\u0107 danych. Mo\u017cesz u\u017cy\u0107 funkcji <code>[rest_ensure_response](https:\/\/developer.wordpress.org\/reference\/functions\/rest_ensure_response\/)()<\/code>funkcji lub utworzy\u0107 instancj\u0119 <code>WP_REST_Response<\/code>obiektu jako zwrot wywo\u0142ania zwrotnego. Jako parametr funkcji zwrotnej otrzymujemy <code>WP_REST_Request<\/code>obiekt, kt\u00f3ry zawiera wszystkie informacje o \u017c\u0105daniu \u2013 w tym dowolne parametry. Stw\u00f3rzmy prost\u0105 funkcj\u0119 zwrotn\u0105, kt\u00f3ra po prostu wysy\u0142a tekst jako odpowied\u017a:<\/p>\n<pre><code>function awhitepixel_rest_route_getsomedata( $request) {\n    $response = 'Hello there!';\n    return rest_ensure_response( $response );\n}<\/code><\/pre>\n<p>Jest to najbardziej podstawowy spos\u00f3b napisania wywo\u0142ania zwrotnego. Funkcja <code>rest_ensure_response()<\/code>upewnia si\u0119, \u017ce wszelkie podane przez nas dane (ci\u0105g znak\u00f3w) zostan\u0105 przekonwertowane na poprawn\u0105 odpowied\u017a REST. Oczywi\u015bcie b\u0119dziesz chcia\u0142 doda\u0107 tutaj wi\u0119cej kodu, aby albo zrobi\u0107 co\u015b w WordPressie, albo pobra\u0107 i odes\u0142a\u0107 dane.<\/p>\n<p>Za pomoc\u0105 powy\u017cszego kodu (rejestruj\u0105c endpoint i funkcj\u0119 callback) mo\u017cesz spr\u00f3bowa\u0107 przej\u015b\u0107 do adresu URL w przegl\u0105darce i zobaczy\u0107, co otrzymujesz. (Pami\u0119taj, aby opr\u00f3\u017cni\u0107 swoje permalinki). Przej\u015bcie do <code>&lt;domain&gt;\/wp-json\/awhitepixel\/v1\/getsomedata<\/code>przegl\u0105darki spowoduje wy\u015bwietlenie ci\u0105gu \u201eHello there!&#8221;.<\/p>\n<h3>Akceptacja parametr\u00f3w<\/h3>\n<p>Zezwalanie punktom ko\u0144cowym na akceptowanie parametr\u00f3w jest bardzo powszechne i przydatne. Na przyk\u0142ad, je\u015bli Twoja witryna zawiera np. dane produktu, potrzebujesz punktu ko\u0144cowego, w kt\u00f3rym mo\u017cesz poda\u0107 identyfikator produktu, aby uzyska\u0107 dane tego produktu. Mo\u017cna to zrobi\u0107 na dwa sposoby. Najpopularniejszym sposobem jest u\u017cycie ci\u0105gu zapytania GET (kt\u00f3re jest dodawane po adresie URL po znaku <code>?<\/code>, oddzielone znakami <code>&amp;<\/code>w formacie klucz=warto\u015b\u0107, na przyk\u0142ad \u201e <code>&lt;endpoint&gt;\/product\/?product_id=14<\/code>&#8222;). Mo\u017cesz te\u017c zdefiniowa\u0107 \u201e\u0142adniejszy&#8221; wzorzec adresu URL, w kt\u00f3rym parametry s\u0105 cz\u0119\u015bci\u0105 \u015bcie\u017cki. Na przyk\u0142ad \u201e <code>&lt;endpoint&gt;\/product\/14\/<\/code>&#8222;. Ta ostatnia metoda wymaga jednak pewnej wiedzy, aby regexesy. Kt\u00f3r\u0105 metod\u0119 wybierzesz, zale\u017cy od Ciebie, poka\u017c\u0119 obie poni\u017cej.<\/p>\n<h4>POBIERZ parametry<\/h4>\n<p>Definiowanie mo\u017cliwych parametr\u00f3w GET do punktu ko\u0144cowego odbywa si\u0119 za pomoc\u0105 <code>args<\/code>klucza \u201e &#8221; w <code>register_rest_route()<\/code>trzecim parametrze. Dla ka\u017cdego parametru, kt\u00f3ry chcesz zezwoli\u0107, zdefiniuj warto\u015b\u0107 klucza (w powy\u017cszym przyk\u0142adzie \u201e <code>product_id<\/code>&#8222;) oraz tablic\u0119 opcji dla tego parametru. Jako opcje mo\u017cesz zdefiniowa\u0107 format parametru (je\u015bli oczekuje na przyk\u0142ad liczby lub \u0142a\u0144cucha), a tak\u017ce zdecydowa\u0107, czy parametr jest wymagany, czy nie.<\/p>\n<p>Jako przyk\u0142ad chcemy, aby nasz punkt ko\u0144cowy akceptowa\u0142 \u201e <code>product_id<\/code>&#8221; jako liczb\u0119 niewymagan\u0105.<\/p>\n<pre><code>add_action( 'rest_api_init', function() {\n    register_rest_route( 'awhitepixel\/v1', '\/getsomedata', [\n        'method'   =&gt; WP_REST_Server::READABLE,\n        'callback' =&gt; 'awhitepixel_rest_route_getsomedata',\n        'args'     =&gt; [\n            'product_id' =&gt; [\n                'required' =&gt; false,\n                'type'     =&gt; 'number',\n            ],\n        ],\n    ] );\n} );\n\u00a0\nfunction awhitepixel_rest_route_getsomedata( $request) {\n    $product_id = $request-&gt;get_param( 'product_id' );\n    if (! empty( $product_id)) {\n        $response = 'Return product data for ID '. $product_id;\n    } else {\n        $response = 'Hello there!';\n    }\n    return rest_ensure_response( $response );\n}<\/code><\/pre>\n<p>Je\u015bli zdefiniujesz parametr jako true w <code>required<\/code>, WordPress b\u0119dzie obs\u0142ugiwa\u0142 przekazywanie odpowiedzi b\u0142\u0119du 400. Podobnie w przypadku przekazania nieprawid\u0142owego formatu, na przyk\u0142ad \u201ehello&#8221; jako warto\u015bci do parametru, kt\u00f3ry oczekuje liczby.<\/p>\n<p>W wierszu <code>#15<\/code>funkcji wywo\u0142ania zwrotnego zobaczysz, jak uzyska\u0107 warto\u015b\u0107 parametru z \u017c\u0105dania; przy u\u017cyciu metody <code>get_param()<\/code>w przekazanym <code>WP_REST_Request<\/code>obiekcie. Jako przyk\u0142ad poka\u017c\u0119 r\u00f3\u017cne odpowiedzi w zale\u017cno\u015bci od tego, czy <code>product_id<\/code>podano, czy nie (pami\u0119taj, \u017ce zdefiniowali\u015bmy to jako opcjonalne). Logika modyfikacji kodu zgodnie z podanymi parametrami zale\u017cy wy\u0142\u0105cznie od Ciebie i Twojego projektu. Mo\u017cesz mie\u0107 mniej punkt\u00f3w ko\u0144cowych, kt\u00f3re akceptuj\u0105 wiele parametr\u00f3w, lub wiele wi\u0119cej oddzielnych punkt\u00f3w ko\u0144cowych dla ka\u017cdego konkretnego przypadku.<\/p>\n<p>Z powy\u017cszym kodem otrzymam \u201eWitaj!&#8221; kiedy odwiedzam <code>&lt;yourdomain&gt;\/awhitepixel\/v1\/getsomedata<\/code>i \u201eZwr\u00f3\u0107 dane produktu dla ID 14&#8243;, kiedy przechodz\u0119 do <code>&lt;yourdomain&gt;\/awhitepixel\/v1\/getsomedata\/?product_id=14<\/code>.<\/p>\n<h4>Parametry jako cz\u0119\u015b\u0107 \u015bcie\u017cki<\/h4>\n<p>Je\u015bli chcesz, aby parametry by\u0142y cz\u0119\u015bci\u0105 \u015bcie\u017cki, a nie GET ci\u0105gu zapytania, mo\u017cesz to zrobi\u0107. Nast\u0119pnie w \u015bcie\u017cce podasz wzorzec wyra\u017cenia regularnego \u2013 drugi parametr do <code>register_rest_route()<\/code>.<\/p>\n<p>Tworzenie wzorc\u00f3w regex mo\u017ce wygl\u0105da\u0107 do\u015b\u0107 tajemniczo, ale poniewa\u017c jest to ca\u0142y temat, \u0142atwo znajdziesz przyk\u0142ady dla konkretnych przypadk\u00f3w, je\u015bli je wygooglujesz. Poka\u017c\u0119 przyk\u0142ad definiowania wyra\u017cenia regularnego, kt\u00f3re akceptuje liczb\u0119 o dowolnej d\u0142ugo\u015bci;<\/p>\n<pre><code>add_action( 'rest_api_init', function() {\n    register_rest_route( 'awhitepixel\/v1', '\/getsomedata\/(?P&lt;product_id&gt;[d]+)', [\n        'method'   =&gt; WP_REST_Server::READABLE,\n        'callback' =&gt; 'awhitepixel_rest_route_getsomedata',\n    ] );\n} );\n\u00a0\nfunction awhitepixel_rest_route_getsomedata( $request) {\n    $product_id = $request-&gt;get_param( 'product_id' );\n    $response   = 'Return product data for ID '. $product_id;\n    return rest_ensure_response( $response );\n}<\/code><\/pre>\n<p>Jak wida\u0107 w wierszu #2 doda\u0142em <code>(?P&lt;product_id&gt;[d]+)<\/code>na ko\u0144cu wz\u00f3r regex. Ten wzorzec oznacza, \u017ce \u200b\u200bmamy zebra\u0107 liczb\u0119 (<code>d<\/code>) o dowolnej d\u0142ugo\u015bci (<code>+<\/code>) i przypisa\u0107 zebran\u0105 warto\u015b\u0107 do klucza parametru <code>product_id<\/code>. A w naszej funkcji zwrotnej u\u017cywamy dok\u0142adnie tej samej metody, co podczas konfigurowania parametr\u00f3w GET; <code>get_param()<\/code>w <code>WP_REST_Request<\/code>obiekcie przekazanym do funkcji.<\/p>\n<p>Za pomoc\u0105 powy\u017cszego kodu (po opr\u00f3\u017cnieniu permalink\u00f3w) mo\u017cemy odwiedzi\u0107 adres URL <code>&lt;yourdomain&gt;\/wp-json\/awhitepixel\/v1\/getsomedata\/14<\/code>, aby uzyska\u0107 nasz\u0105 odpowied\u017a. Ta metoda z pewno\u015bci\u0105 skutkuje \u201e\u0142adniejszymi&#8221; adresami URL, ale kod mo\u017ce \u0142atwo sta\u0107 si\u0119 trudniejszy do odczytania i naprawia\u0107 b\u0142\u0119dy. Wyb\u00f3r metody zale\u017cy od Ciebie.<\/p>\n<h3>Zwracanie prawid\u0142owej odpowiedzi<\/h3>\n<p>Wcze\u015bniej kr\u00f3tko wspomnia\u0142em, jak funkcja callback musi zwr\u00f3ci\u0107 poprawn\u0105 odpowied\u017a REST. Do tej pory u\u017cywali\u015bmy prostszego <code>rest_ensure_response()<\/code>. Ale czasami mo\u017cesz potrzebowa\u0107 wi\u0119kszej kontroli nad zwrotem punktu ko\u0144cowego. Mo\u017cesz na przyk\u0142ad chcie\u0107 kontrolowa\u0107 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Status\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">kod statusu odpowiedzi HTTP<\/a>. Za\u0142\u00f3\u017cmy, \u017ce tworzysz punkt ko\u0144cowy, w kt\u00f3rym mo\u017cesz poda\u0107 identyfikator produktu i uzyska\u0107 dane dla tego produktu. Ale je\u015bli ten identyfikator produktu nie istnieje lub jakiekolwiek inne parametry powoduj\u0105 zamieszanie, mo\u017cesz chcie\u0107 zwr\u00f3ci\u0107 kod stanu, na przyk\u0142ad 400 (z\u0142e \u017c\u0105danie) lub 404 (nie znaleziono). A mo\u017ce 500 (b\u0142\u0105d serwera). Zawsze przekazywanie 200 (Sukces), nawet je\u015bli \u017c\u0105danie by\u0142o z\u0142e, mo\u017ce powodowa\u0107 problemy po stronie nadawcy.<\/p>\n<p>Poleci\u0142bym wtedy twoj\u0105 funkcj\u0119 zwrotn\u0105 zwracaj\u0105c\u0105 <code>WP_REST_Response<\/code>obiekt. Za pomoc\u0105 tego obiektu mo\u017cesz kontrolowa\u0107 kilka rzeczy, w tym kod statusu. To prostsze ni\u017c my\u015blisz! W najprostszej formie mo\u017cna utworzy\u0107 now\u0105 instancj\u0119 <code>WP_REST_Response<\/code>, poda\u0107 tablic\u0119 danych do zwr\u00f3cenia jako pierwszy parametr, a kod stanu jako drugi parametr. Jako przyk\u0142ad:<\/p>\n<pre><code>function awhitepixel_rest_route_getsomedata( $request) {\n    $product_id = $request-&gt;get_param( 'product_id' );\n    \/\/ Do some external function call that returns product data or empty array on error\n    $product_data = awhitepixel_get_product( $product_id );\n    if (empty( $product_data)) {\n        return new WP_REST_Response( [\n            'message' =&gt; 'Product was not found',\n        ], 400 );\n    }\n    return new WP_REST_Response( $product_data, 200 );\n}<\/code><\/pre>\n<p>W powy\u017cszym przyk\u0142adzie przechowujemy zwrot <code>awhitepixel_get_product()<\/code>funkcji w zmiennej. Ta funkcja nie istnieje i powiniene\u015b j\u0105 zast\u0105pi\u0107 funkcj\u0105, kt\u00f3ra powinna pobiera\u0107 (lub wykonywa\u0107) dzia\u0142ania, kt\u00f3re chcesz w projekcie. Ale powiedzmy, \u017ce funkcja zwraca pust\u0105 tablic\u0119, a to oznacza, \u017ce \u200b\u200bco\u015b posz\u0142o nie tak (na przyk\u0142ad produkt nie istnia\u0142). Mogliby\u015bmy wtedy zwr\u00f3ci\u0107 <code>WP_REST_Response<\/code>obiekt z kodem statusu 400 i opcjonalnie komunikat jako dane wyja\u015bniaj\u0105ce przyczyn\u0119 niepowodzenia (line <code>#5-9<\/code>). W przeciwnym razie zwracamy dane z kodem statusu 200 Success (linia <code>#10<\/code>).<\/p>\n<h2>Wysy\u0142anie \u017c\u0105da\u0144 do (niestandardowych) punkt\u00f3w ko\u0144cowych<\/h2>\n<p>Przejd\u017amy na drug\u0105 stron\u0119, cz\u0119\u015b\u0107 dotycz\u0105c\u0105 wysy\u0142ania: Jak wysy\u0142a\u0107 \u017c\u0105dania do naszych niestandardowych punkt\u00f3w ko\u0144cowych. Zwykle wysy\u0142asz \u017c\u0105dania WP REST API za pomoc\u0105 JavaScript, a tutaj znajdziesz przyk\u0142ady u\u017cycia jQuery, biblioteki WordPress i waniliowego JavaScript. Jest to rzadkie, ale mo\u017cliwe, aby wykona\u0107 \u017c\u0105danie REST r\u00f3wnie\u017c za pomoc\u0105 PHP \u2013 wi\u0119c poda\u0142em przyk\u0142ad.<\/p>\n<p>Pierwsz\u0105 rzecz\u0105, o kt\u00f3rej nale\u017cy pami\u0119ta\u0107, jest to, \u017ce oczywi\u015bcie musisz zna\u0107 pe\u0142ny adres URL, aby wys\u0142a\u0107 \u017c\u0105danie. Nie polecam kodowania domeny na sztywno (przed punktem ko\u0144cowym), poniewa\u017c istnieje wiele sposob\u00f3w uzyskania tego, je\u015bli Tw\u00f3j Javascript dzia\u0142a w WordPress. W starszych wersjach WordPressa nale\u017ca\u0142oby u\u017cy\u0107 <code>[wp_localize_script](https:\/\/developer.wordpress.org\/reference\/functions\/wp_localize_script\/)()<\/code>PHP i przekaza\u0107 rdze\u0144 URL REST jako globaln\u0105 zmienn\u0105 JavaScript. Ale poni\u017csze przyk\u0142ady pokazuj\u0105 nowszy i lepszy spos\u00f3b na uzyskanie g\u0142\u00f3wnego adresu URL REST witryny WordPress.<\/p>\n<p>Inn\u0105 rzecz\u0105, na kt\u00f3r\u0105 nale\u017cy zwr\u00f3ci\u0107 uwag\u0119, jest to, \u017ce w przypadku swojego projektu prawdopodobnie zawin\u0105\u0142by\u015b \u017c\u0105dania w wyniku jakiego\u015b dzia\u0142ania. Aby upro\u015bci\u0107 spraw\u0119, przygotowuj\u0119 wszystkie \u017c\u0105dania w DOM, wi\u0119c powiniene\u015b upewni\u0107 si\u0119, \u017ce kod \u017c\u0105dania jest zawini\u0119ty, np. w wyniku klikni\u0119cia przez odwiedzaj\u0105cego przycisku.<\/p>\n<h3>Korzystanie z jQuery<\/h3>\n<p>Je\u015bli masz i chcesz korzysta\u0107 z biblioteki jQuery, mo\u017cesz skorzysta\u0107 z jej <code>[$.ajax](https:\/\/api.jquery.com\/jquery.ajax\/)()<\/code>funkcji.<\/p>\n<p>Ale najpierw uwaga na temat zale\u017cno\u015bci twojego pliku JavaScript. Oczywi\u015bcie tw\u00f3j skrypt potrzebowa\u0142by <code>'jquery'<\/code>zale\u017cno\u015bci w kolejkowaniu go. Aby jednak \u0142atwo uzyska\u0107 dost\u0119p do g\u0142\u00f3wnego adresu URL REST WordPressa, dodaj kolejn\u0105 zale\u017cno\u015b\u0107; 'wp-api-\u017c\u0105danie&#8217;. Dzi\u0119ki temu zmienna JavaScript <code>wpApiSettings.root<\/code>jest dost\u0119pna i zawiera g\u0142\u00f3wny adres URL interfejsu API REST. Oto przyk\u0142ad, jak umie\u015bci\u0107 skrypt w kolejce, aby zilustrowa\u0107 t\u0119 zale\u017cno\u015b\u0107;<\/p>\n<pre><code>add_action( 'wp_enqueue_scripts', function() {\n    wp_enqueue_script(\n        'awp-javascript-wp-rest', \n        get_stylesheet_directory_uri(). '\/assets\/js\/javascript_wp_rest.js', \n        [ 'jquery', 'wp-api-request' ], \n        null, \n        true\n    );\n} );<\/code><\/pre>\n<p>Linia <code>#5<\/code>jest interesuj\u0105ca; gdzie definiujemy zar\u00f3wno jQuery, <code>wp-api-request<\/code>jak i zale\u017cno\u015b\u0107. Nast\u0119pnie w naszym pliku JavaScript mo\u017cemy wykona\u0107 \u017c\u0105danie WP REST API, takie jak:<\/p>\n<pre><code>( function( $) {\n    \/\/ Send request\n    $.ajax( {\n        url: wpApiSettings.root + 'awhitepixel\/v1\/getsomedata',\n        method: 'GET',\n        data: {\n            product_id: 14\n        },\n        success: function( data) {\n            console.log( data );\n        }\n    } );\n} )( jQuery );<\/code><\/pre>\n<p>To jest tak podstawowe, jak to tylko mo\u017cliwe. U\u017cywamy <code>$.ajax()<\/code>do wys\u0142ania \u017c\u0105dania GET na zdefiniowany adres URL. Jako adres URL u\u017cywamy <code>wpApiSettings.root<\/code>do uzyskania g\u0142\u00f3wnego adresu URL interfejsu API REST, a nast\u0119pnie do\u0142\u0105czamy po nim \u017c\u0105dany punkt ko\u0144cowy; w naszym przypadku niestandardowy punkt ko\u0144cowy, kt\u00f3ry stworzyli\u015bmy wcze\u015bniej. Opcjonalnie mo\u017cemy przekaza\u0107 parametry w 'data&#8217;. Powy\u017cszy przyk\u0142ad przekazuje <code>product_id<\/code>warto\u015b\u0107 14 do punktu ko\u0144cowego. W ko\u0144cu w <code>success<\/code>funkcji otrzymujemy (pomy\u015blne) \u017c\u0105danie jako parametr i mo\u017cemy zrobi\u0107 z nim, co chcemy. W powy\u017cszym przyk\u0142adzie po prostu wypisujemy go na konsoli.<\/p>\n<h3>Korzystanie z biblioteki WordPress (nie jQuery)<\/h3>\n<p>Je\u015bli Twoja witryna WordPress nie ma lub mo\u017ce korzysta\u0107 z biblioteki jQuery, mo\u017cesz u\u017cy\u0107 biblioteki JavaScript WordPress, aby \u0142atwo wykona\u0107 \u017c\u0105danie REST API. Ta funkcja jest <code>apiFetch<\/code>dost\u0119pna w globalnej <code>wp<\/code>przestrzeni nazw WordPressa. <code>wp.apiFetch()<\/code>to metoda opakowuj\u0105ca dla standardowej <code>fetch()<\/code>funkcji przegl\u0105darki (kt\u00f3ra jest pokazana dalej).<\/p>\n<p>Nasz Javascript b\u0119dzie potrzebowa\u0142 zale\u017cno\u015bci 'wp-api&#8217;, aby u\u017cy\u0107 wp.apiFetch(). Na przyk\u0142ad mo\u017cemy umie\u015bci\u0107 skrypt w kolejce w ten spos\u00f3b:<\/p>\n<pre><code>add_action( 'wp_enqueue_scripts', function() {\n    wp_enqueue_script(\n        'javascript-wp-rest', \n        get_stylesheet_directory_uri(). '\/assets\/js\/javascript_wp_rest.js', \n        [ 'wp-api' ], \n        null, \n        true\n    );\n} );<\/code><\/pre>\n<p>Krytyczn\u0105 zale\u017cno\u015b\u0107 znajdziesz w line <code>#5<\/code>. Dzi\u0119ki temu upewnili\u015bmy si\u0119, \u017ce nasz plik JavaScript jest <code>wp.apiFetch()<\/code>dost\u0119pny. Oto podstawowy przyk\u0142ad jego u\u017cycia:<\/p>\n<pre><code>function awpSendRequest() {\n    wp.apiFetch( {\n        path: 'awhitepixel\/v1\/getsomedata?product_id=14',\n    } ).then( data =&gt; {\n        console.log( data );\n    } );\n}\n\u00a0\nif (document.readyState != 'loading') {\n    awpSendRequest();\n} else {\n    document.addEventListener( 'DOMContentLoaded', awpSendRequest );\n}<\/code><\/pre>\n<p>Pami\u0119taj, \u017ce wiersze <code>#9-13<\/code>s\u0105 po prostu logiczne, aby uruchomi\u0107 funkcj\u0119, gdy DOM jest gotowy.<\/p>\n<p>Jedn\u0105 z zalet u\u017cywania <code>wp.apiFetch()<\/code>w stosunku do normalnego <code>fetch()<\/code>jest to, \u017ce mo\u017cemy u\u017cy\u0107 \u201e\u015bcie\u017cki&#8221;, kt\u00f3ra wymaga tylko punktu ko\u0144cowego, zamiast \u201eurl&#8221;, kt\u00f3ry wymaga pe\u0142nego adresu URL. Kolejn\u0105 korzy\u015bci\u0105 jest to, \u017ce pierwszy \u201e\u0142a\u0144cuch&#8221; <code>.then()<\/code>zwraca dane ju\u017c sformatowane w formacie JSON. Kiedy u\u017cywasz orygina\u0142u <code>.fetch()<\/code>, potrzebujesz wi\u0119cej \u0142a\u0144cuch\u00f3w \u201e.then()&#8221;. Sp\u00f3jrz na nast\u0119pny przyk\u0142ad (\u201eKorzystanie z waniliowego JavaScript&#8221;), aby zobaczy\u0107, co mam na my\u015bli.<\/p>\n<p>Nale\u017cy pami\u0119ta\u0107, \u017ce <code>fetch()<\/code>(i w konsekwencji <code>wp.apiFetch()<\/code>) <a href=\"https:\/\/github.com\/github\/fetch\/issues\/256\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">nie zapewnia \u201eczystego&#8221; sposobu przekazywania parametr\u00f3w<\/a>. B\u0119dziemy musieli r\u0119cznie skonstruowa\u0107 ci\u0105g zapytania GET w \u201e\u015bcie\u017cce&#8221;, tak jak zrobi\u0142em powy\u017cej: <code>'..\/getsomedata?product_id=14'<\/code>.<\/p>\n<p>Je\u015bli interesuje Ci\u0119, jak w\u0142\u0105czy\u0107 <code>wp.apiFetch<\/code>i niestandardowe punkty ko\u0144cowe w bloku Gutenberga, napisa\u0142em osobny samouczek na ten temat:<\/p>\n<h3>Korzystanie z waniliowego JavaScript<\/h3>\n<p>Ostatnim przyk\u0142adem metod Javascript do wysy\u0142ania \u017c\u0105da\u0144 do WP REST API jest czysto waniliowy, nie-WordPress spos\u00f3b, przy u\u017cyciu <code>fetch()<\/code>. Pami\u0119taj, \u017ce u\u017cywam zmiennej globalnej WordPress w celu uzyskania g\u0142\u00f3wnego adresu URL REST. Je\u015bli dodajesz ten skrypt poza WordPress, prawdopodobnie b\u0119dziesz musia\u0142 zakodowa\u0107 ca\u0142y adres URL.<\/p>\n<p>Poniewa\u017c nadal chc\u0119 mie\u0107 dost\u0119p do zmiennej globalnej dla g\u0142\u00f3wnego adresu URL WP REST, dodaj\u0119 <code>'wp-api-request'<\/code>zale\u017cno\u015b\u0107 do mojej funkcji kolejkowania JavaScript, na przyk\u0142ad:<\/p>\n<pre><code>add_action( 'wp_enqueue_scripts', function() {\n    wp_enqueue_script(\n        'awp-javascript-wp-rest', \n        get_stylesheet_directory_uri(). '\/assets\/js\/javascript_wp_rest.js', \n        [ 'wp-api-request' ], \n        null, \n        true\n    );\n} );<\/code><\/pre>\n<p>A potem w naszym pliku JavaScript najbardziej podstawowym przyk\u0142adem b\u0119dzie:<\/p>\n<pre><code>function awpSendRequest() {\n    fetch( wpApiSettings.root + 'awhitepixel\/v1\/getsomedata?product_id=14', {\n        method: 'GET',\n    }) .then( data =&gt; data.json()) .then( data =&gt; {\n        console.log( data );\n    } );\n}\n\u00a0\nif (document.readyState != 'loading') {\n    awpSendRequest();\n} else {\n    document.addEventListener( 'DOMContentLoaded', awpSendRequest );\n}<\/code><\/pre>\n<p>Jak wspomniano powy\u017cej (\u201eKorzystanie z biblioteki WordPress&#8221;) <code>.fetch()<\/code>nie obs\u0142uguje \u0142adnego, czystego sposobu podawania parametr\u00f3w. Musisz wi\u0119c r\u0119cznie utworzy\u0107 ci\u0105g zapytania (\u201e?product_id=14&#8243;) w adresie URL.<\/p>\n<p>Pami\u0119taj, \u017ce \u017c\u0105danie pobrania nie zwraca bezpo\u015brednio z danymi \u2013 zwraca obietnic\u0119. Dlatego musimy po\u0142\u0105czy\u0107 \u201e <code>.then()<\/code>&#8221; zanim b\u0119dziemy mogli obs\u0142u\u017cy\u0107 dane. Je\u015bli brzmi to dla Ciebie nieznajomo, polecam sprawdzi\u0107, jak pracowa\u0107 <code>fetch()<\/code>\u2013 w Google jest wiele wyja\u015bnie\u0144 i przyk\u0142ad\u00f3w, kt\u00f3re mog\u0105 to wyja\u015bni\u0107 lepiej ni\u017c ja.<\/p>\n<p>Je\u015bli chcesz sprawdzi\u0107 kod statusu odpowiedzi REST na swoje \u017c\u0105danie, mo\u017cesz to zrobi\u0107 w ten spos\u00f3b;<\/p>\n<pre><code>fetch( wpApiSettings.root + 'awhitepixel\/v1\/getsomedata?product_id=14', {\n    method: 'GET',\n}) .then( data =&gt; {\n    if (data.status != 200) {\n        console.log( data.status + ' Error: ' + data.statusText );\n        return;\n    }\n    data.json().then( data =&gt; {\n        console.log( data );\n    } );\n} );<\/code><\/pre>\n<p>W powy\u017cszym przyk\u0142adzie rejestracji niestandardowych punkt\u00f3w ko\u0144cowych wspomnia\u0142em, jak mo\u017cna zwr\u00f3ci\u0107 r\u00f3\u017cne kody statusu HTTP. Powy\u017cszy kod pokazuje przyk\u0142ad jak sprawdzi\u0107 kod statusu odpowiedzi, kt\u00f3ry jest dost\u0119pny we w\u0142a\u015bciwo\u015bci zwracanego obiektu <code>.status<\/code>. W powy\u017cszym przyk\u0142adzie sprawdzam, czy kod statusu jest inny ni\u017c 200 (Sukces) w linii <code>#5<\/code>. Tylko je\u015bli kod statusu to 200, konwertuj\u0119 zwrot danych obietnicy na JSON (linia <code>#9<\/code>).<\/p>\n<h3>Korzystanie z PHP<\/h3>\n<p>Rzadsze, ale nadal mo\u017cliwe jest wykonanie \u017c\u0105dania REST wewn\u0119trznie w WordPressie za pomoc\u0105 PHP. Oto jak.<\/p>\n<p>W celu wys\u0142ania \u017c\u0105dania WP REST API w PHP tworzymy <code>WP_REST_Request<\/code>obiekt (dok\u0142adnie taki, jaki zosta\u0142 przekazany do naszej funkcji zwrotnej wcze\u015bniej w tym po\u015bcie). W tej instancji obiektu definiujemy metod\u0119 (np. GET) oraz \u015bcie\u017ck\u0119 do punktu ko\u0144cowego. Opcjonalnie mo\u017cemy r\u00f3wnie\u017c doda\u0107 parametry. Nast\u0119pnie u\u017cywamy funkcji WordPressa <code>[rest_do_request](https:\/\/developer.wordpress.org\/reference\/functions\/rest_do_request\/)()<\/code>z t\u0105 instancj\u0105 \u017c\u0105dania. W ko\u0144cu otrzymujemy odpowied\u017a z <code>[response_to_data](https:\/\/developer.wordpress.org\/reference\/classes\/wp_rest_server\/response_to_data\/)()<\/code>funkcj\u0105 dost\u0119pn\u0105 w <code>WP_REST_Server'<\/code>klasie s.<\/p>\n<pre><code>function awp_do_php_rest_request( $product_id) {\n    $request = new WP_REST_Request( 'GET', '\/awhitepixel\/v1\/getsomedata' );\n    $request-&gt;set_query_params( [\n        'product_id' =&gt; $product_id\n    ] );\n    $response = rest_do_request( $request );\n    return rest_get_server()-&gt;response_to_data( $response, false );\n}<\/code><\/pre>\n<p>Wywo\u0142anie funkcji <code>set_query_params()<\/code>(line <code>#3-5<\/code>) jest opcjonalne i konieczne tylko wtedy, gdy chcesz przekaza\u0107 parametry. Pod\u0105\u017caj\u0105c za czerwonym w\u0105tkiem w tym po\u015bcie, do\u0142\u0105cz\u0119 przyk\u0142ad przekazywania parametru funkcji do klucza parametru REST <code>product_id<\/code>.<\/p>\n<p>Linia <code>#6<\/code>to miejsce, w kt\u00f3rym wysy\u0142amy zapytanie. W wierszu <code>#7<\/code>zwracamy dane odpowiedzi. Wi\u0119c gdyby\u015bmy mieli wywo\u0142a\u0107 t\u0119 funkcj\u0119 PHP, na przyk\u0142ad <code>awp_do_php_rest_request( 14 )<\/code>otrzymaliby\u015bmy odpowied\u017a, kt\u00f3r\u0105 zdefiniowali\u015bmy w tym punkcie ko\u0144cowym (tablica z \u0142a\u0144cuchem, je\u015bli nadal u\u017cywasz tego samego przyk\u0142adu, co na pocz\u0105tku tego postu).<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\u0179r\u00f3d\u0142o nagrywania:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/awhitepixel.com\" class=\"external external_icon\">awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Jak tworzy\u0107 niestandardowe punkty ko\u0144cowe WordPress REST i r\u00f3\u017cne metody wykonywania \u017c\u0105da\u0144 do nich. Przyk\u0142ady w PHP, jQuery i waniliowym JavaScript.<\/p>\n","protected":false},"author":1,"featured_media":151729,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[897,721,721,940,940,919,897,919,1110,845,845,866,866],"tags":[1169],"class_list":["post-233915","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-kod","category-deweloper","category-gutenberg-7","category-inny","category-n-a","category-samouczki","category-wordpress-7","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/233915","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/comments?post=233915"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/233915\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media\/151729"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media?parent=233915"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=233915"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=233915"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}