{"id":70908,"date":"2023-07-13T12:05:13","date_gmt":"2023-07-13T11:05:13","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=70908&#038;preview=true&#038;preview_id=70908"},"modified":"2023-10-11T15:46:42","modified_gmt":"2023-10-11T14:46:42","slug":"api-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/api-wordpress\/","title":{"rendered":"Comment cr\u00e9er un site WordPress avec l&rsquo;API Kinsta"},"content":{"rendered":"<p><a href=\"https:\/\/kinsta.com\/wordpress\/\">WordPress<\/a> est un syst\u00e8me de gestion de contenu populaire qui \u00e9quipe des millions de sites web sur l&rsquo;internet. Il offre une interface conviviale et un large \u00e9ventail d&rsquo;options de personnalisation.<\/p>\n<p>La cr\u00e9ation de sites WordPress peut prendre beaucoup de temps, en particulier lorsqu&rsquo;il s&rsquo;agit d&rsquo;effectuer manuellement des t\u00e2ches r\u00e9p\u00e9titives. Kinsta a simplifi\u00e9 et <a href=\"https:\/\/kinsta.com\/fr\/docs\/hebergement-wordpress\/premiers-pas-wordpress\/nouveau-site\/\">acc\u00e9l\u00e9r\u00e9 ce processus<\/a> avec le tableau de bord <a href=\"https:\/\/my.kinsta.com\/?lang=fr\">MyKinsta<\/a>, qui fournit \u00e9galement un <a href=\"https:\/\/kinsta.com\/fr\/docs\/hebergement-wordpress\/domaines-wordpress\/url-wordpress-temporaire\/\">domaine temporaire<\/a> pour des tests imm\u00e9diats. Cependant, l&rsquo;introduction de l&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/docs\/api-kinsta\/\">API de Kinsta<\/a> signifie que les <a href=\"https:\/\/kinsta.com\/fr\/blog\/types-de-developpeurs\/\">d\u00e9veloppeurs<\/a> peuvent am\u00e9liorer le flux de travail de cr\u00e9ation de sites et d\u00e9velopper des interfaces personnalis\u00e9es pour r\u00e9pondre \u00e0 des besoins sp\u00e9cifiques.<\/p>\n<p>Ce tutoriel vise \u00e0 exploiter la puissance de l&rsquo;API Kinsta pour cr\u00e9er des sites WordPress. Nous utilisons la biblioth\u00e8que <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-react-js\/\">React<\/a> JavaScript pour montrer comment construire une application qui cr\u00e9e des sites WordPress sans MyKinsta.<\/p>\n<p>Voici une d\u00e9monstration en direct de l&rsquo;<a href=\"https:\/\/site-builder-ndg9i.kinsta.app\/\">application de cr\u00e9ation de sites<\/a>.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/site-builder-application.gif\" alt=\"Application de cr\u00e9ation de site.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Application de cr\u00e9ation de site.<\/figcaption><\/figure>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Comprendre l&rsquo;API de Kinsta<\/h2>\n<p>L&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/changelog\/api-kinsta\/\">API de Kinsta<\/a> est un outil puissant qui vous permet d&rsquo;interagir avec la plateforme d&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/hebergement-wordpress\/\">h\u00e9bergement WordPress infog\u00e9r\u00e9 de Kinsta<\/a> de mani\u00e8re programmatique. Il peut vous aider \u00e0 automatiser diverses t\u00e2ches li\u00e9es aux services fournis par Kinsta, y compris la cr\u00e9ation de sites, la r\u00e9cup\u00e9ration d&rsquo;informations sur les sites, l&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/blog\/cle-api-kinsta\/#how-to-use-kinsta-api-to-build-a-status-checker\">obtention du statut d&rsquo;un site<\/a>, et bien plus encore.<\/p>\n<p>Cette API simplifie la cr\u00e9ation de sites WordPress, ce qui en fait un outil pr\u00e9cieux pour les d\u00e9veloppeurs. Pour utiliser l&rsquo;API de Kinsta, vous devez avoir un compte avec au moins un site, une <a href=\"https:\/\/sevalla.com\/application-hosting\/\">application<\/a> ou une <a href=\"https:\/\/sevalla.com\/database-hosting\/\">base de donn\u00e9es<\/a> WordPress dans MyKinsta. Vous devez \u00e9galement g\u00e9n\u00e9rer une cl\u00e9 API pour vous authentifier et acc\u00e9der \u00e0 votre compte via l&rsquo;API.<\/p>\n<p>Pour g\u00e9n\u00e9rer une cl\u00e9 API :<\/p>\n<ol start=\"1\">\n<li>Allez sur votre tableau de bord MyKinsta.<\/li>\n<li>Naviguez jusqu&rsquo;\u00e0 la page des <strong>cl\u00e9s API <\/strong>(<strong>Votre nom<\/strong> &gt; <strong>R\u00e9glages de l&rsquo;entreprise &gt; Cl\u00e9s API<\/strong>).<\/li>\n<li>Cliquez sur <strong>Cr\u00e9er une cl\u00e9 API<\/strong>.<\/li>\n<li>Choisissez une date d&rsquo;expiration ou d\u00e9finissez une date de d\u00e9but personnalis\u00e9e et un nombre d&rsquo;heures pour l&rsquo;expiration de la cl\u00e9.<\/li>\n<li>Donnez un nom unique \u00e0 la cl\u00e9.<\/li>\n<li>Cliquez sur <strong>G\u00e9n\u00e9rer<\/strong>.<\/li>\n<\/ol>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/create-api-key-on-mykinsta.jpg\" alt=\"Cr\u00e9ez une cl\u00e9 API sur MyKinsta.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Cr\u00e9ez une cl\u00e9 API sur MyKinsta.<\/figcaption><\/figure>\n<p>Apr\u00e8s avoir cr\u00e9\u00e9 une cl\u00e9 API, copiez-la et conservez-la dans un endroit s\u00fbr (nous vous recommandons d&rsquo;utiliser un <a href=\"https:\/\/kinsta.com\/fr\/blog\/gestionnaires-mots-passe\/\">gestionnaire de mot de passe<\/a>), car c&rsquo;est la <strong>seule fois o\u00f9<\/strong> elle sera r\u00e9v\u00e9l\u00e9e dans MyKinsta. Vous pouvez g\u00e9n\u00e9rer plusieurs cl\u00e9s API &#8211; elles sont list\u00e9es sur la page <strong>Cl\u00e9s API<\/strong>. Si vous devez r\u00e9voquer une cl\u00e9 API, cliquez sur <strong>R\u00e9voquer<\/strong> \u00e0 c\u00f4t\u00e9 de celle que vous souhaitez r\u00e9voquer.<\/p>\n<h2>Cr\u00e9er un site WordPress avec l&rsquo;API Kinsta<\/h2>\n<p>Maintenant que votre cl\u00e9 API est pr\u00eate, cr\u00e9ons un site WordPress avec l&rsquo;API Kinsta. Pour cela, utilisez le point de terminaison <code><a href=\"https:\/\/api-docs.kinsta.com\/tag\/WordPress-Sites#operation\/addWordPressSite\" target=\"_blank\" rel=\"noopener noreferrer\">\/sites<\/a><\/code> qui attend une charge utile contenant les donn\u00e9es suivantes :<\/p>\n<ul>\n<li><strong>company :<\/strong> Ce param\u00e8tre attend un identifiant unique de l&rsquo;entreprise qui peut \u00eatre trouv\u00e9 dans les r\u00e9glages de MyKinsta. Il permet d&rsquo;identifier la soci\u00e9t\u00e9 associ\u00e9e au site WordPress.<\/li>\n<li><strong>display_name :<\/strong> Le nom d&rsquo;affichage, qui est le m\u00eame que le nom du site sur MyKinsta, vous aide \u00e0 identifier votre site. Utilis\u00e9 uniquement dans MyKinsta. Il est utilis\u00e9 pour le domaine temporaire de votre site WordPress et de votre <a href=\"https:\/\/kinsta.com\/fr\/blog\/tableau-de-bord-admin-wordpress\/\">administrateur WordPress<\/a> (pour l&rsquo;API Kinsta, il s&rsquo;agit de <em>display_name.kinsta.cloud<\/em> et <em>display_name.kinsta.cloud\/wp-admin<\/em>).<\/li>\n<li><strong>region :<\/strong> Ce param\u00e8tre vous permet de choisir parmi 27 l&#8217;emplacement du centre de donn\u00e9es pour votre site web. La s\u00e9lection d&rsquo;une r\u00e9gion proche de votre public cible peut contribuer \u00e0 am\u00e9liorer les performances et la vitesse du site web (voir la <a href=\"https:\/\/kinsta.com\/fr\/docs\/information-service\/emplacements-centre-de-donnees\/\">liste des r\u00e9gions disponibles<\/a>).<\/li>\n<li><strong>install_mode :<\/strong> Ce param\u00e8tre d\u00e9termine le type d&rsquo;installation de WordPress. La valeur par d\u00e9faut est \u00ab plain \u00bb, ce qui permet de cr\u00e9er un site WordPress normal. D&rsquo;autres options incluent \u00ab new \u00bb pour une nouvelle installation et d&rsquo;autres modes en fonction des besoins sp\u00e9cifiques.<\/li>\n<li><strong>is_subdomain_multisite : <\/strong>Ce param\u00e8tre bool\u00e9en (true\/false) indique si le site WordPress doit \u00eatre configur\u00e9 comme un multisite utilisant des sous-domaines.<\/li>\n<li><strong>admin_email :<\/strong> Ce param\u00e8tre attend l&rsquo;adresse e-mail de l&rsquo;administrateur de WordPress. Il est utilis\u00e9 \u00e0 des fins administratives et pour recevoir des notifications importantes.<\/li>\n<li><strong>admin_password :<\/strong> Ce param\u00e8tre est utilis\u00e9 pour d\u00e9finir le mot de passe du compte utilisateur de l&rsquo;administrateur de WordPress. Choisissez un mot de passe s\u00fbr pour prot\u00e9ger votre site.<\/li>\n<li><strong>admin_user :<\/strong> Ce param\u00e8tre d\u00e9finit le nom d&rsquo;utilisateur du compte d&rsquo;utilisateur administrateur de WordPress. Il est utilis\u00e9 pour se connecter au tableau de bord de WordPress et g\u00e9rer le site.<\/li>\n<li><strong>is_multisite :<\/strong> Similaire \u00e0 <code>is_subdomain_multisite<\/code>, ce param\u00e8tre bool\u00e9en d\u00e9termine si le site WordPress doit \u00eatre configur\u00e9 comme un multisite.<\/li>\n<li><strong>site_title :<\/strong> Ce param\u00e8tre repr\u00e9sente le titre de votre site WordPress. Il appara\u00eet en haut de chaque page du site. Vous pouvez toujours le modifier ult\u00e9rieurement.<\/li>\n<li><strong>woocommerce :<\/strong> Ce param\u00e8tre bool\u00e9en indique si vous souhaitez installer l&rsquo;extension WooCommerce lors de la cr\u00e9ation du site WordPress.<\/li>\n<li><strong>wordpressseo :<\/strong> Ce param\u00e8tre contr\u00f4le l&rsquo;installation de l&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/blog\/yoast-seo\/\">extension Yoast SEO<\/a> lors de la cr\u00e9ation du site.<\/li>\n<li><strong>wp_language :<\/strong> Ce param\u00e8tre attend une cha\u00eene de caract\u00e8res qui repr\u00e9sente la langue\/locale de votre site WordPress (d\u00e9couvrez votre <a href=\"https:\/\/translate.wordpress.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">locale WordPress ici<\/a>).<\/li>\n<\/ul>\n<p>Maintenant que vous comprenez chaque param\u00e8tre. Voici un exemple de ce \u00e0 quoi ressemble la charge utile que vous envoyez \u00e0 l&rsquo;API Kinsta :<\/p>\n<pre><code class=\"language-json\">{\n  \"company\": \"54fb80af-576c-4fdc-ba4f-b596c83f15a1\",\n  \"display_name\": \"First site\",\n  \"region\": \"us-central1\",\n  \"install_mode\": \"new\",\n  \"is_subdomain_multisite\": false,\n  \"admin_email\": \"admin@example.com\",\n  \"admin_password\": \"vJnFnN-~v)PxF[6k\",\n  \"admin_user\": \"admin\",\n  \"is_multisite\": false,\n  \"site_title\": \"My First Site\",\n  \"woocommerce\": false,\n  \"wordpressseo\": false,\n  \"wp_language\": \"en_US\"\n}<\/code><\/pre>\n<p>En utilisant votre mode pr\u00e9f\u00e9r\u00e9, vous pouvez envoyer une requ\u00eate POST \u00e0 l&rsquo;API de Kinsta ; il vous suffit de d\u00e9finir votre cl\u00e9 API pour cr\u00e9er un site WordPress. Pour cet exemple, utilisons l&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/blog\/requetes-http-javascript\/#4-how-to-make-an-http-request-in-javascript-using-the-fetch-api\">API JavaScript Fetch<\/a>:<\/p>\n<pre><code class=\"language-jsx\">const createWPSite = async () =&gt; {\n    const resp = await fetch(\n        `https:\/\/api.kinsta.com\/v2\/sites`,\n        {\n          method: 'POST',\n          headers: {\n            'Content-Type': 'application\/json',\n            Authorization: 'Bearer &lt;YOUR_KEY_HERE&gt;'\n          },\n          body: JSON.stringify({\n            company: '54fb80af-576c-4fdc-ba4f-b596c83f15a1',\n            display_name: 'First site',\n            region: 'us-central1',\n            install_mode: 'new',\n            is_subdomain_multisite: false,\n            admin_email: 'admin@example.com',\n            admin_password: 'vJnFnN-~v)PxF[6k',\n            admin_user: 'admin',\n            is_multisite: false,\n            site_title: 'My First Site',\n            woocommerce: false,\n            wordpressseo: false,\n            wp_language: 'en_US'\n          })\n        }\n      );\n      \n      const data = await resp.json();\n      console.log(data);\n}<\/code><\/pre>\n<p>Le code ci-dessus utilise l&rsquo;API JavaScript Fetch pour envoyer une requ\u00eate POST \u00e0 l&rsquo;API Kinsta afin de cr\u00e9er un site WordPress. La fonction <code>createWPSite<\/code> g\u00e8re le processus. Dans la fonction, une requ\u00eate Fetch est faite \u00e0 l&rsquo;adresse <code>\/sites<code> endpoint with the necessary data.<\/code><\/code><\/p>\n<p>La r\u00e9ponse est analys\u00e9e en JSON \u00e0 l&rsquo;aide de <code>resp.json()<\/code>, et le r\u00e9sultat est enregistr\u00e9 dans la console. Assurez-vous de remplacer <code>&lt;YOUR_KEY_HERE&gt;<\/code> par votre cl\u00e9 API, ajustez les valeurs de la charge utile et appelez <code>createWPSite()<\/code> pour cr\u00e9er un site WordPress \u00e0 l&rsquo;aide de l&rsquo;API Kinsta.<\/p>\n<p>Voici \u00e0 quoi ressemble la r\u00e9ponse :<\/p>\n<pre><code class=\"language-json\">{\n    \"operation_id\": \"sites:add-54fb80af-576c-4fdc-ba4f-b596c83f15a1\",\n    \"message\": \"Adding site in progress\",\n    \"status\": 202\n}<\/code><\/pre>\n<h3>Suivi des op\u00e9rations avec l&rsquo;API Kinsta<\/h3>\n<p>Une fois que vous avez lanc\u00e9 la cr\u00e9ation d&rsquo;un site avec l&rsquo;API Kinsta, il est important de suivre la progression de l&rsquo;op\u00e9ration. Cela peut \u00eatre fait de mani\u00e8re programmatique sans avoir \u00e0 v\u00e9rifier MyKinsta avec le point de terminaison de l&rsquo;API Kinsta <code><a href=\"https:\/\/api-docs.kinsta.com\/tag\/Operations#operation\/getOperationStatus\" target=\"_blank\" rel=\"noopener noreferrer\">\/operations<\/a><\/code> de l&rsquo;API Kinsta.<\/p>\n<p>Pour suivre les op\u00e9rations, utilisez <code>operation_id<\/code> obtenu lors de l&rsquo;initiation d&rsquo;une op\u00e9ration, comme la cr\u00e9ation d&rsquo;un site WordPress. Passez le <code>operation_id<\/code> comme param\u00e8tre au point de terminaison <code>\/operations<\/code>.<\/p>\n<pre><code class=\"language-jsx\">const operationId = 'YOUR_operation_id_PARAMETER';\nconst resp = await fetch(\n  `https:\/\/api.kinsta.com\/v2\/operations\/${operationId}`,\n  {\n    method: 'GET',\n    headers: {\n      Authorization: 'Bearer &lt;YOUR_TOKEN_HERE&gt;'\n    }\n  }\n);\nconst data = await resp.json();\nconsole.log(data);<\/code><\/pre>\n<p>Le code ci-dessus r\u00e9cup\u00e8re des informations sur une op\u00e9ration en envoyant une requ\u00eate GET au point de terminaison <code>\/operations<\/code> avec l&rsquo;adresse <code>operation_id<\/code> appropri\u00e9e. La requ\u00eate inclut la <a href=\"https:\/\/kinsta.com\/fr\/blog\/cle-api-kinsta\/\">cl\u00e9 API<\/a> pour l&rsquo;authentification.<\/p>\n<p>Lorsque les donn\u00e9es de r\u00e9ponse sont re\u00e7ues de l&rsquo;API, elles sont enregistr\u00e9es dans la console. La r\u00e9ponse fournit des informations pr\u00e9cieuses sur l&rsquo;\u00e9tat et la progression de l&rsquo;op\u00e9ration. Par exemple, si la cr\u00e9ation d&rsquo;un site WordPress est toujours en cours, la r\u00e9ponse ressemble \u00e0 ceci :<\/p>\n<pre><code class=\"language-json\">{\n    \"status\": 202,\n    \"message\": \"Operation in progress\",\n    \"data\": null\n}<\/code><\/pre>\n<p>De m\u00eame, une fois l&rsquo;op\u00e9ration termin\u00e9e avec succ\u00e8s, voici la r\u00e9ponse :<\/p>\n<pre><code class=\"language-json\">{\n    \"message\": \"Successfully finished request\",\n    \"status\": 200,\n    \"data\": null\n}<\/code><\/pre>\n<p>\u00c0 ce stade, vous pouvez cr\u00e9er un site WordPress de mani\u00e8re programmatique et v\u00e9rifier son fonctionnement \u00e0 l&rsquo;aide de l&rsquo;API de Kinsta. Pour am\u00e9liorer cette fonctionnalit\u00e9, allons plus loin et d\u00e9veloppons une interface utilisateur (IU) personnalis\u00e9e qui peut g\u00e9rer ces op\u00e9rations. De cette fa\u00e7on, m\u00eame les personnes sans expertise technique peuvent profiter des capacit\u00e9s de l&rsquo;API.<\/p>\n<h2>Cr\u00e9ation d&rsquo;une application React pour cr\u00e9er un site WordPress avec l&rsquo;API Kinsta<\/h2>\n<p>Pour commencer, mettez en place une structure de projet React et installez les d\u00e9pendances n\u00e9cessaires. Int\u00e9grez l&rsquo;API Kinsta dans votre application React avec Fetch API ou d&rsquo;autres biblioth\u00e8ques de <a href=\"https:\/\/kinsta.com\/fr\/blog\/requetes-http-javascript\/\">requ\u00eates HTTP<\/a>, comme Axios.<\/p>\n<h3>Pr\u00e9-requis<\/h3>\n<p>Pour suivre ce projet, il est conseill\u00e9 d&rsquo;avoir une compr\u00e9hension de base de <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-ce-que-le-html\/\">HTML<\/a>, <a href=\"https:\/\/kinsta.com\/fr\/blog\/meilleurs-pratiques-css\/\">CSS<\/a> et <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a> et une certaine familiarit\u00e9 avec React. L&rsquo;objectif principal de ce projet est de d\u00e9montrer l&rsquo;utilisation de l&rsquo;API Kinsta, c&rsquo;est pourquoi cet article n&rsquo;entre pas dans les d\u00e9tails de la cr\u00e9ation ou du style de l&rsquo;interface utilisateur.<\/p>\n<h3>Pour commencer<\/h3>\n<p>Pour simplifier le processus de configuration du projet, un projet de d\u00e9marrage a \u00e9t\u00e9 pr\u00e9par\u00e9 pour vous. Suivez les \u00e9tapes suivantes pour commencer :<\/p>\n<p>1. Cr\u00e9ez un d\u00e9p\u00f4t <a href=\"https:\/\/kinsta.com\/fr\/sujets\/git\/\">Git<\/a> en utilisant <a href=\"https:\/\/github.com\/kinsta\/site-builder\" target=\"_blank\" rel=\"noopener noreferrer\">ce mod\u00e8le sur GitHub<\/a>. S\u00e9lectionnez <strong>Utiliser ce mod\u00e8le<\/strong> &gt; <strong>Cr\u00e9er un nouveau d\u00e9p\u00f4t<\/strong> pour copier le code de d\u00e9marrage dans un nouveau d\u00e9p\u00f4t au sein de votre compte GitHub, et assurez-vous de cocher la case pour <strong>inclure toutes les branches<\/strong>.<\/p>\n<p>2. Transf\u00e9rez le d\u00e9p\u00f4t sur votre ordinateur local et passez au r\u00e9pertoire <strong><a href=\"https:\/\/github.com\/kinsta\/site-builder\/tree\/starter-files\" target=\"_blank\" rel=\"noopener noreferrer\">starter-files<\/a><\/strong> \u00e0 l&rsquo;aide de la commande ci-dessous :<\/p>\n<pre><code class=\"language-bash\">git checkout starter-files<\/code><\/pre>\n<p>3. Installez les d\u00e9pendances n\u00e9cessaires en ex\u00e9cutant la commande <code>npm install<\/code>. Une fois l&rsquo;installation termin\u00e9e, vous pouvez lancer le projet sur votre ordinateur local en ex\u00e9cutant la commande <code>npm run start<\/code>. Le projet s&rsquo;ouvre alors \u00e0 l&rsquo;adresse <strong><a href=\"http:\/\/localhost:3000\/\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/localhost:3000\/<\/a><\/strong>.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/site-builder-form.jpg\" alt=\"Formulaire de cr\u00e9ation de site.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Formulaire de cr\u00e9ation de site.<\/figcaption><\/figure>\n<h3>Comprendre les fichiers du projet<\/h3>\n<p>Le <strong>dossier src<\/strong> de ce projet comprend deux sous-dossiers principaux : <strong>components<\/strong> et <strong>pages<\/strong>. Le dossier components contient des composants r\u00e9utilisables, tels que le <strong>header<\/strong> et le <strong>footer<\/strong>, utilis\u00e9s dans les <strong>pages<\/strong> <strong>Home<\/strong> et <strong>Details<\/strong>.<\/p>\n<p>Dans ce projet, vous vous concentrerez principalement sur la mise en \u0153uvre de la logique sur les <strong>pages<\/strong> <strong>Accueil<\/strong> et <strong>D\u00e9tails<\/strong>, car le style et le routage sont d\u00e9j\u00e0 r\u00e9alis\u00e9s.<\/p>\n<p>La <strong>page d&rsquo;accueil<\/strong> comporte un formulaire qui recueille divers champs de donn\u00e9es qui sont transmis \u00e0 l&rsquo;API Kinsta. La r\u00e9ponse de cette page est stock\u00e9e dans localStorage (vous pouvez explorer d&rsquo;autres m\u00e9thodes pour stocker l&rsquo;identifiant de l&rsquo;op\u00e9ration, qui est crucial pour v\u00e9rifier le statut de l&rsquo;op\u00e9ration).<\/p>\n<p>Sur la <strong>page D\u00e9tails<\/strong>, l&rsquo;identifiant de l&rsquo;op\u00e9ration est extrait de loaclStoage et transmis au point de terminaison <code>\/operation<\/code> de l&rsquo;API Kinsta en tant que param\u00e8tre pour v\u00e9rifier l&rsquo;\u00e9tat de l&rsquo;op\u00e9ration. Dans ce projet, nous incluons un bouton qui permet aux utilisateurs de v\u00e9rifier le statut par intermittence (vous pouvez utiliser la m\u00e9thode <code>setInterval<\/code> pour automatiser ce processus).<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/site-builder-operation-information.jpg\" alt=\"Informations sur l'op\u00e9ration du constructeur de site.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Informations sur l&rsquo;op\u00e9ration du constructeur de site.<\/figcaption><\/figure>\n<h2>Interagir avec l&rsquo;API Kinsta dans React<\/h2>\n<p>L&rsquo;interface utilisateur (UI) \u00e9tant maintenant en place, votre prochaine \u00e9tape consiste \u00e0 g\u00e9rer l&rsquo;envoi du formulaire sur la <strong>page d&rsquo;accueil<\/strong> et \u00e0 envoyer une requ\u00eate POST au point de terminaison <code>\/sites<\/code> de l&rsquo;API Kinsta. Cette requ\u00eate inclut les donn\u00e9es du formulaire collect\u00e9es en tant que charge utile, ce qui nous permet de cr\u00e9er un site WordPress.<\/p>\n<p>Pour interagir avec l&rsquo;API Kinsta, vous avez besoin de l&rsquo;<strong>id de votre entreprise<\/strong> et de la <strong>cl\u00e9 API<\/strong>. Une fois que vous avez ces informations d&rsquo;identification, il est pr\u00e9f\u00e9rable de les stocker en toute s\u00e9curit\u00e9 en tant que variables d&rsquo;environnement dans votre application React.<\/p>\n<p>Pour configurer les variables d&rsquo;environnement, cr\u00e9ez un <strong> fichier .env<\/strong> dans le dossier racine de votre projet. Dans ce fichier, ajoutez les lignes suivantes :<\/p>\n<pre><code class=\"language-bash\">REACT_APP_KINSTA_COMPANY_ID = 'YOUR_COMPANY_ID' \nREACT_APP_KINSTA_API_KEY = 'YOUR_API_KEY'<\/code><\/pre>\n<p>Pour acc\u00e9der \u00e0 ces variables d&rsquo;environnement dans votre projet, vous pouvez utiliser la syntaxe <code>process.env.THE_VARIABLE<\/code>. Par exemple, pour acc\u00e9der \u00e0 <code>REACT_APP_KINSTA_COMPANY_ID<\/code>, vous devez utiliser <code>process.env.REACT_APP_KINSTA_COMPANY_ID<\/code>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Il est important d&rsquo;ajouter le <strong> fichier .env<\/strong> \u00e0 votre fichier <strong><a href=\"https:\/\/kinsta.com\/fr\/blog\/gitignore-ne-fonctionne-pas\/\">.gitignore<\/a><\/strong> afin d&rsquo;\u00e9viter qu&rsquo;il ne soit envoy\u00e9 sur GitHub. Cela permet de garantir que vos informations sensibles, telles que les cl\u00e9s d&rsquo;API, restent priv\u00e9es et s\u00e9curis\u00e9es.<\/p>\n<\/aside>\n\n<h3>R\u00e9cup\u00e9ration des donn\u00e9es du formulaire dans React<\/h3>\n<p>Le fichier <strong>Home.jsx<\/strong> contient un formulaire. Vous devez ajouter une logique au formulaire pour obtenir des donn\u00e9es et les valider lorsqu&rsquo;elles sont soumises. Pour r\u00e9cup\u00e9rer les donn\u00e9es du formulaire dans votre application React, utilisez l&rsquo;approche des composants contr\u00f4l\u00e9s de React avec le <code><a href=\"https:\/\/kinsta.com\/fr\/blog\/usestate-react\/\">useState<\/a><\/code> hook. Cette approche vous permet de cr\u00e9er un \u00e9tat pour chaque champ du formulaire et de le mettre \u00e0 jour au fur et \u00e0 mesure que l&rsquo;utilisateur saisit des donn\u00e9es.<\/p>\n<p>Tout d&rsquo;abord, importez le hook <code>useState<\/code> au d\u00e9but de votre fichier :<\/p>\n<pre><code class=\"language-jsx\">import React, { useState } from 'react';<\/code><\/pre>\n<p>Ensuite, configurez une variable d&rsquo;\u00e9tat pour chaque champ de formulaire dans votre composant fonctionnel. Par exemple, si vous avez un champ de saisie pour le titre du site, vous pouvez cr\u00e9er une variable d&rsquo;\u00e9tat appel\u00e9e <code>siteTitle<\/code>:<\/p>\n<pre><code class=\"language-jsx\">const [siteTitle, setSiteTitle] = useState('');<\/code><\/pre>\n<p>Ici, <code>siteTitle<\/code> est la variable d&rsquo;\u00e9tat qui contient la valeur du champ de saisie titre du site et <code>setSiteTitle<\/code> est la fonction de mise \u00e0 jour d&rsquo;\u00e9tat correspondante.<\/p>\n<p>Pour lier les champs du formulaire \u00e0 leurs valeurs d&rsquo;\u00e9tat respectives, ajoutez les attributs <code>value<\/code> et <code>onChange<\/code> \u00e0 chaque \u00e9l\u00e9ment de saisie. Par exemple, le champ de saisie de titre du site :<\/p>\n<pre><code class=\"language-jsx\">&lt;input\n  type=\"text\"\n  className=\"form-control\"\n  value={siteTitle}\n  onChange={(event) =&gt; setSiteTitle(event.target.value)}\n\/&gt;<\/code><\/pre>\n<p>Dans cet exemple, l&rsquo;attribut <code>value<\/code> est associ\u00e9 \u00e0 la variable d&rsquo;\u00e9tat <code>siteTitle<\/code>, ce qui garantit que le champ de saisie affiche la valeur actuelle de <code>siteTitle<\/code>. Le gestionnaire d&rsquo;\u00e9v\u00e9nements <code>onChange<\/code> est associ\u00e9 \u00e0 la fonction <code>setSiteTitle<\/code>, qui met \u00e0 jour l&rsquo;\u00e9tat <code>siteTitle<\/code> avec la nouvelle valeur chaque fois que l&rsquo;utilisateur tape dans le champ de saisie.<\/p>\n<p>En suivant cette approche pour chaque champ de formulaire, vous pouvez cr\u00e9er les variables d&rsquo;\u00e9tat n\u00e9cessaires et les mettre \u00e0 jour au fur et \u00e0 mesure que l&rsquo;utilisateur interagit avec le formulaire. Cela vous permet d&rsquo;acc\u00e9der facilement aux valeurs saisies lorsque le formulaire est soumis et d&rsquo;effectuer d&rsquo;autres actions ou validations avec les donn\u00e9es du formulaire.<\/p>\n<p>Lorsque vous proc\u00e9dez ainsi pour tous les champs du formulaire, votre fichier <strong>Home.jsx<\/strong> ressemble \u00e0 ceci :<\/p>\n<pre><code class=\"language-jsx\">import Header from '..\/components\/Header';\nimport Footer from '..\/components\/Footer';\n\nconst Home = () =&gt; {\n\n    return (\n        &lt;div className=\"app-container\"&gt;\n            &lt;Header \/&gt;\n            &lt;div className=\"container\"&gt;\n                &lt;div className=\"container-title\"&gt;\n                    &lt;h1&gt; className=\"title\"&gt;Site Builder with Kinsta API&lt;\/h1&gt;\n                    &lt;p&gt; className=\"description\"&gt;\n                        This is a React app that uses the Kinsta API to create WordPress sites, without needing to access MyKinsta dashboard.\n                    &lt;\/p&gt;\n                &lt;\/div&gt;\n                &lt;form&gt;\n                    &lt;div className=\"form-container\"&gt;\n                        &lt;div className=\"input-div\"&gt;\n                            &lt;label&gt;Display name&lt;\/label&gt;\n                            &lt;span&gt;Helps you identify your site. Only used in MyKinsta and temporary domain&lt;\/span&gt;\n                            &lt;input type=\"text\" className=\"form-control\" \/&gt;\n                            &lt;span&gt; className='error-message'&gt;Ensure this has more than 4 characters&lt;\/span&gt;\n                        &lt;\/div&gt;\n                        &lt;div className=\"input-div\"&gt;\n                            &lt;label&gt; WordPress site title&lt;\/label&gt;\n                            &lt;span&gt;Appears across the top of every page of the site. You can always change it later.&lt;\/span&gt;\n                            &lt;input type=\"text\" className=\"form-control\" \/&gt;\n                            &lt;span&gt; className='error-message'&gt;Ensure this has more than 4 characters&lt;\/span&gt;\n                        &lt;\/div&gt;\n                        &lt;div className=\"input-flex\"&gt;\n                            &lt;div className=\"input-div\"&gt;\n                                &lt;label&gt;WordPress admin username&lt;\/label&gt;\n                                &lt;input type=\"text\" className=\"form-control\" \/&gt;\n                            &lt;\/div&gt;\n                            &lt;div className=\"input-div\"&gt;\n                                &lt;label&gt;WordPress admin email&lt;\/label&gt;\n                                &lt;input type=\"email\" className=\"form-control\" \/&gt;\n                                &lt;span&gt; className='error-message'&gt;Ensure this is a valid email&lt;\/span&gt;\n                            &lt;\/div&gt;\n                        &lt;\/div&gt;\n                        &lt;div className=\"input-div\"&gt;\n                            &lt;label&gt;WordPress admin password&lt;\/label&gt;\n                            &lt;span&gt;Ensure you remember this password as it is what you'll use to log into WP-admin&lt;\/span&gt;\n                            &lt;input type=\"text\" className=\"form-control\" \/&gt;\n                        &lt;\/div&gt;\n                        &lt;div className=\"input-div\"&gt;\n                            &lt;label&gt;Data center location&lt;\/label&gt;\n                            &lt;span&gt;Allows you to place your website in a geographical location closest to your visitors.&lt;\/span&gt;\n                            &lt;select className=\"form-control\"&gt;\n                                &lt;option&gt; value=\"\"&gt;&lt;\/option&gt;\n                                {\/* add options *\/}\n                            &lt;\/select&gt;\n                        &lt;\/div&gt;\n                        &lt;div className=\"checkbox-flex\"&gt;\n                            &lt;div className=\"checkbox-input\"&gt;\n                                &lt;input type=\"checkbox\" \/&gt;\n                                &lt;label&gt;Install WooCommerce&lt;\/label&gt;\n                            &lt;\/div&gt;\n                            &lt;div className=\"checkbox-input\"&gt;\n                                &lt;input type=\"checkbox\" \/&gt;\n                                &lt;label&gt;Install Yoast SEO&lt;\/label&gt;\n                            &lt;\/div&gt;\n                        &lt;\/div&gt;\n                        &lt;button&gt; className='btn'&gt;Create Site&lt;\/button&gt;\n                    &lt;\/div&gt;\n                &lt;\/form&gt;\n            &lt;\/div&gt;\n            &lt;Footer \/&gt;\n        &lt;\/div &gt;\n    )\n}\n\nexport default Home;<\/code><\/pre>\n<h4>Mise en \u0153uvre de la validation des champs de formulaire avec le hook useRef<\/h4>\n<p>Pour mettre en \u0153uvre la validation des champs de formulaire dans React, nous pouvons suivre les \u00e9tapes suivantes. Concentrons-nous sur l&rsquo;impl\u00e9mentation de la validation pour les champs \u00ab Display name \u00bb et \u00ab WordPress admin email \u00bb.<\/p>\n<p>Tout d&rsquo;abord, nous devons cr\u00e9er des r\u00e9f\u00e9rences en utilisant le hook <code><a href=\"https:\/\/kinsta.com\/fr\/blog\/react-useref\/\">useRef<\/a><\/code> pour contr\u00f4ler l&rsquo;affichage des messages d&rsquo;erreur. Importez le hook <code>useRef<\/code> et cr\u00e9ez les r\u00e9f\u00e9rences n\u00e9cessaires pour chaque champ :<\/p>\n<pre><code class=\"language-jsx\">import { useRef } from 'react';\n\nconst displayNameRef = useRef(null);\nconst wpEmailRef = useRef(null);<\/code><\/pre>\n<p>Ensuite, nous attachons les r\u00e9f\u00e9rences aux \u00e9l\u00e9ments de message d&rsquo;erreur correspondants dans les champs du formulaire. Par exemple, pour le champ \u00ab Display name \u00bb, vous ajoutez le <code>ref<\/code> \u00e0 la balise <code>span<\/code>, qui contient le message d&rsquo;erreur :<\/p>\n<pre><code class=\"language-jsx\">&lt;div className=\"input-div\"&gt;\n    &lt;label&gt;Display name&lt;\/label&gt;\n    &lt;span&gt;Helps you identify your site. Only used in MyKinsta and temporary domain&lt;\/span&gt;\n    &lt;input type=\"text\" className=\"form-control\" value={displayName} onChange={(e) =&gt; setDisplayName(e.target.value)} \/&gt;\n    &lt;span className='error-message' ref={displayNameRef}&gt;Ensure this has more than 4 characters&lt;\/span&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>De m\u00eame, pour le champ \u00ab WordPress admin email \u00bb :<\/p>\n<pre><code class=\"language-jsx\">&lt;div className=\"input-div\"&gt;\n  &lt;label&gt;WordPress admin email&lt;\/label&gt;\n  &lt;input\n    type=\"email\"\n    className=\"form-control\"\n    value={wpAdminEmail}\n    onChange={(e) =&gt; setWpAdminEmail(e.target.value)}\n  \/&gt;\n  &lt;span&gt; className='error-message' ref={wpEmailRef}&gt;Ensure this is a valid email&lt;\/span&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Nous pouvons maintenant cr\u00e9er les fonctions de validation qui v\u00e9rifient les valeurs saisies et d\u00e9cident d&rsquo;afficher ou non les messages d&rsquo;erreur. Voici les fonctions pour \u00ab Display name \u00bb et \u00ab WordPress admin email \u00bb :<\/p>\n<pre><code class=\"language-jsx\">const checkDisplayName = () =&gt; {\n  if (displayName.length &lt; 4) {\n    displayNameRef.current.style.display = 'block';\n  } else {\n    displayNameRef.current.style.display = 'none';\n  }\n}\n\nconst checkWpAdminEmail = () =&gt; {\n  let regex = \/^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$\/;\n  if (!wpAdminEmail.match(regex)) {\n    wpEmailRef.current.style.display = 'block';\n  } else {\n    wpEmailRef.current.style.display = 'none';\n  }\n}<\/code><\/pre>\n<p>Ces fonctions sont appel\u00e9es chaque fois que les champs de saisie correspondants sont modifi\u00e9s. Elles comparent les valeurs de saisie aux crit\u00e8res de validation et mettent \u00e0 jour l&rsquo;affichage des messages d&rsquo;erreur en manipulant la propri\u00e9t\u00e9 <code>style.display<\/code> des \u00e9l\u00e9ments du message d&rsquo;erreur.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/site-builder-form-with-validation.jpg\" alt=\"Formulaire de construction de site avec validation.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Formulaire de construction de site avec validation.<\/figcaption><\/figure>\n<p>N&rsquo;h\u00e9sitez pas \u00e0 mettre en \u0153uvre des validations suppl\u00e9mentaires ou \u00e0 personnaliser la logique de validation en fonction de vos besoins.<\/p>\n<h3>Gestion de l&rsquo;envoi de formulaire dans React<\/h3>\n<p>Lorsque nous traitons l&rsquo;\u00e9v\u00e9nement d&rsquo;envoi de formulaire pour la cr\u00e9ation d&rsquo;un site, nous devons effectuer plusieurs t\u00e2ches. Tout d&rsquo;abord, nous attachons un gestionnaire d&rsquo;\u00e9v\u00e9nement <code>onSubmit<\/code> \u00e0 l&rsquo;\u00e9l\u00e9ment <code>&lt;form&gt;<\/code>. \u00c0 l&rsquo;int\u00e9rieur de la fonction <code>createSite<\/code>, nous emp\u00eachons le comportement d&rsquo;envoi de formulaire par d\u00e9faut en appelant <code>event.preventDefault()<\/code>. Cela nous permet de g\u00e9rer l&rsquo;envoi de mani\u00e8re programmatique.<\/p>\n<p>Pour nous assurer que les donn\u00e9es du formulaire sont valides avant de proc\u00e9der \u00e0 la soumission, nous invoquons les m\u00e9thodes de validation <code>checkDisplayName<\/code> et <code>checkWpAdminEmail<\/code>. Ces m\u00e9thodes v\u00e9rifient que les champs obligatoires r\u00e9pondent aux crit\u00e8res sp\u00e9cifi\u00e9s.<\/p>\n<pre><code class=\"language-jsx\">const createSite = (e) =&gt; {\n  e.preventDefault();\n\n  checkDisplayName();\n  checkWpAdminEmail();\n\n  \/\/ Additional logic\n};<\/code><\/pre>\n<p>Si toutes les validations sont r\u00e9ussies et que les champs obligatoires contiennent des donn\u00e9es valides, nous proc\u00e9dons \u00e0 l&rsquo;effacement de localStorage afin de garantir un \u00e9tat propre pour le stockage de la r\u00e9ponse de l&rsquo;API et du nom d&rsquo;affichage.<\/p>\n<p>Ensuite, faites une demande d&rsquo;API \u00e0 l&rsquo;API Kinsta \u00e0 l&rsquo;aide de la fonction fetch. La requ\u00eate est une m\u00e9thode POST vers le point de terminaison <strong>https:\/\/api.kinsta.com\/v2\/sites<\/strong>. Assurez-vous d&rsquo;inclure les en-t\u00eates n\u00e9cessaires et la charge utile en JSON.<\/p>\n<pre><code class=\"language-jsx\">const createSiteWithKinstaAPI = async () =&gt; {\n    const resp = await fetch(\n        `${KinstaAPIUrl}\/sites`,\n        {\n            method: 'POST',\n            headers: {\n                'Content-Type': 'application\/json',\n                Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`\n            },\n            body: JSON.stringify({\n                company: `${process.env.REACT_APP_KINSTA_COMPANY_ID}`,\n                display_name: displayName,\n                region: centerLocation,\n                install_mode: 'new',\n                is_subdomain_multisite: false,\n                admin_email: wpAdminEmail,\n                admin_password: wpAdminPassword,\n                admin_user: wpAdminUsername,\n                is_multisite: false,\n                site_title: siteTitle,\n                woocommerce: false,\n                wordpressseo: false,\n                wp_language: 'en_US'\n            })\n        }\n    );\n\n    \/\/ Handle the response data\n};<\/code><\/pre>\n<p>La charge utile contient divers champs de donn\u00e9es dont l&rsquo;API Kinsta a besoin, tels que l&rsquo;ID de l&rsquo;entreprise, le nom d&rsquo;affichage, la r\u00e9gion, le mode d&rsquo;installation, l&rsquo;e-mail de l&rsquo;administrateur, le mot de passe de l&rsquo;administrateur, etc. Ces valeurs sont obtenues \u00e0 partir des variables d&rsquo;\u00e9tat correspondantes.<\/p>\n<p>Apr\u00e8s avoir effectu\u00e9 la requ\u00eate API, nous attendons la r\u00e9ponse \u00e0 l&rsquo;aide de <code>await resp.json()<\/code> et extrayons les donn\u00e9es pertinentes. Nous cr\u00e9ons un nouvel objet <code>newData<\/code>, avec l&rsquo;ID de l&rsquo;op\u00e9ration et le nom d&rsquo;affichage, qui est ensuite stock\u00e9 dans le localStorage \u00e0 l&rsquo;aide de <code>localStorage.setItem<\/code>.<\/p>\n<pre><code class=\"language-jsx\">const createSiteWithKinstaAPI = async () =&gt; {\n    const resp = await fetch(\n        \/\/ Fetch request here\n    );\n\n    const data = await resp.json();\n    let newData = { operationId: data.operation_id, display_name: displayName };\n    localStorage.setItem('state', JSON.stringify(newData));\n    navigate('\/details');\n}<\/code><\/pre>\n<p>Enfin, nous invoquons la fonction <code>createSiteWithKinstaAPI<\/code> de sorte que lorsqu&rsquo;un utilisateur remplit le formulaire et clique sur le bouton, un site WordPress est cr\u00e9\u00e9 \u00e0 l&rsquo;aide de l&rsquo;API Kinsta. De plus, dans le code, il est mentionn\u00e9 que l&rsquo;utilisateur est redirig\u00e9 vers la page <strong>details.jsx<\/strong> pour garder une trace de l&rsquo;op\u00e9ration avec l&rsquo;API Kinsta. Pour activer la fonctionnalit\u00e9 de navigation, importez <code>useNavigate<\/code> depuis <code>react-router-dom<\/code> et initialisez-le.<\/p>\n<p>Rappel : Vous pouvez trouver le code complet de <a href=\"https:\/\/github.com\/kinsta\/site-builder\/blob\/starter-files\/src\/pages\/Home.jsx\">cette page sur le d\u00e9p\u00f4t GitHub<\/a>.<\/p>\n<h3>Mise en \u0153uvre de la v\u00e9rification de l&rsquo;\u00e9tat de l&rsquo;op\u00e9ration avec l&rsquo;API Kinsta<\/h3>\n<p>Afin de v\u00e9rifier le statut de l&rsquo;op\u00e9ration avec l&rsquo;API Kinsta, nous utilisons l&rsquo;identifiant de l&rsquo;op\u00e9ration qui a \u00e9t\u00e9 stock\u00e9 dans le localStorage. Cet identifiant d&rsquo;op\u00e9ration est extrait du localStorage \u00e0 l&rsquo;aide de <code>JSON.parse(localStorage.getItem('state'))<\/code> et assign\u00e9 \u00e0 une variable.<\/p>\n<p>Pour v\u00e9rifier le statut de l&rsquo;op\u00e9ration, faites une autre requ\u00eate \u00e0 l&rsquo;API Kinsta en envoyant une requ\u00eate GET au point de terminaison <code>\/operations\/{operationId}<\/code>. Cette requ\u00eate comprend les en-t\u00eates n\u00e9cessaires, tels que l&rsquo;en-t\u00eate Authorization contenant la cl\u00e9 API.<\/p>\n<pre><code class=\"language-jsx\">const [operationData, setOperationData] = useState({ message: \"Operation in progress\" });\nconst KinstaAPIUrl = 'https:\/\/api.kinsta.com\/v2';\nconst stateData = JSON.parse(localStorage.getItem('state'));\n\nconst checkOperation = async () =&gt; {\n    const operationId = stateData.operationId;\n    const resp = await fetch(\n        `${KinstaAPIUrl}\/operations\/${operationId}`,\n        {\n            method: 'GET',\n            headers: {\n                Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`\n            }\n        }\n    );\n    const data = await resp.json();\n    setOperationData(data);\n}<\/code><\/pre>\n<p>Une fois que nous avons re\u00e7u la r\u00e9ponse, nous extrayons les donn\u00e9es pertinentes de la r\u00e9ponse \u00e0 l&rsquo;aide de <code>await resp.json()<\/code>. Les donn\u00e9es de l&rsquo;op\u00e9ration sont ensuite mises \u00e0 jour dans l&rsquo;\u00e9tat \u00e0 l&rsquo;aide de <code>setOperationData(data)<\/code>.<\/p>\n<p>Dans l&rsquo;instruction de retour du composant, nous affichons le message de l&rsquo;op\u00e9ration \u00e0 l&rsquo;aide de <code>operationData.message<\/code>. Nous fournissons \u00e9galement un bouton qui permet \u00e0 l&rsquo;utilisateur de d\u00e9clencher manuellement la v\u00e9rification de l&rsquo;\u00e9tat de l&rsquo;op\u00e9ration en appelant <code>checkOperation<\/code>.<\/p>\n<p>En outre, si l&rsquo;\u00e9tat de l&rsquo;op\u00e9ration indique qu&rsquo;elle s&rsquo;est bien termin\u00e9e, l&rsquo;utilisateur peut utiliser les liens ajout\u00e9s pour acc\u00e9der \u00e0 l&rsquo;administration de WordPress et au site lui-m\u00eame. Les liens sont construits \u00e0 l&rsquo;aide du site <code>stateData.display_name<\/code> obtenu \u00e0 partir de localStorage.<\/p>\n<pre><code class=\"language-jsx\">&lt;a href={`http:\/\/${stateData.display_name}.kinsta.cloud\/wp-admin\/`} target=\"_blank\" rel=\"noreferrer\" className='detail-link'&gt;\n    &lt;p&gt;Open WordPress admin&lt;\/p&gt;\n    &lt;FiExternalLink \/&gt;\n&lt;\/a&gt;\n&lt;a href={`http:\/\/${stateData.display_name}.kinsta.cloud\/`} target=\"_blank\" rel=\"noreferrer\" className='detail-link'&gt;\n    &lt;p&gt;Open URL&lt;\/p&gt;\n    &lt;FiExternalLink \/&gt;\n&lt;\/a&gt;<\/code><\/pre>\n<p>En cliquant sur ces liens, l&rsquo;administrateur de WordPress et l&rsquo;URL du site s&rsquo;ouvrent respectivement dans un nouvel onglet, ce qui permet \u00e0 l&rsquo;utilisateur d&rsquo;y acc\u00e9der sans avoir \u00e0 naviguer vers MyKinsta.<\/p>\n<p>Vous pouvez d\u00e9sormais cr\u00e9er un site WordPress facilement via votre application personnalis\u00e9e.<\/p>\n<h2>Comment d\u00e9ployer votre application React avec Kinsta<\/h2>\n<p>Pour d\u00e9ployer votre projet React sur l&rsquo;<a href=\"https:\/\/sevalla.com\/application-hosting\/\">h\u00e9bergement d&rsquo;application<\/a> de Kinsta, vous devez pousser le projet sur votre <a href=\"https:\/\/docs.sevalla.com\/applications\/get-started\/add-an-application#adding-an-application\">fournisseur Git pr\u00e9f\u00e9r\u00e9<\/a>. Lorsque votre projet est h\u00e9berg\u00e9 sur <a href=\"https:\/\/kinsta.com\/fr\/blog\/base-de-connaissances-github\/\">GitHub<\/a>, <a href=\"https:\/\/kinsta.com\/fr\/blog\/gitlab-vs-github\/\">GitLab<\/a> ou <a href=\"https:\/\/kinsta.com\/fr\/blog\/bitbucket-vs-github\/\">Bitbucket<\/a>, vous pouvez proc\u00e9der au d\u00e9ploiement sur Kinsta.<\/p>\n<p>Pour d\u00e9ployer votre r\u00e9f\u00e9rentiel sur Kinsta, suivez les \u00e9tapes suivantes :<\/p>\n<ol start=\"1\">\n<li>Connectez-vous ou cr\u00e9ez votre compte Kinsta sur le tableau de bord MyKinsta.<\/li>\n<li>Dans la colonne lat\u00e9rale de gauche, cliquez sur \u00ab Applications \u00bb, puis sur \u00ab Ajouter un service \u00bb.<\/li>\n<li>S\u00e9lectionnez \u00ab Application \u00bb dans le menu d\u00e9roulant pour d\u00e9ployer une application React sur Kinsta.<\/li>\n<li>Dans la fen\u00eatre modale qui s&rsquo;affiche, choisissez le r\u00e9f\u00e9rentiel que vous souhaitez d\u00e9ployer. Si vous avez plusieurs branches, vous pouvez s\u00e9lectionner la branche souhait\u00e9e et donner un nom \u00e0 votre application.<\/li>\n<li>S\u00e9lectionnez l&rsquo;un des emplacements de centre de donn\u00e9es disponibles dans la liste des options 24. Kinsta d\u00e9tecte automatiquement la commande de d\u00e9marrage de votre application.<\/li>\n<\/ol>\n<p>Enfin, il n&rsquo;est pas s\u00fbr d&rsquo;envoyer les cl\u00e9s d&rsquo;API \u00e0 des h\u00f4tes publics comme votre fournisseur Git. Lors de l&rsquo;h\u00e9bergement, vous pouvez les ajouter en tant que <a href=\"https:\/\/docs.sevalla.com\/applications\/environment-variables\">variables d&rsquo;environnement<\/a> en utilisant le m\u00eame nom de variable et la m\u00eame valeur que ceux sp\u00e9cifi\u00e9s dans le <strong> fichier .env<\/strong>.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/set-environment-variables-on-mykinsta.jpg\" alt=\"D\u00e9finissez les variables d'environnement sur MyKinsta lors du d\u00e9ploiement.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">D\u00e9finissez les variables d&rsquo;environnement sur MyKinsta lors du d\u00e9ploiement.<\/figcaption><\/figure>\n<p>Une fois que vous avez lanc\u00e9 le d\u00e9ploiement de votre application, le processus commence et se termine g\u00e9n\u00e9ralement en quelques minutes. Un d\u00e9ploiement r\u00e9ussi g\u00e9n\u00e8re un lien vers votre application, comme <strong>https:\/\/site-builder-ndg9i.kinsta.app\/<\/strong>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Vous pouvez activer le d\u00e9ploiement automatique, de sorte que Kinsta red\u00e9ploie votre application chaque fois que vous modifiez votre base de code et que vous l&rsquo;envoyez \u00e0 votre h\u00f4te Git.<\/p>\n<\/aside>\n\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>Dans cet article, vous avez appris \u00e0 utiliser l&rsquo;API Kinsta de mani\u00e8re programmatique pour cr\u00e9er un site WordPress et int\u00e9grer l&rsquo;API dans une application React. N&rsquo;oubliez pas de garder votre cl\u00e9 API en s\u00e9curit\u00e9 et, lorsque vous pensez l&rsquo;avoir partag\u00e9e publiquement, r\u00e9voquez-la et cr\u00e9ez-en une nouvelle.<\/p>\n<p>L&rsquo;API Kinsta peut \u00eatre utilis\u00e9e non seulement pour cr\u00e9er un site WordPress, mais aussi pour r\u00e9cup\u00e9rer des informations sur vos sites WordPress, vos domaines et bien d&rsquo;autres choses encore. Elle peut \u00e9galement acc\u00e9der aux services <a href=\"https:\/\/kinsta.com\/fr\/\">Kinsta<\/a> tels que les bases de donn\u00e9es et les applications.<\/p>\n<p><em>Quel point de terminaison aimeriez-vous voir ajout\u00e9 \u00e0 l&rsquo;API Kinsta, et qu&rsquo;aimeriez-vous que nous construisions avec l&rsquo;API Kinsta ? Faites-le nous savoir dans les commentaires.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>WordPress est un syst\u00e8me de gestion de contenu populaire qui \u00e9quipe des millions de sites web sur l&rsquo;internet. Il offre une interface conviviale et un large &#8230;<\/p>\n","protected":false},"author":287,"featured_media":70909,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[953,1039,1020,985],"class_list":["post-70908","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-api","topic-conseils-wordpress","topic-outils-developpement-web","topic-services-kinsta"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Comment cr\u00e9er un site WordPress avec l&#039;API Kinsta - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Exploitez tout le potentiel de l&#039;API Kinsta et cr\u00e9ez un site WordPress en toute simplicit\u00e9. Apprenez \u00e9galement \u00e0 connecter l&#039;API Kinsta et \u00e0 construire une interface utilisateur personnalis\u00e9e.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/fr\/blog\/api-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comment cr\u00e9er un site WordPress avec l&#039;API Kinsta\" \/>\n<meta property=\"og:description\" content=\"Exploitez tout le potentiel de l&#039;API Kinsta et cr\u00e9ez un site WordPress en toute simplicit\u00e9. Apprenez \u00e9galement \u00e0 connecter l&#039;API Kinsta et \u00e0 construire une interface utilisateur personnalis\u00e9e.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/api-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-07-13T11:05:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-11T14:46:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/07\/wordpress-api.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Exploitez tout le potentiel de l&#039;API Kinsta et cr\u00e9ez un site WordPress en toute simplicit\u00e9. Apprenez \u00e9galement \u00e0 connecter l&#039;API Kinsta et \u00e0 construire une interface utilisateur personnalis\u00e9e.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/07\/wordpress-api.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"19 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/api-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/api-wordpress\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Comment cr\u00e9er un site WordPress avec l&rsquo;API Kinsta\",\"datePublished\":\"2023-07-13T11:05:13+00:00\",\"dateModified\":\"2023-10-11T14:46:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/api-wordpress\/\"},\"wordCount\":3891,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/api-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/07\/wordpress-api.jpg\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/api-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/api-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/api-wordpress\/\",\"name\":\"Comment cr\u00e9er un site WordPress avec l'API Kinsta - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/api-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/api-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/07\/wordpress-api.jpg\",\"datePublished\":\"2023-07-13T11:05:13+00:00\",\"dateModified\":\"2023-10-11T14:46:42+00:00\",\"description\":\"Exploitez tout le potentiel de l'API Kinsta et cr\u00e9ez un site WordPress en toute simplicit\u00e9. Apprenez \u00e9galement \u00e0 connecter l'API Kinsta et \u00e0 construire une interface utilisateur personnalis\u00e9e.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/api-wordpress\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/api-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/api-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/07\/wordpress-api.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/07\/wordpress-api.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/api-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"API\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/api\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Comment cr\u00e9er un site WordPress avec l&rsquo;API Kinsta\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/fr\/#website\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Comment cr\u00e9er un site WordPress avec l'API Kinsta - Kinsta\u00ae","description":"Exploitez tout le potentiel de l'API Kinsta et cr\u00e9ez un site WordPress en toute simplicit\u00e9. Apprenez \u00e9galement \u00e0 connecter l'API Kinsta et \u00e0 construire une interface utilisateur personnalis\u00e9e.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/fr\/blog\/api-wordpress\/","og_locale":"fr_FR","og_type":"article","og_title":"Comment cr\u00e9er un site WordPress avec l'API Kinsta","og_description":"Exploitez tout le potentiel de l'API Kinsta et cr\u00e9ez un site WordPress en toute simplicit\u00e9. Apprenez \u00e9galement \u00e0 connecter l'API Kinsta et \u00e0 construire une interface utilisateur personnalis\u00e9e.","og_url":"https:\/\/kinsta.com\/fr\/blog\/api-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2023-07-13T11:05:13+00:00","article_modified_time":"2023-10-11T14:46:42+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/07\/wordpress-api.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Exploitez tout le potentiel de l'API Kinsta et cr\u00e9ez un site WordPress en toute simplicit\u00e9. Apprenez \u00e9galement \u00e0 connecter l'API Kinsta et \u00e0 construire une interface utilisateur personnalis\u00e9e.","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/07\/wordpress-api.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Joel Olawanle","Dur\u00e9e de lecture estim\u00e9e":"19 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/api-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/api-wordpress\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Comment cr\u00e9er un site WordPress avec l&rsquo;API Kinsta","datePublished":"2023-07-13T11:05:13+00:00","dateModified":"2023-10-11T14:46:42+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/api-wordpress\/"},"wordCount":3891,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/api-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/07\/wordpress-api.jpg","inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/api-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/api-wordpress\/","url":"https:\/\/kinsta.com\/fr\/blog\/api-wordpress\/","name":"Comment cr\u00e9er un site WordPress avec l'API Kinsta - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/api-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/api-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/07\/wordpress-api.jpg","datePublished":"2023-07-13T11:05:13+00:00","dateModified":"2023-10-11T14:46:42+00:00","description":"Exploitez tout le potentiel de l'API Kinsta et cr\u00e9ez un site WordPress en toute simplicit\u00e9. Apprenez \u00e9galement \u00e0 connecter l'API Kinsta et \u00e0 construire une interface utilisateur personnalis\u00e9e.","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/api-wordpress\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/api-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/api-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/07\/wordpress-api.jpg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/07\/wordpress-api.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/api-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"API","item":"https:\/\/kinsta.com\/fr\/sujets\/api\/"},{"@type":"ListItem","position":3,"name":"Comment cr\u00e9er un site WordPress avec l&rsquo;API Kinsta"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/fr\/#website","url":"https:\/\/kinsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinsta.com\/fr\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/70908","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=70908"}],"version-history":[{"count":8,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/70908\/revisions"}],"predecessor-version":[{"id":70953,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/70908\/revisions\/70953"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/70908\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/70908\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/70908\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/70908\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/70908\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/70908\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/70908\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/70908\/translations\/es"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/70908\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/70909"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=70908"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=70908"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=70908"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}