{"id":234269,"date":"2023-02-25T18:18:00","date_gmt":"2023-02-25T15:18:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=234269"},"modified":"2022-11-12T03:00:39","modified_gmt":"2022-11-12T00:00:39","slug":"guide-detaille-sur-la-creation-et-la-recuperation-de-points-de-terminaison-dapi-rest-wp-personnalises","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/guide-detaille-sur-la-creation-et-la-recuperation-de-points-de-terminaison-dapi-rest-wp-personnalises\/","title":{"rendered":"Guide d\u00e9taill\u00e9 sur la cr\u00e9ation et la r\u00e9cup\u00e9ration de points de terminaison d&rsquo;API REST WP personnalis\u00e9s"},"content":{"rendered":"\n<p>Cet article montrera comment cr\u00e9er des points de terminaison WordPress REST personnalis\u00e9s et diff\u00e9rentes m\u00e9thodes pour leur envoyer des requ\u00eates. Il y aura des exemples en PHP, jQuery et Javascript vanille.<\/p>\n<p>Je suppose que vous connaissez d\u00e9j\u00e0 l&rsquo;API WP REST, mais voici un bref r\u00e9sum\u00e9. WordPress REST API est une interface JSON pour envoyer et recevoir des donn\u00e9es de votre site WordPress. Vous pouvez acc\u00e9der aux points de terminaison (chemins\/URL sp\u00e9cifiques) \u00e0 la fois en externe et en interne. WordPress a d\u00e9j\u00e0 un tas de points de terminaison disponibles, par exemple pour r\u00e9cup\u00e9rer des publications, des cat\u00e9gories, rechercher sur le site et plus encore. Voir un <a href=\"https:\/\/developer.wordpress.org\/rest-api\/reference\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">aper\u00e7u des points de terminaison WordPress par d\u00e9faut<\/a> ici. Mais les d\u00e9veloppeurs sont enti\u00e8rement libres de cr\u00e9er leurs propres points de terminaison personnalis\u00e9s \u00e0 l&rsquo;aide de cette API, pour effectuer des actions ou r\u00e9cup\u00e9rer des donn\u00e9es.<\/p>\n<p>Nous allons commencer par la premi\u00e8re \u00e9tape\u00a0; qui cr\u00e9e des points de terminaison personnalis\u00e9s. Si vous \u00eates seulement int\u00e9ress\u00e9 par la fa\u00e7on de faire des demandes, passez directement \u00e0 la deuxi\u00e8me partie.<\/p>\n<h2>Cr\u00e9er des points de terminaison personnalis\u00e9s<\/h2>\n<p>L&rsquo;enregistrement des points de terminaison personnalis\u00e9s se fait en PHP. Vous pouvez ajouter le code au fichier de code de votre th\u00e8me <code>functions.php<\/code>ou d&rsquo;un plugin actif. Cr\u00e9ez une fonction accroch\u00e9e \u00e0 <code>rest_api_init<\/code>et utilisez la fonction <code>[register_rest_route](https:\/\/developer.wordpress.org\/reference\/functions\/register_rest_route\/)()<\/code>pour chaque point de terminaison que vous souhaitez ajouter.<\/p>\n<p>En tant que premier param\u00e8tre, <code>register_rest_route()<\/code>vous devez fournir un espace de noms unique pour vous assurer que vos points de terminaison n&rsquo;entrent pas en conflit avec les autres. Utilisez le slug de votre th\u00e8me ou plugin. Il est courant d&rsquo;inclure ensuite un <code>\/<\/code>suivi d&rsquo;un num\u00e9ro de version pour votre code. \u00c0 titre d&rsquo;exemple, j&rsquo;utiliserai l&rsquo;espace de noms <code>awhitepixel\/v1<\/code>. Le deuxi\u00e8me param\u00e8tre est le chemin (qui suit l&rsquo;espace de noms). Enfin, vous pouvez \u00e9ventuellement fournir un tableau comme troisi\u00e8me param\u00e8tre avec des options. Dans ce tableau, vous pouvez par exemple d\u00e9finir la m\u00e9thode de requ\u00eate (GET, POST ou toute autre), d\u00e9finir des param\u00e8tres et, surtout, d\u00e9finir la fonction \u00e0 ex\u00e9cuter lorsque ce point de terminaison est demand\u00e9.<\/p>\n<p>Au minimum, vous devez fournir les arguments &lsquo;method&rsquo; et &lsquo;callback&rsquo; (qui est la fonction pour g\u00e9rer les donn\u00e9es du point de terminaison) comme troisi\u00e8me param\u00e8tre. Pour &lsquo;m\u00e9thode&rsquo;, vous pouvez les d\u00e9finir comme &lsquo; <code>GET'<\/code>, <code>'POST'<\/code>, <code>'PUT'<\/code>, ou toute autre m\u00e9thode de requ\u00eate valide (ou un tableau de plusieurs), mais je recommande d&rsquo;utiliser les valeurs par d\u00e9faut de WordPress pour cela. Ils sont les suivants :<\/p>\n<ul>\n<li><code>WP_REST_Server::READABLE<\/code> m\u00e9thode &lsquo; <code>GET<\/code>&lsquo;<\/li>\n<li><code>WP_REST_Server::EDITABLE<\/code> m\u00e9thodes &lsquo; <code>POST<\/code>&lsquo;, &lsquo; <code>PUT<\/code>&lsquo; et &lsquo; <code>PATCH<\/code>&lsquo;<\/li>\n<li><code>WP_REST_Server::DELETABLE<\/code> m\u00e9thode &lsquo; <code>DELETE<\/code>&lsquo;<\/li>\n<li><code>WP_REST_Server::ALLMETHODS<\/code> toutes les m\u00e9thodes ci-dessus<\/li>\n<\/ul>\n<p>Cr\u00e9ons un point de terminaison personnalis\u00e9 de base qui peut \u00eatre atteint \u00e0 l&rsquo;aide de requ\u00eates GET\u00a0:<\/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>\u00c0 la ligne, <code>#2<\/code>nous avons d\u00e9fini notre point de terminaison personnalis\u00e9 comme &lsquo; <code>awhitepixel\/v1\/getsomedata<\/code>&lsquo;. L&rsquo;URL compl\u00e8te serait l&rsquo;URL racine de l&rsquo;API REST de WordPress pr\u00e9fix\u00e9e, qui est <code>&lt;yourdomain&gt;\/wp-json<\/code>. Ainsi, l&rsquo;URL compl\u00e8te du point de terminaison ci-dessus serait &lsquo; <code>&lt;yourdomain&gt;\/wp-json\/awhitepixel\/v1\/getsomedata<\/code>&lsquo;. \u00c0 la ligne, <code>#4<\/code>nous avons fourni un nom de fonction comme rappel, que nous ajouterons sous peu.<\/p>\n<p>Lors de l&rsquo;enregistrement (ou de la modification) des routes de l&rsquo;API REST \u00e0 l&rsquo;aide <code>register_rest_route()<\/code>de, vous devrez <strong>vider vos permaliens<\/strong> pour que cela fonctionne. Vous pouvez le faire en visitant Param\u00e8tres&gt; Permaliens dans l&rsquo;administrateur et cliquez simplement sur Enregistrer.<\/p>\n<p>Nous n&rsquo;avons pas encore d\u00e9fini la fonction de rappel &#8211; qui est la fonction du code qui g\u00e8re la r\u00e9action de l&rsquo;utilisation de ce point de terminaison. Il doit renvoyer une r\u00e9ponse valide REST (en JSON), vous devrez donc renvoyer quelque chose m\u00eame si le point de terminaison n&rsquo;est pas cens\u00e9 renvoyer de donn\u00e9es. Vous pouvez utiliser la fonction <code>[rest_ensure_response](https:\/\/developer.wordpress.org\/reference\/functions\/rest_ensure_response\/)()<\/code>function ou cr\u00e9er une instance d&rsquo; <code>WP_REST_Response<\/code>object comme retour du rappel. En tant que param\u00e8tre de la fonction de rappel, nous obtenons un <code>WP_REST_Request<\/code>objet qui contient toutes les informations sur la requ\u00eate, y compris tous les param\u00e8tres. Cr\u00e9ons une fonction de rappel simple qui envoie simplement du texte en r\u00e9ponse\u00a0:<\/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>C&rsquo;est la mani\u00e8re la plus basique d&rsquo;\u00e9crire un callback. La fonction <code>rest_ensure_response()<\/code>s&rsquo;assure que toutes les donn\u00e9es que nous fournissons (la cha\u00eene) sont converties en une r\u00e9ponse valide REST. \u00c9videmment, vous voudrez ajouter plus de code ici, soit pour faire quelque chose dans WordPress, soit pour r\u00e9cup\u00e9rer et renvoyer des donn\u00e9es.<\/p>\n<p>Avec le code ci-dessus (enregistrement du point de terminaison et de la fonction de rappel), vous pouvez essayer d&rsquo;acc\u00e9der \u00e0 l&rsquo;URL de votre navigateur et voir ce que vous obtenez. (Pensez \u00e0 vider vos permaliens). Aller \u00e0 <code>&lt;domain&gt;\/wp-json\/awhitepixel\/v1\/getsomedata<\/code>dans le navigateur affichera la cha\u00eene &quot;Hello there!&quot;.<\/p>\n<h3>Acceptation des param\u00e8tres<\/h3>\n<p>Il est tr\u00e8s courant et utile d&rsquo;autoriser les points de terminaison \u00e0 accepter des param\u00e8tres. Par exemple, si votre site contient par exemple des donn\u00e9es sur les produits, vous voudriez un point de terminaison o\u00f9 vous pouvez fournir un ID de produit afin d&rsquo;obtenir les donn\u00e9es de ce produit. Il y a deux fa\u00e7ons de proc\u00e9der. La m\u00e9thode la plus courante consiste \u00e0 utiliser la cha\u00eene de requ\u00eate GET (qui est ajout\u00e9e apr\u00e8s l&rsquo;URL apr\u00e8s un <code>?<\/code>, s\u00e9par\u00e9e par <code>&amp;<\/code>au format cl\u00e9=valeur. Par exemple &lsquo; <code>&lt;endpoint&gt;\/product\/?product_id=14<\/code>&lsquo;). Vous pouvez \u00e9galement d\u00e9finir un mod\u00e8le d&rsquo;URL &quot;plus joli&quot;, o\u00f9 les param\u00e8tres font partie du chemin. Par exemple &lsquo; <code>&lt;endpoint&gt;\/product\/14\/<\/code>&lsquo;. Cette derni\u00e8re m\u00e9thode n\u00e9cessite cependant une certaine connaissance des regexes. La m\u00e9thode que vous choisirez d\u00e9pend de vous, je vais vous montrer les deux ci-dessous.<\/p>\n<h4>Param\u00e8tres GET<\/h4>\n<p>La d\u00e9finition des param\u00e8tres GET possibles sur votre point de terminaison utilise la <code>args<\/code>cl\u00e9 &lsquo; &lsquo; dans <code>register_rest_route()<\/code>le troisi\u00e8me param\u00e8tre de. Pour chaque param\u00e8tre que vous souhaitez autoriser, d\u00e9finissez la valeur de cl\u00e9 (dans l&rsquo;exemple ci-dessus &lsquo; <code>product_id<\/code>&lsquo;) et un tableau d&rsquo;options pour ce param\u00e8tre. En tant qu&rsquo;options, vous pouvez d\u00e9finir le format du param\u00e8tre (s&rsquo;il attend par exemple un nombre ou une cha\u00eene) et \u00e9galement d\u00e9cider si ce param\u00e8tre est requis ou non.<\/p>\n<p>Par exemple, nous voulons permettre \u00e0 notre point de terminaison d&rsquo;accepter &lsquo; <code>product_id<\/code>&lsquo; comme nombre non requis.<\/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>Si vous d\u00e9finissez un param\u00e8tre comme vrai dans <code>required<\/code>, WordPress se chargera de renvoyer une r\u00e9ponse d&rsquo;erreur 400. De m\u00eame si vous passez un format invalide, par exemple &quot;hello&quot; comme valeur \u00e0 un param\u00e8tre qui attend un nombre.<\/p>\n<p>\u00c0 la ligne <code>#15<\/code>de la fonction de rappel, vous voyez comment obtenir la valeur du param\u00e8tre \u00e0 partir de la requ\u00eate\u00a0; en utilisant la m\u00e9thode <code>get_param()<\/code>dans l&rsquo;objet pass\u00e9 <code>WP_REST_Request<\/code>. \u00c0 titre d&rsquo;exemple, je montrerai diff\u00e9rentes r\u00e9ponses selon qu&rsquo;elles <code>product_id<\/code>ont \u00e9t\u00e9 fournies ou non (rappelez-vous que nous l&rsquo;avons d\u00e9fini comme facultatif). La logique de modification de votre code en fonction des param\u00e8tres fournis d\u00e9pend enti\u00e8rement de vous et de votre projet. Vous pouvez avoir moins de points de terminaison qui acceptent un grand nombre de param\u00e8tres, ou beaucoup plus de points de terminaison distincts pour chaque cas sp\u00e9cifique.<\/p>\n<p>Avec le code ci-dessus, j&rsquo;obtiendrai &quot;Hello there!&quot; lorsque je visite <code>&lt;yourdomain&gt;\/awhitepixel\/v1\/getsomedata<\/code>et &quot;Return product data for ID 14&quot; lorsque je vais sur <code>&lt;yourdomain&gt;\/awhitepixel\/v1\/getsomedata\/?product_id=14<\/code>.<\/p>\n<h4>Param\u00e8tres dans le cadre du chemin<\/h4>\n<p>Si vous souhaitez autoriser les param\u00e8tres \u00e0 faire partie du chemin plut\u00f4t que la cha\u00eene de requ\u00eate GET, vous pouvez le faire. Vous fournirez ensuite un mod\u00e8le regex dans le chemin &#8211; le deuxi\u00e8me param\u00e8tre de <code>register_rest_route()<\/code>.<\/p>\n<p>La cr\u00e9ation de mod\u00e8les regex peut sembler assez \u00e9nigmatique, mais comme il s&rsquo;agit d&rsquo;un sujet complet, vous trouverez facilement des exemples pour des cas sp\u00e9cifiques si vous le recherchez sur Google. Je vais montrer un exemple de d\u00e9finition d&rsquo;une expression r\u00e9guli\u00e8re qui accepte un nombre de n&rsquo;importe quelle longueur\u00a0;<\/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>Comme vous pouvez le voir \u00e0 la ligne 2, j&rsquo;ai ajout\u00e9 le motif regex <code>(?P&lt;product_id&gt;[d]+)<\/code>\u00e0 la fin. Ce mod\u00e8le signifie que nous devons collecter un nombre (<code>d<\/code>) de n&rsquo;importe quelle longueur (<code>+<\/code>) et affecter la valeur collect\u00e9e dans la cl\u00e9 de param\u00e8tre <code>product_id<\/code>. Et dans notre fonction de rappel, nous utilisons exactement la m\u00eame m\u00e9thode que lors de la configuration des param\u00e8tres GET\u00a0; <code>get_param()<\/code>dans l&rsquo; <code>WP_REST_Request<\/code>objet fourni \u00e0 la fonction.<\/p>\n<p>Avec le code ci-dessus (apr\u00e8s avoir vid\u00e9 les permaliens), nous pouvons visiter l&rsquo;URL <code>&lt;yourdomain&gt;\/wp-json\/awhitepixel\/v1\/getsomedata\/14<\/code>pour obtenir notre r\u00e9ponse. Cette m\u00e9thode donne certainement des URL &quot;plus jolies&quot;, mais le code peut facilement devenir plus difficile \u00e0 lire et \u00e0 corriger. Quelle que soit la m\u00e9thode que vous choisissez, c&rsquo;est \u00e0 vous de d\u00e9cider.<\/p>\n<h3>Renvoyer la bonne r\u00e9ponse<\/h3>\n<p>Plus t\u00f4t, j&rsquo;ai bri\u00e8vement mentionn\u00e9 comment la fonction de rappel doit renvoyer une r\u00e9ponse REST appropri\u00e9e. Jusqu&rsquo;\u00e0 pr\u00e9sent, nous avons utilis\u00e9 le plus simple <code>rest_ensure_response()<\/code>. Mais parfois, vous souhaiterez peut-\u00eatre plus de contr\u00f4le sur le retour de votre point de terminaison. Vous pouvez par exemple vouloir contr\u00f4ler le <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Status\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">code d&rsquo;\u00e9tat de la r\u00e9ponse HTTP<\/a>. Supposons que vous cr\u00e9ez un point de terminaison o\u00f9 vous pouvez fournir un ID de produit et obtenir des donn\u00e9es pour ce produit. Mais si cet ID de produit n&rsquo;existe pas, ou si d&rsquo;autres param\u00e8tres pr\u00eatent \u00e0 confusion, vous souhaiterez peut-\u00eatre renvoyer un code d&rsquo;\u00e9tat, par exemple 400 (Bad request) ou 404 (Not found). Ou peut-\u00eatre 500 (erreur de serveur). Toujours passer 200 (succ\u00e8s) m\u00eame si la demande \u00e9tait mauvaise peut causer des probl\u00e8mes du c\u00f4t\u00e9 de l&rsquo;exp\u00e9diteur.<\/p>\n<p>Je recommanderais alors votre fonction de rappel renvoyant un <code>WP_REST_Response<\/code>objet. Avec cet objet, vous pouvez contr\u00f4ler plusieurs choses, y compris le code d&rsquo;\u00e9tat. C&rsquo;est plus facile que vous ne le pensez! Dans la forme la plus simple, vous cr\u00e9eriez une nouvelle instance de <code>WP_REST_Response<\/code>, fourniriez un tableau des donn\u00e9es \u00e0 renvoyer comme premier param\u00e8tre et le code d&rsquo;\u00e9tat comme deuxi\u00e8me param\u00e8tre. Par exemple:<\/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>Dans l&rsquo;exemple ci-dessus, nous stockons le retour de la <code>awhitepixel_get_product()<\/code>fonction dans une variable. Cette fonction n&rsquo;existe pas, et vous devriez la remplacer par la fonction qui devrait r\u00e9cup\u00e9rer (ou faire) les actions que vous voulez dans votre projet. Mais disons que la fonction renvoie un tableau vide et cela signifie que quelque chose s&rsquo;est mal pass\u00e9 (par exemple, le produit n&rsquo;existait pas). Nous pourrions alors renvoyer un <code>WP_REST_Response<\/code>objet avec le code d&rsquo;\u00e9tat 400, et \u00e9ventuellement un message sous forme de donn\u00e9es expliquant pourquoi il a \u00e9chou\u00e9 (ligne <code>#5-9<\/code>). Sinon, nous renvoyons les donn\u00e9es avec le code de statut 200 Success (ligne <code>#10<\/code>).<\/p>\n<h2>Envoi de requ\u00eates \u00e0 des points de terminaison (personnalis\u00e9s)<\/h2>\n<p>Passons \u00e0 l&rsquo;autre c\u00f4t\u00e9, la partie envoi\u00a0: comment envoyer des requ\u00eates \u00e0 nos points de terminaison personnalis\u00e9s. Normalement, vous enverriez des demandes d&rsquo;API WP REST en utilisant Javascript et vous trouverez ici des exemples d&rsquo;utilisation de jQuery, de la biblioth\u00e8que WordPress et de Javascript vanilla. Il est rare, mais possible, d&rsquo;effectuer \u00e9galement une requ\u00eate REST avec PHP &#8211; j&rsquo;en ai donc \u00e9galement inclus un exemple.<\/p>\n<p>La premi\u00e8re chose \u00e0 savoir est que vous devez \u00e9videmment conna\u00eetre l&rsquo;URL compl\u00e8te pour envoyer une demande. Je ne recommande pas de coder en dur le domaine (avant le point de terminaison) car il existe plusieurs fa\u00e7ons de l&rsquo;obtenir si votre Javascript fonctionne dans WordPress. Dans les anciennes versions de WordPress, vous deviez utiliser <code>[wp_localize_script](https:\/\/developer.wordpress.org\/reference\/functions\/wp_localize_script\/)()<\/code>PHP et transmettre l&rsquo;URL REST principale en tant que variable Javascript globale. Mais les exemples ci-dessous montrent une nouvelle et meilleure fa\u00e7on d&rsquo;obtenir l&rsquo;URL racine REST du site WordPress.<\/p>\n<p>Une autre chose \u00e0 noter est que pour votre projet, vous envelopperiez probablement les demandes \u00e0 la suite d&rsquo;une action. Pour garder les choses simples, je pr\u00e9pare toutes les demandes au DOM, vous devez donc vous assurer d&rsquo;envelopper le code de la demande, par exemple \u00e0 la suite d&rsquo;un clic d&rsquo;un visiteur sur un bouton.<\/p>\n<h3>Utilisation de jQuery<\/h3>\n<p>Si vous poss\u00e9dez et souhaitez utiliser la biblioth\u00e8que jQuery, vous pouvez utiliser sa <code>[$.ajax](https:\/\/api.jquery.com\/jquery.ajax\/)()<\/code>fonction.<\/p>\n<p>Mais d&rsquo;abord une note sur les d\u00e9pendances de votre fichier Javascript. De toute \u00e9vidence, votre script aurait besoin <code>'jquery'<\/code>d&rsquo;une d\u00e9pendance pour le mettre en file d&rsquo;attente. Mais pour acc\u00e9der facilement \u00e0 l&rsquo;URL racine REST de votre WordPress, ajoutez une autre d\u00e9pendance ; &lsquo;wp-api-demande&rsquo;. Cela garantit que la variable Javascript <code>wpApiSettings.root<\/code>est disponible et contient l&rsquo;URL racine de l&rsquo;API REST. Voici un exemple de la fa\u00e7on dont vous mettriez votre script en file d&rsquo;attente pour illustrer cette d\u00e9pendance\u00a0;<\/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>Line <code>#5<\/code>est la plus int\u00e9ressante; o\u00f9 nous d\u00e9finissons \u00e0 la fois jQuery et <code>wp-api-request<\/code>comme d\u00e9pendance. Ensuite, dans notre fichier Javascript, nous pouvons effectuer une requ\u00eate API REST WP comme suit\u00a0:<\/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>C&rsquo;est aussi basique que possible. Nous utilisons <code>$.ajax()<\/code>pour envoyer une requ\u00eate GET \u00e0 l&rsquo;url d\u00e9finie. En tant qu&rsquo;URL, nous utilisons <code>wpApiSettings.root<\/code>pour obtenir l&rsquo;URL racine de l&rsquo;API REST, puis nous ajoutons le point de terminaison souhait\u00e9 apr\u00e8s celle-ci\u00a0; dans notre cas, le point de terminaison personnalis\u00e9 que nous avons cr\u00e9\u00e9 pr\u00e9c\u00e9demment. En option, nous pouvons passer des param\u00e8tres dans &lsquo;data&rsquo;. L&rsquo;exemple ci-dessus passe <code>product_id<\/code>avec la valeur 14 au point de terminaison. Enfin, dans la <code>success<\/code>fonction, nous recevons la demande (r\u00e9ussie) en tant que param\u00e8tre et nous sommes libres d&rsquo;en faire ce que nous voulons. Dans l&rsquo;exemple ci-dessus, nous l&rsquo;imprimons simplement sur la console.<\/p>\n<h3>Utilisation de la biblioth\u00e8que WordPress (non-jQuery)<\/h3>\n<p>Si votre site WordPress n&rsquo;a pas ou ne peut pas utiliser la biblioth\u00e8que jQuery, vous pouvez utiliser la biblioth\u00e8que Javascript de WordPress pour effectuer facilement une requ\u00eate API REST. La fonction est disponible dans l&rsquo;espace de noms <code>apiFetch<\/code>global de WordPress. est une m\u00e9thode wrapper pour la fonction standard du navigateur (qui est d\u00e9montr\u00e9e ensuite).<code>wp``wp.apiFetch()``fetch()<\/code><\/p>\n<p>Notre Javascript aura besoin de la d\u00e9pendance &lsquo;wp-api&rsquo; pour utiliser wp.apiFetch(). Par exemple, nous pourrions mettre le script en file d&rsquo;attente comme ceci\u00a0:<\/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>Vous trouverez la d\u00e9pendance critique \u00e0 la ligne <code>#5<\/code>. Avec cela, nous nous sommes assur\u00e9s que notre fichier Javascript est <code>wp.apiFetch()<\/code>disponible. Voici un exemple basique d&rsquo;utilisation\u00a0:<\/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>Gardez \u00e0 l&rsquo;esprit que la ligne <code>#9-13<\/code>n&rsquo;est qu&rsquo;une logique pour ex\u00e9cuter la fonction une fois que DOM est pr\u00eat.<\/p>\n<p>L&rsquo;un des avantages de l&rsquo;utilisation par <code>wp.apiFetch()<\/code>rapport \u00e0 la normale <code>fetch()<\/code>est que nous pouvons utiliser &lsquo;path&rsquo; qui ne n\u00e9cessite que le point de terminaison, au lieu de &lsquo;url&rsquo; qui n\u00e9cessite l&rsquo;URL compl\u00e8te. Un autre avantage est que la premi\u00e8re &quot;cha\u00eene&quot; de <code>.then()<\/code>renvoie les donn\u00e9es d\u00e9j\u00e0 format\u00e9es en JSON. Lorsque vous utilisez l&rsquo;original <code>.fetch()<\/code>, vous avez besoin de plus de cha\u00eenes &quot;.then()&quot;. Jetez un \u0153il \u00e0 l&rsquo;exemple suivant (&quot;Utiliser du Javascript vanille&quot;) pour voir ce que je veux dire.<\/p>\n<p>Gardez \u00e0 l&rsquo;esprit que <code>fetch()<\/code>(et par cons\u00e9quent <code>wp.apiFetch()<\/code>) ne <a href=\"https:\/\/github.com\/github\/fetch\/issues\/256\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">fournit pas un moyen &quot;propre&quot; de passer des param\u00e8tres<\/a>. Nous devrons construire manuellement la cha\u00eene de requ\u00eate GET dans &lsquo;path&rsquo;, comme je l&rsquo;ai fait ci-dessus\u00a0: <code>'..\/getsomedata?product_id=14'<\/code>.<\/p>\n<p>Si vous souhaitez savoir comment incorporer <code>wp.apiFetch<\/code>et personnaliser des points de terminaison dans un bloc Gutenberg, j&rsquo;ai \u00e9crit un tutoriel s\u00e9par\u00e9 \u00e0 ce sujet\u00a0:<\/p>\n<h3>Utilisation de Javascript vanille<\/h3>\n<p>Comme dernier exemple de m\u00e9thodes Javascript pour envoyer une requ\u00eate \u00e0 l&rsquo;API WP REST, il existe une mani\u00e8re purement vanille, non-WordPress, d&rsquo;utiliser <code>fetch()<\/code>. Veuillez noter que j&rsquo;utilise la variable globale WordPress pour obtenir l&rsquo;URL racine REST. Si vous ajoutez ce script en dehors de WordPress, vous devrez probablement coder en dur l&rsquo;URL compl\u00e8te.<\/p>\n<p>Puisque je veux toujours acc\u00e9der \u00e0 la variable globale pour l&rsquo;URL racine WP REST, j&rsquo;ajoute <code>'wp-api-request'<\/code>une d\u00e9pendance \u00e0 ma fonction de mise en file d&rsquo;attente Javascript, comme suit\u00a0:<\/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>Et puis dans notre fichier Javascript un exemple le plus basique serait :<\/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>Comme mentionn\u00e9 ci-dessus (&quot;Utilisation de la biblioth\u00e8que WordPress&quot;) <code>.fetch()<\/code>ne prend pas en charge une mani\u00e8re agr\u00e9able et propre de fournir des param\u00e8tres. Vous devrez donc cr\u00e9er manuellement la cha\u00eene de requ\u00eate (&quot;?product_id=14&quot;) dans l&rsquo;URL.<\/p>\n<p>Gardez \u00e0 l&rsquo;esprit que la requ\u00eate d&rsquo;extraction ne revient pas directement avec les donn\u00e9es &#8211; elle renvoie une promesse. C&rsquo;est pourquoi nous devons encha\u00eener &quot; <code>.then()<\/code>&quot; avant de pouvoir g\u00e9rer les donn\u00e9es. Si cela ne vous semble pas familier, je vous recommande de rechercher comment travailler avec <code>fetch()<\/code>&#8211; il existe de nombreuses explications et exemples sur Google qui peuvent l&rsquo;expliquer mieux que moi.<\/p>\n<p>Si vous souhaitez v\u00e9rifier le code d&rsquo;\u00e9tat de la r\u00e9ponse REST \u00e0 votre demande, vous pouvez le faire ainsi\u00a0;<\/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>Dans l&rsquo;exemple ci-dessus lors de l&rsquo;enregistrement de points de terminaison personnalis\u00e9s, j&rsquo;ai mentionn\u00e9 comment vous pouvez renvoyer diff\u00e9rents codes d&rsquo;\u00e9tat HTTP. Le code ci-dessus montre un exemple de v\u00e9rification du code d&rsquo;\u00e9tat de la r\u00e9ponse, qui est disponible dans la <code>.status<\/code>propri\u00e9t\u00e9 de l&rsquo;objet renvoy\u00e9. Dans l&rsquo;exemple ci-dessus, je v\u00e9rifie si le code d&rsquo;\u00e9tat est diff\u00e9rent de 200 (Succ\u00e8s) \u00e0 la ligne <code>#5<\/code>. Ce n&rsquo;est que si le code d&rsquo;\u00e9tat \u00e9tait 200 que je convertis le retour de donn\u00e9es de la promesse en JSON (ligne <code>#9<\/code>).<\/p>\n<h3>Utiliser PHP<\/h3>\n<p>Il est moins courant, mais toujours possible, d&rsquo;effectuer une requ\u00eate REST en interne dans WordPress en utilisant PHP. Voici comment.<\/p>\n<p>Afin d&rsquo;envoyer une requ\u00eate WP REST API en PHP, nous cr\u00e9ons un <code>WP_REST_Request<\/code>objet (exactement comme ce qui est pass\u00e9 \u00e0 notre fonction de rappel plus t\u00f4t dans ce post). Dans cette instance d&rsquo;objet, nous d\u00e9finissons la m\u00e9thode (par exemple GET) et le chemin du point de terminaison. En option, nous pouvons \u00e9galement ajouter des param\u00e8tres. Ensuite, nous utilisons la fonction WordPress <code>[rest_do_request](https:\/\/developer.wordpress.org\/reference\/functions\/rest_do_request\/)()<\/code>avec cette instance de requ\u00eate. Enfin, nous obtenons la r\u00e9ponse avec la <code>[response_to_data](https:\/\/developer.wordpress.org\/reference\/classes\/wp_rest_server\/response_to_data\/)()<\/code>fonction disponible dans <code>WP_REST_Server'<\/code>la classe 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>L&rsquo;appel de fonction <code>set_query_params()<\/code>(line <code>#3-5<\/code>) est facultatif et uniquement n\u00e9cessaire si vous souhaitez passer des param\u00e8tres. En suivant le fil rouge de cet article, j&rsquo;inclurai un exemple de transmission du param\u00e8tre de la fonction \u00e0 la cl\u00e9 de param\u00e8tre REST <code>product_id<\/code>.<\/p>\n<p>La ligne <code>#6<\/code>est l&rsquo;endroit o\u00f9 nous envoyons la demande. Et \u00e0 la ligne <code>#7<\/code>nous renvoyons les donn\u00e9es de la r\u00e9ponse. Donc, si nous devions appeler cette fonction PHP, par exemple, <code>awp_do_php_rest_request( 14 )<\/code>nous obtiendrions alors la r\u00e9ponse que nous avons d\u00e9finie dans ce point de terminaison (un tableau avec une cha\u00eene si vous utilisez toujours le m\u00eame exemple qu&rsquo;au d\u00e9but de cet article).<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Source d&rsquo;enregistrement:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/awhitepixel.com\" class=\"external external_icon\">awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Comment cr\u00e9er des points de terminaison WordPress REST personnalis\u00e9s et diff\u00e9rentes m\u00e9thodes pour leur envoyer des requ\u00eates. Exemples en PHP, jQuery et Javascript vanilla.<\/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":[915,893,893,717,717,936,936,915,1110,841,841,862,862],"tags":[1167],"class_list":["post-234269","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-autre","category-code-2","category-developpeur","category-gutenberg-3","category-n-a","category-tutoriels","category-wordpress-3","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/234269","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/comments?post=234269"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/234269\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/151729"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=234269"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=234269"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=234269"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}