{"id":233941,"date":"2023-02-25T18:20:00","date_gmt":"2023-02-25T15:20:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233941"},"modified":"2022-11-11T13:18:49","modified_gmt":"2022-11-11T10:18:49","slug":"perusteellinen-opas-mukautettujen-wp-rest-api-paeaetepisteiden-luomiseen-ja-hakemiseen","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/perusteellinen-opas-mukautettujen-wp-rest-api-paeaetepisteiden-luomiseen-ja-hakemiseen\/","title":{"rendered":"Perusteellinen opas mukautettujen WP REST API -p\u00e4\u00e4tepisteiden luomiseen ja hakemiseen"},"content":{"rendered":"\n<p>T\u00e4m\u00e4 viesti n\u00e4ytt\u00e4\u00e4 kuinka luoda mukautettuja WordPress REST -p\u00e4\u00e4tepisteit\u00e4 ja erilaisia \u200b\u200b\u200b\u200bmenetelmi\u00e4 pyynt\u00f6jen suorittamiseksi niille. Esimerkkej\u00e4 l\u00f6ytyy sek\u00e4 PHP:st\u00e4, jQueryst\u00e4 ett\u00e4 vanilla Javascriptist\u00e4.<\/p>\n<p>Oletan, ett\u00e4 tunnet jo WP REST API:n, mutta t\u00e4ss\u00e4 on lyhyt yhteenveto. WordPress REST API on JSON-k\u00e4ytt\u00f6liittym\u00e4 tietojen l\u00e4hett\u00e4miseen ja vastaanottamiseen WordPress-sivustostasi. Voit k\u00e4ytt\u00e4\u00e4 p\u00e4\u00e4tepisteit\u00e4 (tiettyj\u00e4 polkuja\/URL-osoitteita) sek\u00e4 ulkoisesti ett\u00e4 sis\u00e4isesti. WordPressill\u00e4 on jo valmiiksi joukko p\u00e4\u00e4tepisteit\u00e4, kuten esimerkiksi viestien, luokkien hakemiseen, sivuston hakemiseen ja muuhun. Katso <a href=\"https:\/\/developer.wordpress.org\/rest-api\/reference\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">yleiskatsaus WordPressin oletusp\u00e4\u00e4tepisteist\u00e4<\/a> t\u00e4\u00e4lt\u00e4. Mutta kehitt\u00e4j\u00e4t voivat t\u00e4ysin vapaasti luoda omia mukautettuja p\u00e4\u00e4tepisteit\u00e4\u00e4n t\u00e4m\u00e4n API:n avulla joko toimintojen suorittamista tai tietojen hakemista varten.<\/p>\n<p>Aloitamme ensimm\u00e4isest\u00e4 vaiheesta; joka luo mukautettuja p\u00e4\u00e4tepisteit\u00e4. Jos olet kiinnostunut vain pyynt\u00f6jen tekemisest\u00e4, siirry eteenp\u00e4in toiseen osaan.<\/p>\n<h2>Luo mukautettuja p\u00e4\u00e4tepisteit\u00e4<\/h2>\n<p>Mukautettujen p\u00e4\u00e4tepisteiden rekister\u00f6inti tapahtuu PHP:ss\u00e4. Voit lis\u00e4t\u00e4 koodin teemasi <code>functions.php<\/code>tai aktiivisen laajennuksen kooditiedostoon. Tee funktio kiinni <code>rest_api_init<\/code>ja k\u00e4yt\u00e4 sit\u00e4 <code>[register_rest_route](https:\/\/developer.wordpress.org\/reference\/functions\/register_rest_route\/)()<\/code>jokaisessa lis\u00e4tt\u00e4v\u00e4ss\u00e4 p\u00e4\u00e4tepisteess\u00e4.<\/p>\n<p>Ensimm\u00e4isen\u00e4 parametrina <code>register_rest_route()<\/code>sinun on annettava yksil\u00f6llinen nimiavaruus varmistaaksesi, ett\u00e4 p\u00e4\u00e4tepisteesi eiv\u00e4t ole ristiriidassa muiden kanssa. K\u00e4yt\u00e4 teemasi tai laajennuksen slug. On yleinen k\u00e4yt\u00e4nt\u00f6 lis\u00e4t\u00e4 <code>\/<\/code>koodiin sen j\u00e4lkeen versionumero. Esimerkkin\u00e4 k\u00e4yt\u00e4n nimiavaruutta <code>awhitepixel\/v1<\/code>. Toinen parametri on polku (joka seuraa nimiavaruutta). Lopuksi voit valinnaisesti tarjota taulukon kolmantena parametrina vaihtoehtoineen. T\u00e4ss\u00e4 taulukossa voit esimerkiksi m\u00e4\u00e4ritt\u00e4\u00e4 pyynt\u00f6menetelm\u00e4n (GET, POST tai mik\u00e4 tahansa muu), m\u00e4\u00e4ritt\u00e4\u00e4 parametreja ja mik\u00e4 t\u00e4rkeint\u00e4, m\u00e4\u00e4ritt\u00e4\u00e4 funktion, joka suoritetaan, kun kyseist\u00e4 p\u00e4\u00e4tepistett\u00e4 pyydet\u00e4\u00e4n.<\/p>\n<p>V\u00e4hint\u00e4\u00e4n argumentit &#8217;method&#8217; ja &#8217;callback&#8217; (joka on p\u00e4\u00e4tepistetietojen k\u00e4sittelytoiminto) tulee antaa kolmantena parametrina. &#8217;Method&#8217;-kohdassa voit asettaa ne &#8217; <code>GET'<\/code>, <code>'POST'<\/code>, <code>'PUT'<\/code>, tai mink\u00e4 tahansa muun kelvollisen pyynt\u00f6menetelm\u00e4n (tai usean joukon), mutta suosittelen k\u00e4ytt\u00e4m\u00e4\u00e4n WordPressin oletusasetuksia t\u00e4h\u00e4n. Ne ovat seuraavat:<\/p>\n<ul>\n<li><code>WP_REST_Server::READABLE<\/code> menetelm\u00e4 &#8217; <code>GET<\/code>&#8217;<\/li>\n<li><code>WP_REST_Server::EDITABLE<\/code> menetelm\u00e4t &#8217; <code>POST<\/code>&#8217;, &#8217; <code>PUT<\/code>&#8217; ja &#8217; <code>PATCH<\/code>&#8217;<\/li>\n<li><code>WP_REST_Server::DELETABLE<\/code> menetelm\u00e4 &#8217; <code>DELETE<\/code>&#8217;<\/li>\n<li><code>WP_REST_Server::ALLMETHODS<\/code> kaikki edell\u00e4 mainitut menetelm\u00e4t<\/li>\n<\/ul>\n<p>Luodaan mukautettu perusp\u00e4\u00e4tepiste, joka voidaan saavuttaa GET-pyynt\u00f6jen avulla:<\/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>Rivill\u00e4 <code>#2<\/code>olemme m\u00e4\u00e4ritt\u00e4neet mukautetun p\u00e4\u00e4tepisteemme muodossa &quot; <code>awhitepixel\/v1\/getsomedata<\/code>&quot;. T\u00e4ysi URL-osoite olisi WordPressin REST API -juuri-URL-osoite etuliitteen\u00e4, joka on <code>&lt;yourdomain&gt;\/wp-json<\/code>. Joten koko URL-osoite yll\u00e4 olevaan p\u00e4\u00e4tepisteeseen olisi &quot; <code>&lt;yourdomain&gt;\/wp-json\/awhitepixel\/v1\/getsomedata<\/code>&quot;. Rivill\u00e4 <code>#4<\/code>olemme antaneet takaisinsoittona funktion nimen, jonka lis\u00e4\u00e4mme pian.<\/p>\n<p>Kun rekister\u00f6it (tai muutat) REST API -reittej\u00e4 k\u00e4ytt\u00e4m\u00e4ll\u00e4 <code>register_rest_route()<\/code>, sinun on <strong>huuhdeltava<\/strong> pysyv\u00e4t linkit \u00a0, jotta se toimisi. Voit tehd\u00e4 t\u00e4m\u00e4n siirtym\u00e4ll\u00e4 kohtaan Asetukset &gt; Pysyv\u00e4t linkit j\u00e4rjestelm\u00e4nvalvojassa ja napsauttamalla Tallenna.<\/p>\n<p>Emme ole viel\u00e4 m\u00e4\u00e4ritt\u00e4neet takaisinkutsun funktiota \u2013 joka on funktio koodille, joka k\u00e4sittelee t\u00e4m\u00e4n p\u00e4\u00e4tepisteen k\u00e4yt\u00f6n reaktion. Sen on palautettava kelvollinen REST-vastaus (JSONissa), joten sinun on palautettava jotain, vaikka p\u00e4\u00e4tepisteen ei pit\u00e4isi palauttaa tietoja. Voit k\u00e4ytt\u00e4\u00e4 <code>[rest_ensure_response](https:\/\/developer.wordpress.org\/reference\/functions\/rest_ensure_response\/)()<\/code>funktiofunktiota tai luoda <code>WP_REST_Response<\/code>objektin esiintym\u00e4n takaisinkutsun palautuksena. Takaisinsoittofunktion parametriksi saamme <code>WP_REST_Request<\/code>objektin, joka sis\u00e4lt\u00e4\u00e4 kaikki tiedot pyynn\u00f6st\u00e4 \u2013 mukaan lukien kaikki parametrit. Luodaan yksinkertainen takaisinsoittotoiminto, joka l\u00e4hett\u00e4\u00e4 vastauksena teksti\u00e4:<\/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>T\u00e4m\u00e4 on yksinkertaisin tapa kirjoittaa takaisinsoitto. Toiminto <code>rest_ensure_response()<\/code>varmistaa, ett\u00e4 kaikki antamamme tiedot (merkkijono) muunnetaan kelvollisiksi REST-vastauksiksi. Ilmeisesti haluat lis\u00e4t\u00e4 koodia t\u00e4nne joko tehd\u00e4ksesi jotain WordPressiss\u00e4 tai hakeaksesi ja l\u00e4hett\u00e4\u00e4ksesi takaisin tietoja.<\/p>\n<p>Yll\u00e4 olevalla koodilla (p\u00e4\u00e4tepisteen ja takaisinsoittotoiminnon rekister\u00f6inti) voit yritt\u00e4\u00e4 menn\u00e4 selaimesi URL-osoitteeseen ja katsoa, \u200b\u200bmit\u00e4 saat. (Muista huuhdella pysyv\u00e4t linkit). Kun siirryt <code>&lt;domain&gt;\/wp-json\/awhitepixel\/v1\/getsomedata<\/code>selaimessa kohtaan &quot;Hei!&quot; -merkkijono.<\/p>\n<h3>Parametrien hyv\u00e4ksyminen<\/h3>\n<p>On hyvin yleist\u00e4 ja hy\u00f6dyllist\u00e4 sallia p\u00e4\u00e4tepisteiden hyv\u00e4ksy\u00e4 parametreja. Jos sivustollasi on esimerkiksi tuotetietoja, haluat p\u00e4\u00e4tepisteen, jossa voit antaa tuotetunnuksen saadaksesi kyseisen tuotteen tiedot. On kaksi tapaa edet\u00e4 asiassa. Yleisin tapa on k\u00e4ytt\u00e4\u00e4 GET-kyselymerkkijonoa (jotka liitet\u00e4\u00e4n URL-osoitteen per\u00e4\u00e4n :n <code>?<\/code>j\u00e4lkeen erotettuina <code>&amp;<\/code>avain=arvo-muodossa. Esimerkiksi &#8217; <code>&lt;endpoint&gt;\/product\/?product_id=14<\/code>&#8217;). Vaihtoehtoisesti voit m\u00e4\u00e4ritt\u00e4\u00e4 &quot;kaunimman&quot; URL-mallin, jossa parametrit ovat osa polkua. Esimerkiksi &#8217; <code>&lt;endpoint&gt;\/product\/14\/<\/code>&#8217;. T\u00e4m\u00e4 viimeinen menetelm\u00e4 vaatii kuitenkin jonkin verran tietoa regexesist\u00e4. Kumpi menetelm\u00e4 valitsee, on sinun p\u00e4\u00e4tett\u00e4viss\u00e4si, esit\u00e4n molemmat alla.<\/p>\n<h4>GET-parametrit<\/h4>\n<p>Mahdollisten GET-parametrien m\u00e4\u00e4ritt\u00e4minen p\u00e4\u00e4tepisteeseen tapahtuu kolmannen parametrin <code>args<\/code>n\u00e4pp\u00e4imen avulla. <code>register_rest_route()<\/code>M\u00e4\u00e4rit\u00e4 kullekin sallittavalle parametrille avainarvo (edell\u00e4 olevassa esimerkiss\u00e4 &#8217; <code>product_id<\/code>&#8217;) ja joukko vaihtoehtoja t\u00e4lle parametrille. Vaihtoehtoina voit m\u00e4\u00e4ritt\u00e4\u00e4 parametrin muodon (jos se odottaa esimerkiksi numeroa tai merkkijonoa) ja my\u00f6s p\u00e4\u00e4tt\u00e4\u00e4, tarvitaanko parametria vai ei.<\/p>\n<p>Esimerkkin\u00e4 haluamme antaa p\u00e4\u00e4tepisteemme hyv\u00e4ksy\u00e4 &#8217; <code>product_id<\/code>&#8217; ei-pakollisena numerona.<\/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>Jos m\u00e4\u00e4rit\u00e4t parametrin tosi <code>required<\/code>arvoksi, WordPress k\u00e4sittelee 400 virhevastauksen palauttamisen. Samoin jos annat v\u00e4\u00e4r\u00e4n muodon, esimerkiksi &quot;hello&quot; arvona parametrille, joka odottaa numeroa.<\/p>\n<p>Takaisinsoittotoiminnon rivill\u00e4 <code>#15<\/code>n\u00e4et kuinka saada parametriarvo pyynn\u00f6st\u00e4; k\u00e4ytt\u00e4m\u00e4ll\u00e4 menetelm\u00e4\u00e4 <code>get_param()<\/code>ohitetussa <code>WP_REST_Request<\/code>objektissa. Esimerkkin\u00e4 n\u00e4yt\u00e4n erilaisia \u200b\u200b\u200b\u200bvastauksia sen mukaan, <code>product_id<\/code>annettiinko niit\u00e4 vai ei (muista, ett\u00e4 olemme m\u00e4\u00e4ritelleet sen valinnaiseksi). Koodisi muokkaamisen logiikka annettujen parametrien mukaan on t\u00e4ysin sinun ja projektisi p\u00e4\u00e4tett\u00e4viss\u00e4. Sinulla voi olla v\u00e4hemm\u00e4n p\u00e4\u00e4tepisteit\u00e4, jotka hyv\u00e4ksyv\u00e4t paljon parametreja, tai useampia erillisi\u00e4 p\u00e4\u00e4tepisteit\u00e4 jokaisessa erityistapauksessa.<\/p>\n<p>Yll\u00e4 olevalla koodilla saan &quot;Hei siell\u00e4!&quot; k\u00e4ydess\u00e4ni <code>&lt;yourdomain&gt;\/awhitepixel\/v1\/getsomedata<\/code>ja &quot;Palauta tuotetiedot tunnukselle 14&quot;, kun menen osoitteeseen <code>&lt;yourdomain&gt;\/awhitepixel\/v1\/getsomedata\/?product_id=14<\/code>.<\/p>\n<h4>Parametrit osana polkua<\/h4>\n<p>Jos haluat sallia parametrien olevan osa polkua GET-kyselymerkkijonon sijaan, voit tehd\u00e4 niin. T\u00e4m\u00e4n j\u00e4lkeen annat s\u00e4\u00e4nn\u00f6llisen lausekkeen mallin polulle \u2013 toinen parametri <code>register_rest_route()<\/code>.<\/p>\n<p>Regex-kuvioiden luominen voi n\u00e4ytt\u00e4\u00e4 melko salaiselta, mutta koska kyseess\u00e4 on kokonainen aihe, l\u00f6yd\u00e4t helposti esimerkkej\u00e4 tiettyihin tapauksiin googlettamalla. N\u00e4yt\u00e4n esimerkin sellaisen s\u00e4\u00e4nn\u00f6llisen lausekkeen m\u00e4\u00e4ritt\u00e4misest\u00e4, joka hyv\u00e4ksyy mink\u00e4 tahansa pituisen luvun;<\/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>Kuten n\u00e4et rivilt\u00e4 2, olen lis\u00e4nnyt regex-kuvion <code>(?P&lt;product_id&gt;[d]+)<\/code>loppuun. T\u00e4m\u00e4 kuvio tarkoittaa, ett\u00e4 meid\u00e4n on ker\u00e4tt\u00e4v\u00e4 <code>d<\/code>mink\u00e4 tahansa pituinen luku (<code>+<\/code>) ja m\u00e4\u00e4ritett\u00e4v\u00e4 ker\u00e4tty arvo parametriavaimeen <code>product_id<\/code>. Ja takaisinsoittotoiminnossamme k\u00e4yt\u00e4mme t\u00e4sm\u00e4lleen samaa menetelm\u00e4\u00e4 kuin GET-parametreja m\u00e4\u00e4ritett\u00e4ess\u00e4; <code>get_param()<\/code>toiminnolle tarjotussa <code>WP_REST_Request<\/code>objektissa.<\/p>\n<p>Yll\u00e4 olevalla koodilla (pysyvien linkkien huuhtelun j\u00e4lkeen) voimme k\u00e4yd\u00e4 URL-osoitteessa <code>&lt;yourdomain&gt;\/wp-json\/awhitepixel\/v1\/getsomedata\/14<\/code>saadaksemme vastauksemme. T\u00e4m\u00e4 menetelm\u00e4 johtaa varmasti &quot;kaunimpiin&quot; URL-osoitteisiin, mutta koodista voi helposti tulla vaikeampaa lukea ja korjata virheit\u00e4. Kumman menetelm\u00e4n valitset, on sinun p\u00e4\u00e4tett\u00e4viss\u00e4si.<\/p>\n<h3>Oikean vastauksen palauttaminen<\/h3>\n<p>Aiemmin mainitsin lyhyesti, kuinka takaisinsoittotoiminnon on palautettava oikea REST-vastaus. Toistaiseksi olemme k\u00e4ytt\u00e4neet yksinkertaisempaa <code>rest_ensure_response()<\/code>. Mutta joskus saatat haluta hallita p\u00e4\u00e4tepisteesi palautusta paremmin. Voit esimerkiksi hallita <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Status\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">HTTP-vastauksen tilakoodia<\/a>. Oletetaan, ett\u00e4 luot p\u00e4\u00e4tepisteen, jossa voit antaa tuotetunnuksen ja saada tietoja kyseisest\u00e4 tuotteesta. Mutta jos kyseist\u00e4 tuotetunnusta ei ole olemassa tai muut parametrit aiheuttavat sekaannusta, saatat haluta palauttaa tilakoodin, esimerkiksi 400 (Virheellinen pyynt\u00f6) tai 404 (Ei l\u00f6ytynyt). Tai ehk\u00e4 500 (palvelinvirhe). Aina 200 (Onnistuminen), vaikka pyynt\u00f6 oli huono, voi aiheuttaa ongelmia l\u00e4hett\u00e4j\u00e4lle.<\/p>\n<p>Suosittelen sitten takaisinsoittotoimintoa palauttamaan <code>WP_REST_Response<\/code>objektin. T\u00e4m\u00e4n objektin avulla voit hallita useita asioita, mukaan lukien tilakoodia. Se on helpompaa kuin luulet! Yksinkertaisimmassa muodossa luot uuden ilmentym\u00e4n <code>WP_REST_Response<\/code>, tarjoat joukon tietoja, jotka palautetaan ensimm\u00e4isen\u00e4 parametrina, ja tilakoodin toiseksi parametriksi. Esimerkiksi:<\/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>Yll\u00e4 olevassa esimerkiss\u00e4 tallennetaan <code>awhitepixel_get_product()<\/code>funktion palautus muuttujaan. T\u00e4t\u00e4 funktiota ei ole olemassa, ja sinun tulee korvata se funktiolla, jonka pit\u00e4isi noutaa (tai tehd\u00e4) haluamasi toiminnot projektissasi. Mutta sanotaan, ett\u00e4 funktio palauttaa tyhj\u00e4n taulukon ja se tarkoittaa, ett\u00e4 jotain meni pieleen (esimerkiksi tuotetta ei ollut olemassa). Voisimme sitten palauttaa <code>WP_REST_Response<\/code>objektin tilakoodilla 400 ja valinnaisesti viestin, joka selitt\u00e4\u00e4, miksi se ep\u00e4onnistui (rivi <code>#5-9<\/code>). Muussa tapauksessa palautamme tiedot tilakoodilla 200 Success (rivi <code>#10<\/code>).<\/p>\n<h2>Pyynt\u00f6jen l\u00e4hett\u00e4minen (mukautettuihin) p\u00e4\u00e4tepisteisiin<\/h2>\n<p>Siirryt\u00e4\u00e4n toiselle puolelle, l\u00e4hetysosaan: Kuinka l\u00e4hett\u00e4\u00e4 pyynt\u00f6j\u00e4 mukautetuille p\u00e4\u00e4tepisteillemme. Normaalisti l\u00e4het\u00e4t WP REST API -pyynn\u00f6t Javascriptin avulla, ja t\u00e4\u00e4lt\u00e4 l\u00f6yd\u00e4t esimerkkej\u00e4 jQueryn, WordPress-kirjaston ja vanilja Javascriptin k\u00e4yt\u00f6st\u00e4. On harvinaista, mutta mahdollista suorittaa REST-pyynt\u00f6 my\u00f6s PHP:ll\u00e4 \u2013 joten olen sis\u00e4llytt\u00e4nyt siihen my\u00f6s esimerkin.<\/p>\n<p>Ensimm\u00e4inen asia, joka on huomioitava, on se, ett\u00e4 sinun on luonnollisesti tiedett\u00e4v\u00e4 koko URL-osoite, jotta voit l\u00e4hett\u00e4\u00e4 pyynn\u00f6n. En suosittele verkkotunnuksen kovakoodausta (ennen p\u00e4\u00e4tepistett\u00e4), koska on olemassa useita tapoja saada t\u00e4m\u00e4, jos Javascript toimii WordPressiss\u00e4. WordPressin vanhemmissa versioissa sinun on k\u00e4ytett\u00e4v\u00e4 <code>[wp_localize_script](https:\/\/developer.wordpress.org\/reference\/functions\/wp_localize_script\/)()<\/code>PHP:t\u00e4 ja v\u00e4litett\u00e4v\u00e4 ydin REST URL globaalina Javascript-muuttujana. Mutta alla olevat esimerkit osoittavat uudemman ja paremman tavan saada WordPress-sivuston REST-juuri-URL-osoite.<\/p>\n<p>Toinen huomioitava asia on se, ett\u00e4 projektisi pyynn\u00f6t luultavasti k\u00e4\u00e4riisit jonkin toiminnan seurauksena. Jotta asiat olisivat yksinkertaisia, teen kaikki pyynn\u00f6t DOM:ssa valmiiksi, joten sinun tulee muistaa k\u00e4\u00e4ri\u00e4 pyynt\u00f6koodi esimerkiksi vierailijan napsautuksen seurauksena.<\/p>\n<h3>jQueryn k\u00e4ytt\u00f6<\/h3>\n<p>Jos sinulla on ja haluat k\u00e4ytt\u00e4\u00e4 jQuery-kirjastoa, voit k\u00e4ytt\u00e4\u00e4 sen <code>[$.ajax](https:\/\/api.jquery.com\/jquery.ajax\/)()<\/code>toimintoa.<\/p>\n<p>Mutta ensin huomautus Javascript-tiedostosi riippuvuuksista. Ilmeisesti komentosarjasi tarvitsisi <code>'jquery'<\/code>riippuvuutta sen jonossa. Mutta jotta p\u00e4\u00e4set helposti WordPressin REST-juuri-URL-osoitteeseen, lis\u00e4\u00e4 toinen riippuvuus; &#8217;wp-api-request&#8217;. T\u00e4m\u00e4 varmistaa, ett\u00e4 Javascript-muuttuja <code>wpApiSettings.root<\/code>on saatavilla ja sis\u00e4lt\u00e4\u00e4 REST API -juuriosoitteen. T\u00e4ss\u00e4 on esimerkki siit\u00e4, kuinka voit asettaa komentosarjasi jonoon havainnollistamaan t\u00e4t\u00e4 riippuvuutta;<\/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>Linja <code>#5<\/code>on mielenkiintoinen; jossa m\u00e4\u00e4rit\u00e4mme sek\u00e4 jQueryn <code>wp-api-request<\/code>ett\u00e4 riippuvuutena. Sitten Javascript-tiedostossamme voimme suorittaa WP REST API -pyynn\u00f6n seuraavasti:<\/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>T\u00e4m\u00e4 on niin perustavaa kuin se voi olla. K\u00e4yt\u00e4mme <code>$.ajax()<\/code>GET-pyynn\u00f6n l\u00e4hett\u00e4mist\u00e4 m\u00e4\u00e4ritettyyn URL-osoitteeseen. URL-osoitteena k\u00e4yt\u00e4mme <code>wpApiSettings.root<\/code>REST API -juuri-URL-osoitteen saamiseen ja liit\u00e4mme sen j\u00e4lkeen halutun p\u00e4\u00e4tepisteen; meid\u00e4n tapauksessamme aiemmin luomamme mukautettu p\u00e4\u00e4tepiste. Vaihtoehtoisesti voimme v\u00e4litt\u00e4\u00e4 parametreja &quot;datassa&quot;. Yll\u00e4 oleva esimerkki siirtyy <code>product_id<\/code>arvolla 14 p\u00e4\u00e4tepisteeseen. Lopuksi <code>success<\/code>funktiossa saamme (onnistunut) pyynn\u00f6n parametrina ja voimme vapaasti tehd\u00e4 sen kanssa mit\u00e4 haluamme. Yll\u00e4 olevassa esimerkiss\u00e4 yksinkertaisesti tulostamme sen konsoliin.<\/p>\n<h3>WordPress-kirjaston k\u00e4ytt\u00e4minen (ei jQuery)<\/h3>\n<p>Jos WordPress-sivustollasi ei ole tai voi k\u00e4ytt\u00e4\u00e4 jQuery-kirjastoa, voit k\u00e4ytt\u00e4\u00e4 WordPressin Javascript-kirjastoa REST API -pyynn\u00f6n suorittamiseen helposti. Toiminto <code>apiFetch<\/code>on saatavilla WordPressin globaalissa <code>wp<\/code>nimiavaruudessa. <code>wp.apiFetch()<\/code>on k\u00e4\u00e4remenetelm\u00e4 selaimen vakiotoiminnolle <code>fetch()<\/code>(joka esitell\u00e4\u00e4n seuraavassa).<\/p>\n<p>Javascriptimme tarvitsee riippuvuuden &#8217;wp-api&#8217; voidakseen k\u00e4ytt\u00e4\u00e4 wp.apiFetch(:t\u00e4). Voisimme esimerkiksi laittaa skriptin jonoon n\u00e4in:<\/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>L\u00f6yd\u00e4t kriittisen riippuvuuden rivilt\u00e4 <code>#5<\/code>. T\u00e4ll\u00e4 olemme varmistaneet, ett\u00e4 Javascript-tiedostomme on <code>wp.apiFetch()<\/code>saatavilla. T\u00e4ss\u00e4 on perusesimerkki sen k\u00e4yt\u00f6st\u00e4:<\/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>Muista, ett\u00e4 rivit <code>#9-13<\/code>ovat vain logiikkaa funktion suorittamiseksi sen j\u00e4lkeen, kun DOM on valmis.<\/p>\n<p>Yksi k\u00e4yt\u00f6n etu <code>wp.apiFetch()<\/code>normaaliin verrattuna <code>fetch()<\/code>on, ett\u00e4 voimme k\u00e4ytt\u00e4\u00e4 &quot;polkua&quot;, joka vaatii vain p\u00e4\u00e4tepisteen, eik\u00e4 &quot;url&quot;-osoitetta, joka vaatii t\u00e4ydellisen URL-osoitteen. Toinen etu on, ett\u00e4 ensimm\u00e4inen &quot;ketju&quot; <code>.then()<\/code>palauttaa tiedot jo JSON-muotoiltuna. Kun k\u00e4yt\u00e4t alkuper\u00e4ist\u00e4 <code>.fetch()<\/code>, tarvitset lis\u00e4\u00e4 &quot;.then()-ketjuja&quot;. Katso seuraava esimerkki (&quot;Vanilla Javascriptin k\u00e4ytt\u00e4minen&quot;) n\u00e4hd\u00e4ksesi mit\u00e4 tarkoitan.<\/p>\n<p>Muista, ett\u00e4 <code>fetch()<\/code>(ja sen seurauksena <code>wp.apiFetch()<\/code>) ei <a href=\"https:\/\/github.com\/github\/fetch\/issues\/256\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">tarjoa &quot;puhdasta&quot; tapaa siirt\u00e4\u00e4 parametreja<\/a>. Meid\u00e4n on muodostettava manuaalisesti GET-kyselymerkkijono &#8217;polussa&#8217;, kuten olen tehnyt edell\u00e4: <code>'..\/getsomedata?product_id=14'<\/code>.<\/p>\n<p>Jos olet kiinnostunut sis\u00e4llytt\u00e4m\u00e4\u00e4n <code>wp.apiFetch<\/code>ja mukautettuja p\u00e4\u00e4tepisteit\u00e4 Gutenberg-lohkoon, olen kirjoittanut t\u00e4st\u00e4 erillisen opetusohjelman:<\/p>\n<h3>Vanilja Javascriptin k\u00e4ytt\u00f6<\/h3>\n<p>Viimeisen\u00e4 esimerkkin\u00e4 Javascript-menetelmist\u00e4 pyynn\u00f6n l\u00e4hett\u00e4miseksi WP REST API:lle on puhdas vaniljainen, ei-WordPress-tapa k\u00e4ytt\u00e4m\u00e4ll\u00e4 <code>fetch()<\/code>. Huomaa, ett\u00e4 k\u00e4yt\u00e4n WordPressin globaalia muuttujaa saadakseni REST-juuriosoitteen. Jos lis\u00e4\u00e4t t\u00e4m\u00e4n skriptin WordPressin ulkopuolelle, sinun on luultavasti koodattava koko URL-osoite.<\/p>\n<p><code>'wp-api-request'<\/code>Koska haluan edelleen p\u00e4\u00e4syn WP REST -juuri- URL-osoitteen yleiseen muuttujaan, lis\u00e4\u00e4n riippuvuuden Javascript-jonotoimintooni seuraavasti:<\/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>Ja sitten Javascript-tiedostossamme yksinkertaisin esimerkki olisi:<\/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>Kuten edell\u00e4 mainittiin (&quot;WordPress-kirjaston k\u00e4ytt\u00e4minen&quot;) <code>.fetch()<\/code>ei tue mukavaa, puhdasta tapaa tarjota parametreja. Joten sinun on rakennettava URL-osoitteeseen manuaalisesti kyselymerkkijono (?product_id=14).<\/p>\n<p>Muista, ett\u00e4 hakupyynt\u00f6 ei palauta suoraan tietojen mukana \u2013 se palauttaa lupauksen. Siksi meid\u00e4n on ketjutettava &quot; <code>.then()<\/code>&quot; ennen kuin voimme k\u00e4sitell\u00e4 tietoja. Jos t\u00e4m\u00e4 kuulostaa sinulle tuntemattomalta, suosittelen etsim\u00e4\u00e4n ty\u00f6skentelytapaa <code>fetch()<\/code>\u2013 googlesta l\u00f6ytyy paljon selityksi\u00e4 ja esimerkkej\u00e4, jotka voivat selitt\u00e4\u00e4 asian paremmin kuin min\u00e4.<\/p>\n<p>Jos haluat tarkistaa REST-vastauksen tilakoodin pyynt\u00f6\u00f6si, voit tehd\u00e4 sen n\u00e4in;<\/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>Mainitsin yll\u00e4 olevassa esimerkiss\u00e4 mukautettujen p\u00e4\u00e4tepisteiden rekister\u00f6innin yhteydess\u00e4, kuinka voit palauttaa erilaisia \u200b\u200bHTTP-tilakoodeja. Yll\u00e4 oleva koodi n\u00e4ytt\u00e4\u00e4 esimerkin vastauksen tilakoodin tarkistamisesta, joka on saatavilla palautetun objektin <code>.status<\/code>ominaisuudessa. Yll\u00e4 olevassa esimerkiss\u00e4 tarkistan, onko tilakoodi jotain muuta kuin 200 (Onnistuminen) rivill\u00e4 <code>#5<\/code>. Vain jos tilakoodi oli 200, muunnan lupauksen datapalautuksen JSONiksi (rivi <code>#9<\/code>).<\/p>\n<h3>PHP:n k\u00e4ytt\u00f6<\/h3>\n<p>On harvinaisempaa, mutta silti mahdollista suorittaa REST-pyynt\u00f6 sis\u00e4isesti WordPressiss\u00e4 PHP:n avulla. Toimi n\u00e4in.<\/p>\n<p>WP REST API -pyynn\u00f6n l\u00e4hett\u00e4miseksi PHP:ss\u00e4 luomme <code>WP_REST_Request<\/code>objektin (t\u00e4sm\u00e4lleen kuten se, joka v\u00e4litet\u00e4\u00e4n takaisinsoittotoimintollemme aiemmin t\u00e4ss\u00e4 viestiss\u00e4). T\u00e4ss\u00e4 objektiinstanssissa m\u00e4\u00e4rittelemme menetelm\u00e4n (esim. GET) ja p\u00e4\u00e4tepisteen polun. Vaihtoehtoisesti voimme my\u00f6s lis\u00e4t\u00e4 parametreja. Sitten k\u00e4yt\u00e4mme WordPress-toimintoa <code>[rest_do_request](https:\/\/developer.wordpress.org\/reference\/functions\/rest_do_request\/)()<\/code>t\u00e4m\u00e4n pyynt\u00f6esiintym\u00e4n kanssa. Lopulta saamme vastauksen s-luokassa <code>[response_to_data](https:\/\/developer.wordpress.org\/reference\/classes\/wp_rest_server\/response_to_data\/)()<\/code>k\u00e4ytett\u00e4viss\u00e4 olevalla funktiolla .<code>WP_REST_Server'<\/code><\/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>Funktiokutsu <code>set_query_params()<\/code>(linja <code>#3-5<\/code>) on valinnainen ja tarpeen vain, jos haluat v\u00e4litt\u00e4\u00e4 parametreja. T\u00e4m\u00e4n viestin punaisen s\u00e4ikeen j\u00e4lkeen sis\u00e4llyt\u00e4n esimerkin funktion parametrin v\u00e4litt\u00e4misest\u00e4 REST-parametriavaimeen <code>product_id<\/code>.<\/p>\n<p><code>#6<\/code>L\u00e4het\u00e4mme pyynn\u00f6n riville. Ja rivill\u00e4 <code>#7<\/code>palautamme vastauksen tiedot. Joten jos kutsuisimme esimerkiksi t\u00e4t\u00e4 PHP-funktiota, <code>awp_do_php_rest_request( 14 )<\/code>saisimme sitten vastauksen, jonka m\u00e4\u00e4ritimme kyseisess\u00e4 p\u00e4\u00e4tepisteess\u00e4 (jono, jos k\u00e4yt\u00e4t edelleen samaa esimerkki\u00e4 kuin t\u00e4m\u00e4n viestin alussa).<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/awhitepixel.com\" class=\"external external_icon\">awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Kuinka luoda mukautettuja WordPress REST -p\u00e4\u00e4tepisteit\u00e4 ja erilaisia \u200b\u200b\u200b\u200bmenetelmi\u00e4 pyynt\u00f6jen suorittamiseksi niille. Esimerkkej\u00e4 PHP:st\u00e4, jQueryst\u00e4 ja vanilla Javascriptist\u00e4.<\/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":[588,516,613,938,719,895,913,917,1110,843,509,515,864],"tags":[1166],"class_list":["post-233941","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code","category-software-entwicklung","category-gutenberg","category-gutenberg-5","category-kehittaejae","category-koodi","category-sonstig","category-muut","category-n-a","category-opetusohjelmia","category-tutorials","category-wordpress","category-wordpress-5","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233941","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/comments?post=233941"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233941\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/151729"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=233941"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=233941"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=233941"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}