{"id":233993,"date":"2023-02-26T18:12:00","date_gmt":"2023-02-26T15:12:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233993"},"modified":"2022-11-11T13:40:03","modified_gmt":"2022-11-11T10:40:03","slug":"luo-ja-hae-mukautettuja-rest-paeaetepisteitae-gutenberg-lohkoissa","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/luo-ja-hae-mukautettuja-rest-paeaetepisteitae-gutenberg-lohkoissa\/","title":{"rendered":"Luo ja hae mukautettuja REST-p\u00e4\u00e4tepisteit\u00e4 Gutenberg-lohkoissa"},"content":{"rendered":"\n<p>T\u00e4ss\u00e4 viestiss\u00e4 yrit\u00e4n luoda yleiskatsauksen mukautettujen REST API -p\u00e4\u00e4tepisteiden luomisesta ja pyynt\u00f6jen suorittamisesta niille mukautetussa Gutenberg-lohkossa. Toisin sanoen pyynt\u00f6jen tekeminen sellaisilla <code>fetch<\/code>tavoilla, joita ei ole saatavilla WordPressin rekister\u00f6idyiss\u00e4 tietovarastoissa.<\/p>\n<p>Yst\u00e4v\u00e4llinen muistutus: useimmat perustiedot ovat jo saatavilla WordPressin tietovarastoista. Esimerkiksi viestien, sivujen, mukautettujen viestityyppien, taksonomioiden, kirjoittajien, median ja muiden peruskyselyt ovat k\u00e4ytett\u00e4viss\u00e4 sellaisenaan ilman, ett\u00e4 sinun tarvitsee luoda omia mukautettuja p\u00e4\u00e4tepisteit\u00e4. P\u00e4\u00e4st\u00e4ksesi n\u00e4ihin kauppoihin k\u00e4yt\u00e4t mieluummin WordPressin ydintietomoduulia (<code>withSelect<\/code>ja <code>select()<\/code>). Alla on opetusohjelma, jossa k\u00e4sitell\u00e4\u00e4n perusteellisesti, kuinka se tehd\u00e4\u00e4n.<\/p>\n<h2>WordPress REST API<\/h2>\n<p>Jos et jo tiennyt; WordPress REST API on JSON-k\u00e4ytt\u00f6liittym\u00e4 tietojen l\u00e4hett\u00e4miseen ja vastaanottamiseen WordPress-sivustostasi. Sit\u00e4 voidaan k\u00e4ytt\u00e4\u00e4 ulkoisesti tai sis\u00e4isesti. Gutenberg-editorin ja Javascriptiin siirtymisen my\u00f6t\u00e4 REST API:n k\u00e4ytt\u00f6 on lis\u00e4\u00e4ntynyt selv\u00e4sti. WordPress REST API:lla on koko joukko p\u00e4\u00e4tepisteit\u00e4, joita voimme k\u00e4ytt\u00e4\u00e4. Katso <a href=\"https:\/\/developer.wordpress.org\/rest-api\/reference\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">t\u00e4ydellinen viite kaikista REST API -p\u00e4\u00e4tepisteist\u00e4 t\u00e4\u00e4lt\u00e4<\/a>. L\u00f6yd\u00e4t esimerkiksi p\u00e4\u00e4tepisteit\u00e4 postauksille ja suurimmalle osalle muuta sis\u00e4ist\u00e4 sis\u00e4lt\u00f6\u00e4 \u2013 sek\u00e4 lukemista ett\u00e4 p\u00e4ivitt\u00e4mist\u00e4 varten. Teeman tai laajennuksen kehitt\u00e4j\u00e4t voivat rekister\u00f6id\u00e4 omia mukautettuja p\u00e4\u00e4tepisteit\u00e4\u00e4n.<\/p>\n<p>WordPress-sivustollasi on juuri REST-sovellusliittym\u00e4n URL-osoite, joka sijaitsee oletuksena osoitteessa <code>&lt;your domain&gt;\/wp-json<\/code>. Esimerkiksi paikallinen WordPress URL-osoitteella <code>http:\/\/localhost\/wordpress\/<\/code>voi k\u00e4ytt\u00e4\u00e4 REST-sovellusliittym\u00e4\u00e4 osoitteessa <code>http:\/\/localhost\/wordpress\/wp-json<\/code>. Sielt\u00e4 meid\u00e4n on liitett\u00e4v\u00e4 p\u00e4\u00e4tepisteet. Viitaten yll\u00e4 olevaan p\u00e4\u00e4tepisteiden viittaukseen voimme hakea luettelon p\u00e4\u00e4tepisteen viimeisimmist\u00e4 viesteist\u00e4 <code>\/wp\/v2\/posts<\/code>. T\u00e4m\u00e4 tarkoittaa, ett\u00e4 jos siirryt <code>http:\/\/localhost\/wordpress\/wp-json\/wp\/v2\/posts<\/code>selaimessasi kohtaan, saat JSON-muotoisen vastauksen WordPress-sivustosi uusimmista viesteist\u00e4.<\/p>\n<p>Huomautus nimiavaruuksista on paikallaan. REST-sovellusliittym\u00e4n URL-osoite alkaa nimiavaruudella (&quot; <code>wp\/v2<\/code>&quot; on WordPress-nimiavaruus, kuten yll\u00e4 olevista URL-esimerkeist\u00e4 n\u00e4kyy). Nimiavaruudet on konsepti, jolla v\u00e4ltet\u00e4\u00e4n ristiriidat ydinWordPressiss\u00e4, teemoissa ja laajennuksissa, jotka lis\u00e4\u00e4v\u00e4t samannimiset p\u00e4\u00e4tepisteet. Luo oma ainutlaatuinen nimiavaruutesi \u2013 tyypillisesti teemasi tai laajennuksen nimesi sluug-muoto. Slugin j\u00e4lkeen yleinen s\u00e4\u00e4nt\u00f6 on versionumeron lis\u00e4\u00e4minen, yleens\u00e4 alkaen v1. Esimerkkin\u00e4 teemani slug on &quot; <code>awhitepixel<\/code>&quot;, joten jos luoisin mukautettuja p\u00e4\u00e4tepisteit\u00e4 teemaani, k\u00e4ytt\u00e4isin nimiavaruutta &quot; <code>awhitepixel\/v1<\/code>&quot;. T\u00e4ll\u00e4 nimiavaruudella voisin rekister\u00f6id\u00e4 p\u00e4\u00e4tepisteen &#8217; <code>posts<\/code>&#8217; eik\u00e4 se aiheuttaisi ongelmia, vaikka se on identtinen WordPressin p\u00e4\u00e4tepisteen nimen kanssa.<\/p>\n<p>Ty\u00f6skentely REST API:n kanssa WordPressiss\u00e4 on laaja aihe, josta on saatavilla paljon hyv\u00e4\u00e4 tietoa. T\u00e4ss\u00e4 viestiss\u00e4 keskityn k\u00e4ytett\u00e4vyyteen Gutenberg-editorissa ja niiden hakemiseen Javascriptiss\u00e4.<\/p>\n<h2>Mit\u00e4 teemme ja mit\u00e4 tarvitsemme<\/h2>\n<p>Mukautettujen tietojen pyyt\u00e4misen k\u00e4ytett\u00e4vyydell\u00e4 on laaja valikoima k\u00e4ytt\u00f6tapauksia, joten sinun on yleens\u00e4 mukautettava alla olevia koodiesimerkkej\u00e4 tarpeidesi mukaan. Tiedot voivat olla mukautettua viestikysely\u00e4, mukautettua SQL-kysely\u00e4 tai jotain aivan muuta.<\/p>\n<p>Kun luomme mukautetun p\u00e4\u00e4tepisteen, hallitsemme t\u00e4ysin sen palautusta. Voimme suorittaa kaikenlaisia \u200b\u200btoimintoja ja kyselyit\u00e4 WordPress\/PHP:ss\u00e4 ja v\u00e4litt\u00e4\u00e4 t\u00e4m\u00e4n eteenp\u00e4in JSON-muodossa. Ja Gutenberg-lohkossamme voimme hakea t\u00e4m\u00e4n palautuksen ja tehd\u00e4 sill\u00e4 mit\u00e4 haluamme lohkon <code>edit<\/code>toiminnon sis\u00e4ll\u00e4. Tyypillisesti k\u00e4yt\u00e4t dataa esitell\u00e4ksesi loppuk\u00e4ytt\u00e4j\u00e4lle valinnan tai tiedon lohkoeditorissa, mutta voit my\u00f6s tallentaa niist\u00e4 tietoja lohkoosi my\u00f6hemp\u00e4\u00e4 k\u00e4ytt\u00f6\u00e4 varten. Voit my\u00f6s luoda omia mukautettuja varastoja n\u00e4ille tiedoille, mutta en k\u00e4sittele sit\u00e4, miten se tehd\u00e4\u00e4n.<\/p>\n<p>Oletan, ett\u00e4 olet jo perehtynyt mukautettujen Gutenberg-lohkojen luomiseen, joten en k\u00e4y t\u00e4t\u00e4 t\u00e4ss\u00e4 yksityiskohtaisesti l\u00e4pi.<\/p>\n<h2>Luodaan REST API -p\u00e4\u00e4tepistett\u00e4<\/h2>\n<p>Mukautetun REST API -p\u00e4\u00e4tepisteen rekister\u00f6inti tehd\u00e4\u00e4n PHP:ss\u00e4. Lis\u00e4\u00e4 t\u00e4m\u00e4 koodi teemaasi <code>functions.php<\/code>tai aktiiviseen laajennuskoodiin. Kytke toiminto toimintoon <code>rest_api_init<\/code>ja suorita toiminto <code>[register_rest_route](https:\/\/developer.wordpress.org\/reference\/functions\/register_rest_route\/)()<\/code>jokaiselle rekister\u00f6it\u00e4v\u00e4lle p\u00e4\u00e4tepisteelle.<\/p>\n<p>Anna nimiavaruutesi ensimm\u00e4isen\u00e4 parametrina, p\u00e4\u00e4tepisteen reittisi toiseksi ja joukko asetuksia kolmanneksi parametriksi <code>register_rest_route()<\/code>. Nelj\u00e4s parametri m\u00e4\u00e4ritt\u00e4\u00e4, haluatko ohittaa olemassa olevan reitin vai et; ei ole jotain mit\u00e4 katsomme t\u00e4\u00e4ll\u00e4. Kolmannen parametrin taulukossa sinun tulee asettaa v\u00e4hint\u00e4\u00e4n ominaisuus &quot; <code>callback<\/code>&quot; funktiolle, joka vastaa p\u00e4\u00e4tepisteen tietojen palauttamisesta. My\u00f6s &#8217; <code>method<\/code>&#8217;:n asettaminen on yleist\u00e4, esim. p\u00e4\u00e4tepisteen asettaminen &#8217; <code>GET<\/code>&#8217;, &#8217; <code>POST<\/code>&#8217;, &#8217; <code>PUT<\/code>&#8217; jne.<\/p>\n<p>Aloitetaan rekister\u00f6im\u00e4ll\u00e4 yksinkertainen p\u00e4\u00e4tepiste;<\/p>\n<pre><code>add_action('rest_api_init', function() {\n    register_rest_route('awhitepixel\/v1', '\/mydata', [\n        'method' =&gt; 'GET',\n        'callback' =&gt; 'awhitepixel_rest_route_mydata'\n    ]);\n});<\/code><\/pre>\n<p>Teemani nimiavaruus on &quot; <code>awhitepixel\/v1<\/code>&quot; ja rekister\u00f6in p\u00e4\u00e4tepisteen &quot; <code>mydata<\/code>&quot; t\u00e4h\u00e4n nimiavaruuteen. T\u00e4m\u00e4 tarkoittaa, ett\u00e4 voin k\u00e4ytt\u00e4\u00e4 mukautettua REST-sovellusliittym\u00e4\u00e4ni osoitteessa <code>http:\/\/localhost\/wordpress\/wp-json\/awhitepixel\/v1\/mydata<\/code>.<\/p>\n<p>Kun rekister\u00f6it (tai muutat) REST API -reittej\u00e4, sinun on <strong>huuhdeltava<\/strong> pysyv\u00e4t linkit, jotta se toimisi. Voit tehd\u00e4 t\u00e4m\u00e4n siirtym\u00e4ll\u00e4 kohtaan Asetukset &gt; Pysyv\u00e4t linkit ja napsauttamalla Tallenna.<\/p>\n<p>Yll\u00e4 oleva koodi ei viel\u00e4 toimi, koska en ole m\u00e4\u00e4ritellyt toimintosarjaa takaisinsoittona: <code>awhitepixel_rest_route_mydata<\/code>. Takaisinsoittotoiminto vastaanottaa yhden parametrin; joukko tietoja, jotka sis\u00e4lt\u00e4v\u00e4t pyynn\u00f6st\u00e4 v\u00e4litettyj\u00e4 tietoja ja argumentteja. Lopuksi sinun on harkittava huolellisesti takaisinsoittotoiminnon palautusta.<\/p>\n<p>Ensinn\u00e4kin sinun on aina palautettava jotain p\u00e4\u00e4tepisteest\u00e4si. WordPress muuntaa kaikki palautukset automaattisesti JSON-muotoon. T\u00e4m\u00e4 tarkoittaa, ett\u00e4 voit palauttaa funktiossasi k\u00e4yt\u00e4nn\u00f6ss\u00e4 mink\u00e4 tahansa muodon dataa; merkkijono, nolla, taulukko tai <code>[WP_Error](https:\/\/developer.wordpress.org\/reference\/classes\/wp_error\/)<\/code>ilmentym\u00e4. Voit my\u00f6s valita <code>[WP_REST_Response](https:\/\/developer.wordpress.org\/reference\/classes\/wp_rest_response\/)<\/code>objektin palauttamisen, jotta voit hallita paremmin esim. tilakoodia tai otsikkotietoja. Suosittelen k\u00e4\u00e4rim\u00e4\u00e4n returnin funktioon <code>[rest_ensure_response](https:\/\/developer.wordpress.org\/reference\/functions\/rest_ensure_response\/)()<\/code>varmistaaksesi, ett\u00e4 vastauksesi on kelvollinen REST-vastaus.<\/p>\n<p>M\u00e4\u00e4ritet\u00e4\u00e4n takaisinsoittofunktio ja palautetaan yksinkertainen merkkijono aloitukseksi;<\/p>\n<pre><code>function awhitepixel_rest_route_mydata($data) {\n    $response = 'Hello there!';\n    return rest_ensure_response($response);\n}<\/code><\/pre>\n<p>Yll\u00e4 olevalla koodilla (ja tyhjennetyill\u00e4 pysyvill\u00e4 linkeill\u00e4) voin nyt siirty\u00e4 URL-osoitteeseen <code>http:\/\/localhost\/wordpress\/wp-json\/awhitepixel\/v1\/mydata<\/code>.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151531-61e4cc06da37f.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151531-61e4cc06da37f.png\" alt=\"Luo ja hae mukautettuja REST-p\u00e4\u00e4tepisteit\u00e4 Gutenberg-lohkoissa\" ><\/a><\/p>\n<p>T\u00e4st\u00e4 eteenp\u00e4in voimme lis\u00e4t\u00e4 mink\u00e4 tahansa koodin takaisinsoittotoimintoomme luodaksemme oikeat tiedot palautettavaksi. Voit tiedustella WordPress-sis\u00e4lt\u00f6\u00e4 esim <code>[WP_Query](https:\/\/developer.wordpress.org\/reference\/classes\/wp_query\/)<\/code>. -sovelluksella, tehd\u00e4 kyselyit\u00e4 tietokantaan tai pyyt\u00e4\u00e4 ulkopuolisia tietoja. T\u00e4m\u00e4 osa on sinun.<\/p>\n<p>Siirryt\u00e4\u00e4n nyt vastakkaiselle puolelle; miten pyynn\u00f6t tehd\u00e4\u00e4n.<\/p>\n<h2>REST API -pyynt\u00f6jen tekeminen Javascriptiss\u00e4<\/h2>\n<p>REST-pyynn\u00f6n suorittaminen tehd\u00e4\u00e4n yleens\u00e4 <code>[fetch](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Fetch_API)<\/code>Javascriptill\u00e4. WordPress tarjoaa oman k\u00e4\u00e4reens\u00e4 <code>fetch<\/code>, joka yksinkertaistaa WordPress REST API -pyynt\u00f6j\u00e4; <code>[wp.apiFetch](https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-api-fetch\/)<\/code>. T\u00e4t\u00e4 k\u00e4yt\u00e4n mukautetussa Gutenberg-lohkossani. Muista, ett\u00e4 <code>fetch<\/code>pyynn\u00f6t palauttavat &quot;lupauksen&quot; &#8211; joten meid\u00e4n on ketjutettava a <code>.then()<\/code>voidaksemme k\u00e4sitell\u00e4 varsinaisen pyynn\u00f6n palautuksen. Perusk\u00e4ytt\u00f6 on jotain t\u00e4llaista;<\/p>\n<pre><code>wp.apiFetch({\n    path: '&lt;namespace and endpoint&gt;',\n}).then(data =&gt; {\n    console.log('response from apifetch: ', data);\n});<\/code><\/pre>\n<p><code>apiFetch<\/code>antaa meille mahdollisuuden tarjota <code>path<\/code>ominaisuuden koko URL-osoitteen rakentamisen sijaan. Tarvitsemme vain nimitilan ja p\u00e4\u00e4tepisteen, ja lis\u00e4\u00e4mme <code>apiFetch<\/code>t\u00e4m\u00e4n WordPressin REST API -juuri-URL-osoitteeseen. Toiminnon sis\u00e4ll\u00e4 <code>.then()<\/code>meill\u00e4 on p\u00e4\u00e4sy tietoihin, jotka on jo muutettu JSONiksi. T\u00e4\u00e4ll\u00e4 voit tehd\u00e4 jotain tiedoilla. Yleens\u00e4 palautetut tiedot tallennetaan esim. komponentin tilaan.<\/p>\n<p>Alla on esimerkki mukautetun Gutenberg-lohkon <code>edit<\/code>komponentista. Se on luokkapohjainen, jotta sit\u00e4 voidaan k\u00e4ytt\u00e4\u00e4 <code>state<\/code>REST API -pyynn\u00f6st\u00e4 palautettujen tietojen tallentamiseen. T\u00e4m\u00e4n ansiosta voimme my\u00f6s suorittaa pyynn\u00f6n, <code>componentDidMount()<\/code>kun se asennetaan ensimm\u00e4isen kerran (katso <a href=\"https:\/\/reactjs.org\/docs\/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Reactin dokumentaatio elinkaarimenetelmist\u00e4<\/a> ). Kaikki t\u00e4m\u00e4 tarjoaa yksinkertaisen esimerkin, jotta voit ymm\u00e4rt\u00e4\u00e4 perusk\u00e4sitteen; ei reseptin\u00e4 tehd\u00e4 se t\u00e4sm\u00e4lleen n\u00e4in. Voit harkita <a href=\"https:\/\/reactjs.org\/docs\/hooks-intro.html\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">React-koukkujen ja toiminnallisten komponenttien<\/a> k\u00e4ytt\u00f6\u00e4 tai rakentaa sen sijaan <a href=\"https:\/\/reactjs.org\/docs\/higher-order-components.html\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">korkeamman asteen komponentin<\/a>.<\/p>\n<pre><code>const { Component } = wp.element;\nconst { Spinner } = wp.components;\n\u00a0\nclass BlockEdit extends Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            list: [],\n            loading: true\n        }\n    }\n\u00a0\n    componentDidMount() {\n        this.runApiFetch();\n    }\n\u00a0\n    runApiFetch() {\n        wp.apiFetch({\n            path: 'awhitepixel\/v1\/mydata',\n        }).then(data =&gt; {\n            this.setState({\n                list: data,\n                loading: false\n            });\n        });\n    }\n\u00a0\n    render() {\n        return(\n            &lt;div&gt;\n                {this.state.loading? (&lt;Spinner \/&gt;\n                ): (&lt;p&gt;Data is ready!&lt;\/p&gt;\n                )}\n            &lt;\/div&gt;\n        );\n\u00a0\n    }\n}\nexport default BlockEdit;<\/code><\/pre>\n<p>Yll\u00e4 oleva esimerkki on luokkapohjainen kokoonpano, joka toimitetaan lohkon <code>edit<\/code>funktiolle <code>registerBlockType()<\/code>. Se asettaa taulukon tilaobjektin pit\u00e4m\u00e4\u00e4n tiedot (t\u00e4m\u00e4 riippuu luonnollisesti palauttamistasi tiedoista) ja tilan looginen arvo tiet\u00e4\u00e4kseen, milloin async-pyynt\u00f6 on palannut. Kun komponentti on asennettu (render\u00f6ity ensimm\u00e4ist\u00e4 kertaa), se suorittaa toiminnon suorittaakseen <code>apiFetch<\/code>pyynn\u00f6n. Asetamme polun p\u00e4\u00e4tepisteeseen, jonka rekister\u00f6imme PHP:ss\u00e4 yll\u00e4. Menetelm\u00e4 on oletuksena GET, joten meid\u00e4n ei tarvitse m\u00e4\u00e4ritt\u00e4\u00e4 t\u00e4t\u00e4 kohdassa <code>apiFetch<\/code>. Ja <code>.then()<\/code>toiminnon sis\u00e4ll\u00e4 kun pyynt\u00f6 on valmis, p\u00e4ivit\u00e4mme komponentin tilan palautetuilla tiedoilla.<\/p>\n<p>Ilmeisesti lohkosi render\u00f6intitoiminto tekisi enemm\u00e4n itse palautetulle tiedolle. Haluat ehk\u00e4 antaa tiedot k\u00e4ytt\u00e4j\u00e4lle jollakin tavalla esitt\u00e4en luettelon, josta h\u00e4n voi valita. Kaikki riippuu siit\u00e4, millaista dataa se on ja mihin sit\u00e4 haluat k\u00e4ytt\u00e4\u00e4.<\/p>\n<h2>Argumenttien v\u00e4litt\u00e4minen p\u00e4\u00e4tepisteeseen<\/h2>\n<p>Joissakin tapauksissa meid\u00e4n on v\u00e4litett\u00e4v\u00e4 joitain argumentteja p\u00e4\u00e4tepisteeseen. Yleisi\u00e4 k\u00e4ytt\u00f6tarkoituksia ovat tunnuksen v\u00e4litt\u00e4minen p\u00e4\u00e4tepisteen j\u00e4lkeen; palauttaisi esimerkiksi <code>http:\/\/localhost\/wordpress\/wp-json\/wp\/v2\/posts\/14<\/code>postitunnuksen 14.<\/p>\n<p>T\u00e4m\u00e4 on melko yksinkertaista ja tehd\u00e4\u00e4n lis\u00e4\u00e4m\u00e4ll\u00e4 regex-hakukuvio p\u00e4\u00e4tepisteeseen rekister\u00f6innin yhteydess\u00e4. Monimutkaisten kuvioiden rakentaminen vaatii jonkin verran tietoa regexeist\u00e4, mutta alla on esimerkki, joka vastaa numeroa ja antaa sille nimen &quot;id&quot;. Osumien nime\u00e4minen antaa meille mahdollisuuden k\u00e4ytt\u00e4\u00e4 muuttujaa takaisinsoittotoiminnossamme. Anna minun n\u00e4ytt\u00e4\u00e4, mit\u00e4 tarkoitan.<\/p>\n<p>Rekister\u00f6id\u00e4\u00e4n uusi p\u00e4\u00e4tepistereitti. K\u00e4yt\u00e4mme samaa p\u00e4\u00e4tepistett\u00e4 kuin aiemmin (&#8217; <code>awhitepixel\/v1\/mydata<\/code>&#8217;), mutta t\u00e4lle reitille lis\u00e4\u00e4mme s\u00e4\u00e4nn\u00f6llisen lausekkeen numerolle loppuun.<\/p>\n<pre><code>add_action('rest_api_init', function() {\n    register_rest_route('awhitepixel\/v1', '\/mydata', [\n        'method' =&gt; 'GET',\n        'callback' =&gt; 'awhitepixel_rest_route_mydata'\n    ]);\n\u00a0\n    register_rest_route('awhitepixel\/v1', '\/mydata\/(?P&lt;id&gt;[d]+)', [\n        'method' =&gt; 'GET',\n        'callback' =&gt; 'awhitepixel_rest_route_mydata'\n    ]);\n});<\/code><\/pre>\n<p>Regex-kuvio <code>(?P&lt;id&gt;[d]+)<\/code>vaikuttaa salaper\u00e4iselt\u00e4, mutta se on melko selke\u00e4, kun ymm\u00e4rr\u00e4t regexin perustiedot. Osa <code>[d]+<\/code>vastaa mit\u00e4 tahansa numeroa (0-9) yhden tai useamman kerran. Osat <code>(?P&lt;id&gt;<\/code>ja <code>)<\/code>ovat nimetyn ryhm\u00e4n yhdist\u00e4mist\u00e4 varten. Ryhm\u00e4n nimi on t\u00e4ss\u00e4 tapauksessa <code>id<\/code>, mutta voit nimet\u00e4 ryhm\u00e4si miten haluat.<\/p>\n<p>Voit ohjata t\u00e4m\u00e4n p\u00e4\u00e4tepisteen erilliseen takaisinsoittotoimintoon, mutta olen p\u00e4\u00e4tt\u00e4nyt k\u00e4ytt\u00e4\u00e4 samaa toimintoa sek\u00e4 <code>\/mydata<\/code>sek\u00e4 <code>\/mydata\/&lt;ID&gt;<\/code>pyynt\u00f6jen ett\u00e4 pyynt\u00f6jen k\u00e4sittelemiseen. T\u00e4m\u00e4 tarkoittaa, ett\u00e4 voin takaisinsoittotoiminnossani tehd\u00e4:<\/p>\n<pre><code>function awhitepixel_rest_route_mydata($data) {\n    if ($data['id']) {\n        $response = 'Create return for ID: '. $data['id'];\n    } else {\n        $response = 'Create general return (no ID provided)';\n    }\n    return rest_ensure_response($response);\n}<\/code><\/pre>\n<p>Muista, ett\u00e4 takaisinkutsufunktion parametri sis\u00e4lt\u00e4\u00e4 palautetut argumentit. Koska annoin vastaavalle ryhm\u00e4lleni nimen &quot; <code>id<\/code>&quot;, vastaava arvo on k\u00e4ytett\u00e4viss\u00e4 kielell\u00e4 <code>$data['id']<\/code>. Ja lopuksi, koska k\u00e4yt\u00e4n samaa toimintoa pyynt\u00f6jen k\u00e4sittelyyn tunnuksella ja ilman, voin helposti vaihtaa kahden eri palautuksen v\u00e4lill\u00e4.<\/p>\n<p>T\u00e4m\u00e4n (ja p\u00e4ivitettyjen pysyvien linkkien) avulla saan n\u00e4m\u00e4 vastaukset mukautetuille p\u00e4\u00e4tepisteilleni:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151531-61e4cc079c6de.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151531-61e4cc079c6de.png\" alt=\"Luo ja hae mukautettuja REST-p\u00e4\u00e4tepisteit\u00e4 Gutenberg-lohkoissa\" ><\/a><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151531-61e4cc08646fc.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151531-61e4cc08646fc.png\" alt=\"Luo ja hae mukautettuja REST-p\u00e4\u00e4tepisteit\u00e4 Gutenberg-lohkoissa\" ><\/a><\/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>Opas mukautettujen WordPress REST API -p\u00e4\u00e4tepisteiden luomiseen ja apiFetch-pyynt\u00f6jen suorittamiseen niille mukautetussa Gutenberg-lohkossa.<\/p>\n","protected":false},"author":1,"featured_media":224922,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[895,938,938,895,813,917,917,1110,834,843,813,834,843,864,864],"tags":[1166],"class_list":["post-233993","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-koodi","category-gutenberg-5","category-laajennuksia","category-muut","category-n-a","category-opas-aloittelijoille","category-opetusohjelmia","category-wordpress-5","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233993","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=233993"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233993\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/224922"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=233993"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=233993"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=233993"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}