{"id":76078,"date":"2024-02-14T19:18:12","date_gmt":"2024-02-14T18:18:12","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=76078&#038;preview=true&#038;preview_id=76078"},"modified":"2025-10-09T15:14:59","modified_gmt":"2025-10-09T14:14:59","slug":"mise-a-jour-groupee-plugins-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/mise-a-jour-groupee-plugins-wordpress\/","title":{"rendered":"Construire un outil pour mettre \u00e0 jour les plugins WordPress sur plusieurs sites avec l&rsquo;API Kinsta"},"content":{"rendered":"<p>Les extensions jouent un r\u00f4le essentiel dans la personnalisation et l&rsquo;am\u00e9lioration de vos sites WordPress. Elles sont utilis\u00e9es pour ajouter des fonctionnalit\u00e9s telles que les <a href=\"https:\/\/kinsta.com\/fr\/blog\/plugins-formulaire-de-contact-wordpress\/\">formulaires de contact<\/a>, le <a href=\"https:\/\/kinsta.com\/fr\/blog\/plugins-ecommerce-wordpress\/\">commerce \u00e9lectronique<\/a> et les <a href=\"https:\/\/kinsta.com\/fr\/sujets\/statistiques\/\">statistiques<\/a> \u00e0 vos sites sans qu&rsquo;aucun codage ne soit n\u00e9cessaire.<\/p>\n<p>Tout comme WordPress, qui re\u00e7oit des mises \u00e0 jour r\u00e9guli\u00e8res, les extensions re\u00e7oivent \u00e9galement des mises \u00e0 jour r\u00e9guli\u00e8res pour ajouter de nouvelles fonctionnalit\u00e9s, corriger une faille de s\u00e9curit\u00e9, am\u00e9liorer la compatibilit\u00e9, et bien plus encore. C&rsquo;est pourquoi Kinsta a inclus la <a href=\"https:\/\/kinsta.com\/fr\/changelog\/mettez-a-jour-plugins-et-themes\/\">gestion des extensions et des th\u00e8mes<\/a> parmi les outils disponibles dans MyKinsta pour chacun de vos sites.<\/p>\n<p>Cependant, la mise \u00e0 jour des extensions sur de nombreux sites peut encore \u00eatre d\u00e9courageante pour les clients occup\u00e9s comme les agences. Cet article pr\u00e9sente une solution qui utilise l&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/changelog\/api-kinsta\/\">API de Kinsta<\/a> pour g\u00e9rer simultan\u00e9ment les extensions sur plusieurs sites.<\/p>\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>Ce que vous construisez<\/h2>\n<p>Ce guide se concentre sur la construction d&rsquo;une solution avanc\u00e9e utilisant l&rsquo;API Kinsta, qui offre maintenant des points de terminaison pour r\u00e9cup\u00e9rer et mettre \u00e0 jour les extensions.<\/p>\n<p>Nous y cr\u00e9ons une application React personnalis\u00e9e qui r\u00e9cup\u00e8re toutes les extensions de votre compte Kinsta. Cet outil vous permet d&rsquo;<strong>identifier et de mettre \u00e0 jour une extension sp\u00e9cifique sur plusieurs sites<\/strong>, ce qui simplifie consid\u00e9rablement le processus.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/02\/kinsta-plugin-manager.gif\" alt=\"Outil construit avec React et l'API Kinsta pour mettre \u00e0 jour les extensions WordPress sur plusieurs sites.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Outil construit avec React et l&rsquo;API Kinsta pour mettre \u00e0 jour les extensions WordPress sur plusieurs sites.<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Si vous \u00eates une <a href=\"https:\/\/kinsta.com\/fr\/repertoire-agences\/\">agence<\/a> g\u00e9rant plusieurs sites sur Kinsta, vous pouvez commencer \u00e0 utiliser cet outil imm\u00e9diatement sans avoir besoin de vous plonger dans ce guide, \u00e0 moins que vous ne souhaitiez comprendre comment il interagit avec l&rsquo;API pour ajouter des fonctionnalit\u00e9s personnalis\u00e9es.<\/p>\n<p>Pour utiliser cet outil, cr\u00e9ez un d\u00e9p\u00f4t <a href=\"https:\/\/kinsta.com\/fr\/sujets\/git\/\">Git<\/a> <a href=\"https:\/\/github.com\/kinsta\/Kinsta-Plugin-Manager\" target=\"_blank\" rel=\"noopener noreferrer\">en utilisant 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.<\/p>\n<p>Une fois votre d\u00e9p\u00f4t configur\u00e9, d\u00e9ployez-le sur notre plateforme d&rsquo;h\u00e9bergement de sites statiques gratuitement et ajoutez les \u00e9l\u00e9ments suivants en tant que <a href=\"https:\/\/kinsta.com\/fr\/blog\/variables-environnement\/\">variables d&rsquo;environnement<\/a>:<\/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>C&rsquo;est tout. Vous pouvez maintenant utiliser cet outil pour votre entreprise Kinsta afin de rationaliser vos processus de gestion de site.<\/p>\n<\/aside>\n\n<h2>Conditions pr\u00e9alables \u00e0 l&rsquo;application<\/h2>\n<p>Pour suivre ce projet, vous devez disposer des \u00e9l\u00e9ments suivants :<\/p>\n<ul>\n<li>Compr\u00e9hension fondamentale 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>.<\/li>\n<li>Une certaine familiarit\u00e9 avec <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-react-js\/\">React<\/a>.<\/li>\n<li>Node.js et npm <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-npm\/\">(Node Package Manager<\/a>) ou yarn install\u00e9s sur votre ordinateur.<\/li>\n<\/ul>\n<h2>Comprendre l&rsquo;API Kinsta<\/h2>\n<p>L&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/docs\/api-kinsta\/\">API Kinsta<\/a> est un outil puissant qui vous permet d&rsquo;interagir de mani\u00e8re programmatique avec les services Kinsta tels que les sites WordPress h\u00e9berg\u00e9s. Elle peut vous aider \u00e0 automatiser diverses t\u00e2ches li\u00e9es \u00e0 la gestion de WordPress, y compris la <a href=\"https:\/\/kinsta.com\/fr\/blog\/api-wordpress\/\">cr\u00e9ation de sites<\/a>, la <a href=\"https:\/\/kinsta.com\/fr\/blog\/planifier-taches-api-kinsta\/\">r\u00e9cup\u00e9ration d&rsquo;informations sur les sites<\/a>, l&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/blog\/cle-api-kinsta\/#how-to-use-kinsta-api-to-build-a-status-checker\">obtention de l&rsquo;\u00e9tat d&rsquo;un site<\/a>, la <a href=\"https:\/\/kinsta.com\/fr\/blog\/journaux-api-serveur\/\">consultation<\/a> et la <a href=\"https:\/\/kinsta.com\/fr\/blog\/sauvegardes-wordpress-api\/\">restauration de sauvegardes<\/a>, et bien plus encore.<\/p>\n<p>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.<\/p>\n<p>Pour g\u00e9n\u00e9rer une cl\u00e9 API :<\/p>\n<ol start=\"1\">\n<li>Allez sur votre tableau de bord <a href=\"https:\/\/my.kinsta.com\/?lang=fr\" target=\"_blank\" rel=\"noopener noreferrer\">MyKinsta<\/a>.<\/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 <\/strong>&gt;<strong> 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<p>Apr\u00e8s avoir cr\u00e9\u00e9 une cl\u00e9 API, copiez-la et conservez-la en lieu s\u00fbr (il est recommand\u00e9 d&rsquo;utiliser un <a href=\"https:\/\/kinsta.com\/fr\/blog\/gestionnaires-mots-passe\/\">gestionnaire de mots de passe<\/a>). Vous pouvez g\u00e9n\u00e9rer plusieurs cl\u00e9s API, qui seront r\u00e9pertori\u00e9es sur la page <strong>Cl\u00e9s API<\/strong>. Si vous devez r\u00e9voquer une cl\u00e9 API, cliquez sur le bouton <strong>R\u00e9voquer<\/strong>.<\/p>\n<h2>Configurer votre environnement de d\u00e9veloppement React<\/h2>\n<p>React est une <a href=\"https:\/\/kinsta.com\/fr\/blog\/bibliotheques-javascript\/\">biblioth\u00e8que JavaScript populaire<\/a> pour la construction d&rsquo;interfaces utilisateur. Elle permet aux d\u00e9veloppeurs de cr\u00e9er des composants d\u00e9claratifs repr\u00e9sentant diff\u00e9rentes parties de l&rsquo;interface utilisateur. Ces composants sont d\u00e9finis \u00e0 l&rsquo;aide de la <a href=\"https:\/\/kinsta.com\/fr\/blog\/guide-syntaxe-jsx\/\">syntaxe JSX<\/a>, une combinaison de JavaScript et de HTML.<\/p>\n<p>Pour commencer, suivez les \u00e9tapes suivantes :<\/p>\n<ol start=\"1\">\n<li>Naviguez dans le dossier dans lequel vous souhaitez cr\u00e9er votre projet et utilisez <a href=\"https:\/\/reactjs.org\/docs\/create-a-new-react-app.html#create-react-app\" target=\"_blank\" rel=\"noopener noreferrer\">create-react-app<\/a> pour cr\u00e9er un projet React :\n<pre><code class=\"language-bash\">npx create-react-app &lt;project-name&gt;<\/code><\/pre>\n<p>Remplacez <code>&lt;project-name&gt;<\/code> par le nom de votre choix pour votre projet.<\/li>\n<li>Une fois l&rsquo;op\u00e9ration r\u00e9ussie, naviguez dans le dossier du projet et d\u00e9marrez le serveur de d\u00e9veloppement :\n<pre><code class=\"language-bash\">cd &lt;project-name&gt;\nnpm run start<\/code><\/pre>\n<p>Votre application React s&rsquo;ouvre dans votre navigateur web par d\u00e9faut sur http:\/\/localhost:3000.<\/li>\n<\/ol>\n<p>La cr\u00e9ation d&rsquo;un projet React \u00e0 l&rsquo;aide de <code>create-react-app<\/code> met en place une structure de dossiers. Le dossier crucial est <strong>src<\/strong>, o\u00f9 le d\u00e9veloppement a lieu. Les fichiers cl\u00e9s de ce dossier sont les suivants :<\/p>\n<ul>\n<li><strong>App.js :<\/strong> il s&rsquo;agit du composant principal, qui rend tous les autres dans votre application React. C&rsquo;est l\u00e0 que tout votre code pour cet outil sera ajout\u00e9.<\/li>\n<li><strong>index.js :<\/strong> C&rsquo;est le point d&rsquo;entr\u00e9e, charg\u00e9 en premier, et responsable du rendu d&rsquo;<strong>App.js<\/strong>.<\/li>\n<li><strong>index.css :<\/strong> Ce fichier d\u00e9finit le style g\u00e9n\u00e9ral et la mise en page de votre application. Tous les styles seront ajout\u00e9s ici.<\/li>\n<\/ul>\n<h2>Cr\u00e9er et styliser l&rsquo;interface utilisateur<\/h2>\n<p>Concentrons-nous sur la construction et le style de l&rsquo;interface d&rsquo;une application de base h\u00e9berg\u00e9e dans le fichier <strong>App.js<\/strong> sans impliquer de routage. Notre interface utilisateur principale est un formulaire avec un champ <code>select<\/code> pour lister les extensions uniques sur vos sites Kinsta ainsi qu&rsquo;un bouton <code>submit<\/code> pour r\u00e9cup\u00e9rer les sites avec l&rsquo;extension s\u00e9lectionn\u00e9.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/02\/plugin-manager-ui.png\" alt=\"Interface utilisateur pour l'outil de gestion des plugins permettant d'acc\u00e9der \u00e0 une liste d'extensions et de charger des sites.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Interface utilisateur pour l&rsquo;outil de gestion des plugins permettant d&rsquo;acc\u00e9der \u00e0 une liste d&rsquo;extensions et de charger des sites.<\/figcaption><\/figure>\n<p>En outre, une section d&rsquo;affichage montre les d\u00e9tails du site comme le nom, l&rsquo;\u00e9tat du plugin et la version. Elle comprend un bouton pour mettre \u00e0 jour chaque site si n\u00e9cessaire et un bouton g\u00e9n\u00e9ral pour mettre \u00e0 jour en masse tous les sites n\u00e9cessitant la mise \u00e0 jour de l&rsquo;extension.<\/p>\n<p>Dans votre fichier <strong>App.js<\/strong>, ajoutez le code suivant :<\/p>\n<pre><code class=\"language-jsx\">import KinstaLogo from '.\/images\/kinsta_logo.png';\n\nconst App = () =&gt; {\n    return (\n        &lt;div className=\"container\"&gt;\n            &lt;div className=\"title-section\"&gt;\n                &lt;img src={KinstaLogo} className=\"logo\" alt=\"\" \/&gt;\n                &lt;h2&gt;Manage your site's plugins&lt;\/h2&gt;\n                &lt;p&gt;\n                    Easily update plugins across all sites hosted with Kinsta using the\n                    Kinsta API.\n                &lt;\/p&gt;\n            &lt;\/div&gt;\n            &lt;div&gt; className=\"info-section\"&gt;\n                &lt;p&gt;\n                    This application allows you to retrieve a list of all sites within\n                    your company that uses a specific plugin. You can then choose to update\n                    the plugin across all these sites simultaneously or individually.\n                &lt;\/p&gt;\n            &lt;\/div&gt;\n            &lt;div className=\"form-section\"&gt;\n                &lt;form&gt;\n                    &lt;div className=\"form-control\"&gt;\n                        &lt;label&gt; htmlFor=\"plugin-name\"&gt;Plugin name&lt;\/label&gt;\n                        &lt;select name=\"plugin-name\" id=\"plugin-name\"&gt;\n                            &lt;option&gt; value=\"\"&gt;Select a plugin&lt;\/option&gt;\n                        &lt;\/select&gt;\n                    &lt;\/div&gt;\n                    &lt;button&gt; className=\"btn\"&gt;Fetch sites with this plugin&lt;\/button&gt;\n                &lt;\/form&gt;\n            &lt;\/div&gt;\n            &lt;div className=\"display_container\"&gt;\n                &lt;div className=\"site-list\"&gt;\n                    &lt;div className=\"list-title\"&gt;\n                        &lt;h3&gt;Sites with WooCommerce plugin&lt;\/h3&gt;\n\n                        &lt;button&gt; className=\"sm-btn\"&gt;Update all sites to v.3.6&lt;\/button&gt;\n                    &lt;\/div&gt;\n                    &lt;ul&gt;\n                        &lt;li&gt;\n                            &lt;div className=\"info\"&gt;\n                                &lt;p&gt;\n                                    &lt;b&gt;Site Name:&lt;\/b&gt; WooCommerce\n                                &lt;\/p&gt;\n                                &lt;p&gt;\n                                    &lt;b&gt;Plugin Status:&lt;\/b&gt; active\n                                &lt;\/p&gt;\n                                &lt;p&gt;\n                                    &lt;b&gt;Plugin Version:&lt;\/b&gt; 3.5.1\n                                &lt;\/p&gt;\n                            &lt;\/div&gt;\n                            &lt;button&gt; className=\"sm-btn\"&gt;Update to v.5.6&lt;\/button&gt;\n                        &lt;\/li&gt;\n                    &lt;\/ul&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n    );\n};\n\nexport default App;<\/code><\/pre>\n<p>Pour styliser ce projet, visitez le <a href=\"https:\/\/github.com\/kinsta\/Kinsta-Plugin-Manager\/blob\/main\/src\/index.css\" target=\"_blank\" rel=\"noopener noreferrer\">fichier CSS dans notre d\u00e9p\u00f4t GitHub complet<\/a> et copiez son code dans votre fichier <strong>index.css<\/strong>.<\/p>\n<h2>Interagir avec l&rsquo;API Kinsta<\/h2>\n<p>L&rsquo;API de Kinsta offre une gamme de points de terminaison essentiels pour acc\u00e9der \u00e0 divers r\u00e9glages n\u00e9cessaires pour interagir avec l&rsquo;extension d&rsquo;un site. Par exemple, si vous souhaitez r\u00e9cup\u00e9rer ou mettre \u00e0 jour une extension, vous devez d&rsquo;abord obtenir l&rsquo;identifiant d&rsquo;environnement du site.<\/p>\n<p>L&rsquo;obtention de cet identifiant d&rsquo;environnement est un processus s\u00e9quentiel. Dans un premier temps, vous devez d\u00e9terminer l&rsquo;ID du site. Pour obtenir l&rsquo;ID du site, vous devez disposer de l&rsquo;ID de votre entreprise Kinsta. Cet identifiant est disponible dans votre tableau de bord MyKinsta <strong>(R\u00e9glages de l&rsquo;entreprise<\/strong> &gt; <strong>D\u00e9tails de facturation<\/strong>), et il s&rsquo;agit d&rsquo;une information sensible que vous ne voudrez pas partager avec qui que ce soit, comme votre cl\u00e9 API.<\/p>\n<p>Vous pouvez les stocker de mani\u00e8re s\u00e9curis\u00e9e en tant que variables d&rsquo;environnement dans votre application React en cr\u00e9ant un fichier <strong>.env<\/strong> dans le dossier racine de votre projet. Dans ce fichier, ajoutez ce qui suit avec la valeur correcte :<\/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 la variable <code>REACT_APP_KINSTA_COMPANY_ID<\/code>, vous devez utiliser <code>process.env.REACT_APP_KINSTA_COMPANY_ID<\/code>.<\/p>\n<p>En ajoutant le fichier <strong>.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 transmis \u00e0 GitHub. Cela permet de s&rsquo;assurer que vos informations sensibles restent priv\u00e9es et s\u00e9curis\u00e9es.<\/p>\n<h3>R\u00e9cup\u00e9rer tous les sites et plugins \u00e0 l&rsquo;aide de l&rsquo;API Kinsta<\/h3>\n<p>Pour r\u00e9cup\u00e9rer les donn\u00e9es des extensions de tous les sites g\u00e9r\u00e9s par votre compte d&rsquo;entreprise Kinsta, vous pouvez utiliser l&rsquo;API Kinsta en ex\u00e9cutant trois requ\u00eates API. Voici une explication simplifi\u00e9e :<\/p>\n<p>Commencez par enregistrer l&rsquo;URL de l&rsquo;API Kinsta dans une variable pour pouvoir vous y r\u00e9f\u00e9rer facilement.<\/p>\n<pre><code class=\"language-js\">const KinstaAPIUrl = 'https:\/\/api.kinsta.com\/v2';<\/code><\/pre>\n<ol start=\"1\">\n<li><strong>R\u00e9cup\u00e9rer la liste des sites de l&rsquo;entreprise :<\/strong> Vous devez obtenir une liste de tous les sites WordPress associ\u00e9s \u00e0 votre entreprise. Pour ce faire, construisez une requ\u00eate en utilisant l&rsquo;identifiant de l&rsquo;entreprise, faites une demande GET avec l&rsquo;autorisation appropri\u00e9e, traitez la r\u00e9ponse au format JSON et extrayez les d\u00e9tails du site \u00e0 partir de la r\u00e9ponse.\n<pre><code class=\"language-js\">const query = new URLSearchParams({\n    company: process.env.REACT_APP_KINSTA_COMPANY_ID,\n}).toString();\nconst response = await fetch(`${KinstaAPIUrl}\/sites?${query}`, {\n    method: 'GET',\n    headers: { Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}` },\n});\n\nconst data = await response.json();\nconst companySites = data.company.sites;<\/code><\/pre>\n<\/li>\n<li><strong>R\u00e9cup\u00e9rer l&rsquo;identifiant de l&rsquo;environnement du site :<\/strong> L&rsquo;\u00e9tape pr\u00e9c\u00e9dente renvoie un tableau de sites WordPress. Pour chaque site, faites une boucle et faites une autre requ\u00eate GET pour r\u00e9cup\u00e9rer les environnements associ\u00e9s.\n<pre><code class=\"language-js\">const sitesEnvironmentData = companySites.map(async (site) =&gt; {\n    const siteId = site.id;\n    const resp = await fetch(`${KinstaAPIUrl}\/sites\/${siteId}\/environments`, {\n        method: 'GET',\n        headers: {\n            Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`,\n        },\n    });\n    const data = await resp.json();\n    const environments = data.site.environments;\n    return {\n        id: siteId,\n        name: site.display_name,\n        environments: environments,\n    };\n});<\/code><\/pre>\n<\/li>\n<li><strong>R\u00e9cup\u00e9rer la liste des plugins des sites WordPress :<\/strong> Apr\u00e8s avoir obtenu l&rsquo;ID du site, le nom et l&rsquo;environnement, vous pouvez maintenant utiliser l&rsquo;ID de l&rsquo;environnement pour r\u00e9cup\u00e9rer une liste de toutes les extensions sur chaque site. Vous devez d&rsquo;abord r\u00e9soudre les promesses de l&rsquo;\u00e9tape pr\u00e9c\u00e9dente, puis effectuer les requ\u00eates GET pour les extensions :\n<pre><code class=\"language-js\">\/\/ Wait for all the promises to resolve\nconst sitesData = await Promise.all(sitesEnvironmentData);\n\n\/\/ Get all plugins for each environment\nconst sitesWithPlugin = sitesData.map(async (site) =&gt; {\n    const environmentId = site.environments[0].id;\n    const resp = await fetch(\n        `${KinstaAPIUrl}\/sites\/environments\/${environmentId}\/plugins`,\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    const plugins = data.environment.container_info;\n    return {\n        env_id: environmentId,\n        name: site.name,\n        plugins: plugins,\n    };\n});\n\nconst sitesWithPluginData = await Promise.all(sitesWithPlugin);\nreturn sitesWithPluginData;<\/code><\/pre>\n<\/li>\n<li><strong>Consolidation du processus :<\/strong> Pour rationaliser le processus, vous pouvez encapsuler ces demandes d&rsquo;API dans une seule fonction asynchrone <code>getSitesWithPluginData<\/code>, qui peut \u00eatre r\u00e9utilis\u00e9e. Cette fonction ex\u00e9cutera les \u00e9tapes d\u00e9crites ci-dessus et renverra un tableau contenant les informations essentielles sur chaque site, notamment l&rsquo;identifiant de l&rsquo;environnement, le nom du site et un tableau d&rsquo;extensions.\n<pre><code class=\"language-jsx\">const getSitesWithPluginData = async () =&gt; {\n    const query = new URLSearchParams({\n        company: process.env.REACT_APP_KINSTA_COMPANY_ID,\n    }).toString();\n    const resp = await fetch(`${KinstaAPIUrl}\/sites?${query}`, {\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    const companySites = data.company.sites;\n\n    \/\/ Get all environments for each site\n    const sitesEnvironmentData = companySites.map(async (site) =&gt; {\n        const siteId = site.id;\n        const resp = await fetch(`${KinstaAPIUrl}\/sites\/${siteId}\/environments`, {\n            method: 'GET',\n            headers: {\n                Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`,\n            },\n        });\n        const data = await resp.json();\n        const environments = data.site.environments;\n        return {\n            id: siteId,\n            name: site.display_name,\n            environments: environments,\n        };\n    });\n\n    \/\/ Wait for all the promises to resolve\n    const sitesData = await Promise.all(sitesEnvironmentData);\n\n    \/\/ Get all plugins for each environment\n    const sitesWithPlugin = sitesData.map(async (site) =&gt; {\n        const environmentId = site.environments[0].id;\n        const resp = await fetch(\n            `${KinstaAPIUrl}\/sites\/environments\/${environmentId}\/plugins`,\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        const plugins = data.environment.container_info;\n        return {\n            env_id: environmentId,\n            name: site.name,\n            plugins: plugins,\n        };\n    });\n\n    \/\/ Wait for all the promises to resolve\n    const sitesWithPluginData = await Promise.all(sitesWithPlugin);\n    return sitesWithPluginData;\n};<\/code><\/pre>\n<\/li>\n<\/ol>\n<h3>R\u00e9cup\u00e9rer les plugins uniques de tous les sites<\/h3>\n<p>Dans votre application, vous souhaitez afficher la liste des extensions de tous les sites dans un menu d\u00e9roulant <code>select<\/code>. Pour cela, la fonction <code>getSitesWithPluginData<\/code> r\u00e9cup\u00e8re l&rsquo;ID d&rsquo;environnement, le nom et les extensions de chaque site. Ces donn\u00e9es constituent la base de l&rsquo;extraction d&rsquo;une liste d&rsquo;extensions.<\/p>\n<p>D\u00e9finissez une nouvelle fonction, <code>fetchAllSitesPlugins<\/code>, qui appelle <code>getSitesWithPluginData<\/code> et traite sa sortie pour obtenir une liste de toutes les extensions :<\/p>\n<pre><code class=\"language-js\">const fetchAllSitesPlugins = async () =&gt; {\n    const sitesWithPluginData = await getSitesWithPluginData();\n\n    \/\/ get all plugins\n    const allPlugins = sitesWithPluginData.map((site) =&gt; {\n        const { plugins } = site;\n        return plugins.wp_plugins.data;\n    });\n\n   \/\/ \u2026\n};<\/code><\/pre>\n<p>Ce code it\u00e8re sur les donn\u00e9es de chaque site et compile une liste d&rsquo;extensions. Pour s&rsquo;assurer que chaque extension n&rsquo;est list\u00e9e qu&rsquo;une seule fois, utilisez l&rsquo;objet JavaScript <code>Set<\/code>, qui stocke des valeurs uniques :<\/p>\n<pre><code class=\"language-js\">\/\/ get unique plugins\n    const uniquePlugins = [\n        ...new Set(allPlugins.flat().map((plugin) =&gt; plugin.name)),\n    ];<\/code><\/pre>\n<p>La m\u00e9thode <code>.flat()<\/code> aplatit la structure du tableau et <code>.map()<\/code> effectue une boucle pour extraire uniquement les noms des extensions. L&rsquo;objet <code>Set<\/code> filtre les doublons.<\/p>\n<p>Pour charger et afficher ces donn\u00e9es dans votre application React, utilisez les crochets <code>useState()<\/code> et <code>useEffect()<\/code>:<\/p>\n<pre><code class=\"language-jsx\">import { useState, useEffect } from 'react';\n\nconst App = () =&gt; {\n    const [pluginName, setPluginName] = useState('');\n    const [plugins, setPlugins] = useState([]);\n\n    \/\/Get sites with plugin data\n    const getSitesWithPluginData = async () =&gt; {\n        \/\/ perform requests\n    };\n\n    useEffect(() =&gt; {\n        const fetchAllSitesPlugins = async () =&gt; {\n            const sitesWithPluginData = await getSitesWithPluginData();\n            \/\/ get all plugins\n            const allPlugins = sitesWithPluginData.map((site) =&gt; {\n                const { plugins } = site;\n                return plugins.wp_plugins.data;\n            });\n            \/\/ get unique plugins\n            const uniquePlugins = [\n                ...new Set(allPlugins.flat().map((plugin) =&gt; plugin.name)),\n            ];\n            setPlugins(uniquePlugins);\n        };\n\n        fetchAllSitesPlugins();\n    }, []);\n\n     \/\/ JSX render code follows\n    \/\/...\n};<\/code><\/pre>\n<p>Le crochet <code>useEffect()<\/code> s&rsquo;assure que les donn\u00e9es sont r\u00e9cup\u00e9r\u00e9es et d\u00e9finies lors du montage du composant. Le hook <code>useState()<\/code> maintient la liste des extensions uniques.<\/p>\n<p>Enfin, affichez ces extensions dans un champ <code>select<\/code>. Si les extensions sont encore en cours de chargement, affichez un message de remplacement :<\/p>\n<pre><code class=\"language-jsx\">&lt;select&gt;\n    name=\"plugin-name\"\n    id=\"plugin-name\"\n    value={pluginName}\n    onChange={(e) =&gt; setPluginName(e.target.value)}\n&gt;\n    {plugins.length &gt; 0 ? (\n        &lt;&gt;\n            &lt;option value=\"\"&gt;Select a plugin&lt;\/option&gt;\n            {plugins.map((plugin) =&gt; (\n                &lt;option key={plugin} value={plugin.toLowerCase()}&gt;\n                    {plugin}\n                &lt;\/option&gt;\n            ))}\n        &lt;\/&gt;\n    ) : (\n        &lt;option&gt; value=\"\"&gt;Loading plugins...&lt;\/option&gt;\n    )}\n&lt;\/select&gt;<\/code><\/pre>\n<p>Dans ce code :<\/p>\n<ul>\n<li>L&rsquo;\u00e9l\u00e9ment <code>select<\/code> est li\u00e9 \u00e0 une variable d&rsquo;\u00e9tat <code>pluginName<\/code> pour stocker la valeur s\u00e9lectionn\u00e9e.<\/li>\n<li>Le gestionnaire <code>onChange<\/code> met \u00e0 jour cet \u00e9tat chaque fois qu&rsquo;une nouvelle extension est s\u00e9lectionn\u00e9e.<\/li>\n<li>La fonction <code>plugins.map()<\/code> cr\u00e9e dynamiquement des \u00e9l\u00e9ments d&rsquo;option pour chaque extension.<\/li>\n<\/ul>\n<p>En suivant ces \u00e9tapes, votre application affichera effectivement une liste unique d&rsquo;extensions r\u00e9cup\u00e9r\u00e9s sur tous les sites, offrant ainsi une interface de s\u00e9lection propre et conviviale.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/02\/select-field-plugin-manager.png\" alt=\"S\u00e9lectionnez le champ affichant la liste des extensions uniques de tous les sites dans le compte de l'entreprise Kinsta.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">S\u00e9lectionnez le champ affichant la liste des extensions uniques de tous les sites dans le compte de l&rsquo;entreprise Kinsta.<\/figcaption><\/figure>\n<h3>R\u00e9cup\u00e9rer des sites avec un plugin sp\u00e9cifique<\/h3>\n<p>Jusqu&rsquo;\u00e0 pr\u00e9sent, vous avez \u00e9t\u00e9 en mesure de r\u00e9cup\u00e9rer des extensions \u00e0 partir de votre compte d&rsquo;entreprise Kinsta, mais vous souhaitez parcourir en boucle tous les sites pour r\u00e9cup\u00e9rer des sites avec une extension particuli\u00e8re, les stocker dans un \u00e9tat, puis les afficher.<\/p>\n<p>Pour cela, cr\u00e9ez deux \u00e9tats : un pour stocker les sites (<code>sites<\/code>) et un autre pour indiquer l&rsquo;\u00e9tat de chargement (<code>isLoading<\/code>).<\/p>\n<pre><code class=\"language-jsx\">const [sites, setSites] = useState([]);\nconst [isLoading, setIsLoading] = useState(false);<\/code><\/pre>\n<p>Ensuite, cr\u00e9ez une fonction <code>fetchSites<\/code> pour filtrer chaque site et v\u00e9rifier s&rsquo;il contient l&rsquo;extension s\u00e9lectionn\u00e9e. Si c&rsquo;est le cas, les d\u00e9tails pertinents du site sont stock\u00e9s<\/p>\n<p>Cette fonction commence par attribuer la valeur <code>true<\/code> \u00e0 <code>isLoading<\/code> et par vider le tableau <code>sites<\/code>. Elle appelle ensuite <code>getSitesWithPluginData<\/code> pour r\u00e9cup\u00e9rer toutes les donn\u00e9es du site.<\/p>\n<pre><code class=\"language-jsx\">const fetchSites = async () =&gt; {\n    setIsLoading(true);\n    setSites([]);\n    const sitesWithPluginData = await getSitesWithPluginData();\n\n    \/\/ Filter out sites that don't have the plugin\n    const sitesWithPluginDataFiltered = sitesWithPluginData\n        .filter((site) =&gt; {\n            const sitePlugins = site.plugins.wp_plugins.data;\n            return sitePlugins.some((plugin) =&gt; {\n                return plugin.name === pluginName;\n            });\n        })\n        .map((site) =&gt; {\n            const { env_id, name } = site;\n            const { version, status, update, update_version } =\n                site.plugins.wp_plugins.data.find(\n                    (plugin) =&gt; plugin.name === pluginName\n                );\n            return {\n                env_id,\n                name,\n                version,\n                status,\n                updateAvailable: update,\n                updateVersion: update_version,\n            };\n        });\n    setSites(sitesWithPluginDataFiltered);\n    setIsLoading(false);\n};<\/code><\/pre>\n<p>Dans la fonction <code>sitesWithPluginDataFiltered<\/code>:<\/p>\n<ul>\n<li>La m\u00e9thode <code>.filter()<\/code> isole les sites qui contiennent l&rsquo;extension s\u00e9lectionn\u00e9e.<\/li>\n<li>La m\u00e9thode <code>.map()<\/code> extrait ensuite les d\u00e9tails n\u00e9cessaires de chaque site.<\/li>\n<li>Enfin, les crochets <code>setSites<\/code> et <code>setIsLoading<\/code> mettent \u00e0 jour l&rsquo;\u00e9tat avec les nouvelles donn\u00e9es et l&rsquo;\u00e9tat de chargement.<\/li>\n<\/ul>\n<p>Cr\u00e9ez ensuite une fonction <code>handleSubmit<\/code> et ajoutez-la au bouton \u00ab <strong>Fetch sites with this plugin<\/strong> \u00bb du formulaire afin d&rsquo;invoquer la fonction lorsqu&rsquo;un utilisateur s\u00e9lectionne une extension et envoie le formulaire. Cette fonction emp\u00eache l&rsquo;action par d\u00e9faut du formulaire et appelle <code>fetchSites<\/code>:<\/p>\n<pre><code class=\"language-jsx\">const handleSubmit = (e) =&gt; {\n    e.preventDefault();\n    fetchSites();\n};<\/code><\/pre>\n<p>Ainsi, lorsqu&rsquo;un utilisateur s\u00e9lectionne une extension particuli\u00e8re et clique sur le bouton d&rsquo;envoi, il r\u00e9cup\u00e8re tous les sites avec cette extension et les stocke dans l&rsquo;\u00e9tat <code>sites<\/code>.<\/p>\n<h4>Afficher les sites avec le plugin s\u00e9lectionn\u00e9<\/h4>\n<p>Apr\u00e8s avoir stock\u00e9 les sites pertinents dans votre \u00e9tat <code>sites<\/code>, l&rsquo;\u00e9tape suivante consiste \u00e0 afficher ces donn\u00e9es dans l&rsquo;interface utilisateur de votre projet. L&rsquo;objectif est de pr\u00e9senter chaque site sous forme de liste avec des d\u00e9tails cl\u00e9s et un bouton conditionnel pour les mises \u00e0 jour de l&rsquo;extension.<\/p>\n<pre><code class=\"language-jsx\">&lt;ul&gt;\n    {sites.map((site) =&gt; (\n        &lt;li key={site.env_id}&gt;\n            &lt;div className=\"info\"&gt;\n                &lt;p&gt;\n                    &lt;b&gt;Site Name:&lt;\/b&gt; {site.name}\n                &lt;\/p&gt;\n                &lt;p&gt;\n                    &lt;b&gt;Plugin Status:&lt;\/b&gt; {site.status}\n                &lt;\/p&gt;\n                &lt;p&gt;\n                    &lt;b&gt;Plugin Version:&lt;\/b&gt; {site.version}\n                &lt;\/p&gt;\n            &lt;\/div&gt;\n            &lt;button&gt;\n                className={`sm-btn ${\n                    site.updateAvailable !== 'available' ? 'disabled-btn' : ''\n                }`}\n                disabled={site.updateAvailable !== 'available'}\n            &gt;\n                {site.updateAvailable === 'available'\n                    ? `Update to v.${site.updateVersion}`\n                    : 'Up to date'}\n            &lt;\/button&gt;\n        &lt;\/li&gt;\n    ))}\n&lt;\/ul&gt;<\/code><\/pre>\n<p>Dans le code ci-dessus, le tableau <code>sites<\/code> est it\u00e9r\u00e9 \u00e0 l&rsquo;aide de la m\u00e9thode <code>.map()<\/code>, ce qui cr\u00e9e une liste (<code>&lt;ul&gt;<\/code>) de sites ( \u00e9l\u00e9ments<code>&lt;li&gt;<\/code> ). Chaque \u00e9l\u00e9ment de la liste contient des d\u00e9tails sur le site et un bouton pour les mises \u00e0 jour de l&rsquo;extension.<\/p>\n<p>Le bouton de l&rsquo;interface utilisateur change de style et de fonction en fonction de l&rsquo;\u00e9tat de mise \u00e0 jour de l&rsquo;extension : il est actif pour les mises \u00e0 jour disponibles, sinon il est d\u00e9sactiv\u00e9 et libell\u00e9 \u00ab Up to date \u00bb, contr\u00f4l\u00e9 par un <a href=\"https:\/\/kinsta.com\/fr\/blog\/meilleurs-pratiques-css\/\">CSS<\/a> conditionnel et l&rsquo;attribut \u00ab disabled \u00bb.<\/p>\n<p>En outre, pour am\u00e9liorer l&rsquo;exp\u00e9rience de l&rsquo;utilisateur, ajoutons un texte de chargement conditionnellement en utilisant l&rsquo;\u00e9tat <code>isLoading<\/code> lorsque les sites sont en cours de r\u00e9cup\u00e9ration.<\/p>\n<pre><code class=\"language-jsx\">{isLoading && (\n    &lt;div className=\"loading\"&gt;\n        &lt;p&gt;Loading...&lt;\/p&gt;\n    &lt;\/div&gt;\n)}<\/code><\/pre>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/02\/list-sites-plugin.png\" alt=\"Une liste des sites qui utilisent une extension particuli\u00e8re du compte de la soci\u00e9t\u00e9 Kinsta avec des boutons pour les mettre \u00e0 jour individuellement ou en une seule fois.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Une liste des sites qui utilisent une extension particuli\u00e8re du compte de la soci\u00e9t\u00e9 Kinsta avec des boutons pour les mettre \u00e0 jour individuellement ou en une seule fois.<\/figcaption><\/figure>\n<h3>Mettre \u00e0 jour les plugins avec l&rsquo;API Kinsta<\/h3>\n<p>Jusqu&rsquo;\u00e0 pr\u00e9sent, nous avons \u00e9t\u00e9 en mesure de r\u00e9cup\u00e9rer des sites avec des d\u00e9tails importants et d&rsquo;acc\u00e9der \u00e0 leurs extensions. L&rsquo;objectif de cet outil est de faciliter la mise \u00e0 jour des extensions sur plusieurs sites \u00e0 l&rsquo;aide de l&rsquo;API de Kinsta. Le processus comprend le d\u00e9clenchement des mises \u00e0 jour et le suivi de leur progression.<\/p>\n<h4>D\u00e9clenchement des mises \u00e0 jour des plugins<\/h4>\n<p>Un bouton est fourni pour chaque site r\u00e9pertori\u00e9. Il est stylis\u00e9 pour indiquer si une mise \u00e0 jour est disponible. Si une mise \u00e0 jour est disponible, cliquez sur le bouton pour d\u00e9clencher la fonction <code>updatePlugin<\/code>.<\/p>\n<pre><code class=\"language-jsx\">&lt;button&gt;\n    className={`sm-btn ${\n        site.updateAvailable !== 'available' ? 'disabled-btn' : ''\n    }`}\n    disabled={site.updateAvailable !== 'available'}\n    onClick={() =&gt;\n        updatePlugin(site.env_id, site.updateVersion)\n    }\n&gt;\n    {site.updateAvailable === 'available'\n        ? `Update to v.${site.updateVersion}`\n        : 'Up to date'}\n&lt;\/button&gt;<\/code><\/pre>\n<p>Le gestionnaire <code>onClick<\/code> appelle <code>updatePlugin<\/code> avec l&rsquo;ID d&rsquo;environnement du site et la derni\u00e8re version de l&rsquo;extension (<code>updateVersion<\/code>). Cette fonction envoie une requ\u00eate PUT \u00e0 l&rsquo;API Kinsta pour mettre \u00e0 jour l&rsquo;extension.<\/p>\n<pre><code class=\"language-jsx\">const updatePlugin = async (envId, pluginVersion) =&gt; {\n    const resp = await fetch(`${KinstaAPIUrl}\/sites\/environments\/${envId}\/plugins`, {\n        method: 'PUT',\n        headers: {\n            'Content-Type': 'application\/json',\n            Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`,\n        },\n        body: JSON.stringify({\n            name: pluginName,\n            update_version: pluginVersion,\n        }),\n    });\n\n    const data = await resp.json();\n    \/\/ Further processing\n};<\/code><\/pre>\n<h4>Suivre la progression de la mise \u00e0 jour<\/h4>\n<p>Apr\u00e8s avoir lanc\u00e9 la mise \u00e0 jour, vous devez suivre sa progression. L&rsquo;API Kinsta fournit une r\u00e9ponse de ce type lors du lancement d&rsquo;une mise \u00e0 jour :<\/p>\n<pre><code class=\"language-jsx\">{\n  \"operation_id\": \"wp-plugin:update-54fb80af-576c-4fdc-ba4f-b596c83f15a1\",\n  \"message\": \"Updating WordPress plugin in progress\",\n  \"status\": 202\n}<\/code><\/pre>\n<p>Le site <code>operation_id<\/code> suit l&rsquo;\u00e9tat de la mise \u00e0 jour via le point de terminaison des op\u00e9rations. Cr\u00e9ez une fonction pour effectuer cette requ\u00eate API, en attendant le <code>operation_id<\/code> comme argument :<\/p>\n<pre><code class=\"language-jsx\">\/\/ Check plugin update status\nconst checkPluginUpdateStatus = async (operationId) =&gt; {\n    const resp = await fetch(`${KinstaAPIUrl}\/operations\/${operationId}`, {\n        method: 'GET',\n        headers: {\n            Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`,\n        },\n    });\n    const data = await resp.json();\n    return data.status;\n};<\/code><\/pre>\n<p>\u00c0 l&rsquo;int\u00e9rieur de <code>updatePlugin<\/code>, utilisez une instruction <code>if<\/code> pour v\u00e9rifier si la demande de mise \u00e0 jour initiale <code>status<\/code> est <code>202<\/code>. Si c&rsquo;est le cas, elle \u00e9tablit un intervalle pour appeler <code>checkPluginUpdateStatus<\/code> toutes les cinq secondes (5000 millisecondes).<\/p>\n<p>L&rsquo;intervalle v\u00e9rifie \u00e0 plusieurs reprises l&rsquo;\u00e9tat de la mise \u00e0 jour et, en cas de succ\u00e8s, il efface l&rsquo;intervalle et appelle <code>fetchSites<\/code> pour actualiser la liste des sites. Si une erreur survient au cours de ces v\u00e9rifications, elle est consign\u00e9e dans la console.<\/p>\n<pre><code class=\"language-jsx\">if (data.status === 202) {\n    const interval = setInterval(() =&gt; {\n        checkPluginUpdateStatus(data.operation_id)\n            .then((status) =&gt; {\n                console.log(status);\n                if (status === 200) {\n                    clearInterval(interval);\n                    fetchSites();\n                }\n            })\n            .catch((error) =&gt; {\n                \/\/ Handle any errors that occur during the promise resolution\n                console.error('Error:', error);\n            });\n    }, 5000);\n}<\/code><\/pre>\n<h4>Commentaires de l&rsquo;utilisateur pendant le fonctionnement<\/h4>\n<p>Tout fonctionne bien \u00e0 ce stade, mais il est bon d&rsquo;informer l&rsquo;utilisateur de la progression de l&rsquo;op\u00e9ration au lieu de le laisser deviner. Vous pouvez le faire en affichant une notification qui appara\u00eet lorsque l&rsquo;op\u00e9ration est en cours et qui dispara\u00eet lorsque l&rsquo;op\u00e9ration est termin\u00e9e. Cr\u00e9ez un \u00e9tat <code>showStatusBar<\/code> pour contr\u00f4ler cela :<\/p>\n<pre><code class=\"language-jsx\">const [showStatusBar, setShowStatusBar] = useState(false);<\/code><\/pre>\n<p>Lorsque <code>showStatusBar<\/code> est <code>true<\/code>, une barre d&rsquo;\u00e9tat appara\u00eet en haut de l&rsquo;\u00e9cran, indiquant qu&rsquo;une mise \u00e0 jour est en cours. Cette barre est con\u00e7ue pour \u00eatre fix\u00e9e en haut de l&rsquo;\u00e9cran.<\/p>\n<pre><code class=\"language-jsx\">{showStatusBar && (\n    &lt;div className=\"status-bar\"&gt;\n        &lt;p&gt;Updating WordPress plugin in progress...&lt;\/p&gt;\n    &lt;\/div&gt;\n)}<\/code><\/pre>\n<p>Vous pouvez maintenant ajuster l&rsquo;instruction <code>if<\/code> dans la fonction <code>updatePlugin<\/code> pour que <code>showStatusBar<\/code> devienne <code>true<\/code> ou <code>false<\/code> en fonction de l&rsquo;\u00e9tat de la mise \u00e0 jour :<\/p>\n<pre><code class=\"language-jsx\">if (data.status === 202) {\n    setShowStatusBar(true);\n    const interval = setInterval(() =&gt; {\n        checkPluginUpdateStatus(data.operation_id)\n            .then((status) =&gt; {\n                console.log(status);\n                if (status === 200) {\n                    setShowStatusBar(false);\n                    clearInterval(interval);\n                    fetchSites();\n                }\n            })\n            .catch((error) =&gt; {\n                \/\/ Handle any errors that occur during the promise resolution\n                console.error('Error:', error);\n            });\n    }, 5000);\n}<\/code><\/pre>\n<p>Cette approche permet aux utilisateurs d&rsquo;\u00eatre inform\u00e9s de l&rsquo;\u00e9tat des mises \u00e0 jour des plugins, ce qui am\u00e9liore la convivialit\u00e9 globale de l&rsquo;outil.<\/p>\n<h3>Mettre \u00e0 jour les plugins sur plusieurs sites avec l&rsquo;API Kinsta<\/h3>\n<p>La principale caract\u00e9ristique de cet outil est la possibilit\u00e9 de mettre \u00e0 jour une extension particuli\u00e8re en un seul clic sur plusieurs sites de votre compte Kinsta. Cette fonctionnalit\u00e9 est similaire \u00e0 celle mise en \u0153uvre pour la mise \u00e0 jour des extensions sur un seul site.<\/p>\n<p>Le processus consiste \u00e0 parcourir en boucle l&rsquo;\u00e9tat <code>sites<\/code>, qui contient les sites sur lesquels l&rsquo;extension en question doit \u00eatre mise \u00e0 jour. Pour chaque site n\u00e9cessitant une mise \u00e0 jour, une requ\u00eate API est effectu\u00e9e pour mettre \u00e0 jour l&rsquo;extension et suivre ensuite l&rsquo;\u00e9tat de l&rsquo;op\u00e9ration :<\/p>\n<pre><code class=\"language-jsx\">\/\/ Update all plugins\nconst updateAllPlugins = async () =&gt; {\n    sites.map(async (site) =&gt; {\n        if (site.updateAvailable === 'available') {\n            const environmentId = site.env_id;\n            const resp = await fetch(\n                `${KinstaAPIUrl}\/sites\/environments\/${environmentId}\/plugins`,\n                {\n                    method: 'PUT',\n                    headers: {\n                        'Content-Type': 'application\/json',\n                        Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`,\n                    },\n                    body: JSON.stringify({\n                        name: pluginName,\n                        update_version: site.updateVersion,\n                    }),\n                }\n            );\n            const data = await resp.json();\n            if (data.status === 202) {\n                setShowStatusBar(true);\n                const interval = setInterval(() =&gt; {\n                    checkPluginUpdateStatus(data.operation_id)\n                        .then((status) =&gt; {\n                            console.log(status);\n                            if (status === 200) {\n                                setShowStatusBar(false);\n                                clearInterval(interval);\n                                fetchSites();\n                            }\n                        })\n                        .catch((error) =&gt; {\n                            \/\/ Handle any errors that occur during the promise resolution\n                            console.error('Error:', error);\n                        });\n                }, 5000);\n            }\n        }\n    });\n};<\/code><\/pre>\n<p>Cette fonction est reli\u00e9e \u00e0 un bouton <strong>Update All<\/strong>. Pour am\u00e9liorer l&rsquo;exp\u00e9rience de l&rsquo;utilisateur, le bouton affiche le num\u00e9ro de la version vers laquelle les extensions sont mises \u00e0 jour :<\/p>\n<pre><code class=\"language-jsx\">&lt;button&gt; className=\"sm-btn\" onClick={updateAllPlugins}&gt;\n    Update all sites to v.\n    {\n        sites.find((site) =&gt; site.updateVersion !== null)\n            ?.updateVersion\n    }\n&lt;\/button&gt;<\/code><\/pre>\n<p>En outre, nous rendons ce bouton conditionnel afin qu&rsquo;il n&rsquo;apparaisse que lorsque plus d&rsquo;un site n\u00e9cessite une mise \u00e0 jour de l&rsquo;extension. Si tous les sites sont \u00e0 jour, un message s&rsquo;affiche \u00e0 la place :<\/p>\n<pre><code class=\"language-jsx\">&lt;div className=\"list-title\"&gt;\n    &lt;h3&gt;Sites with {pluginName} plugin&lt;\/h3&gt;\n    {sites.filter((site) =&gt; site.updateAvailable === 'available')\n        .length &gt; 1 && (\n        &lt;button className=\"sm-btn\" onClick={updateAllPlugins}&gt;\n            Update all sites to v.\n            {\n                sites.find((site) =&gt; site.updateVersion !== null)\n                    ?.updateVersion\n            }\n        &lt;\/button&gt;\n    )}\n    {sites.every((site) =&gt; site.updateAvailable !== 'available') && (\n        &lt;p&gt;All sites are up to date&lt;\/p&gt;\n    )}\n&lt;\/div&gt;<\/code><\/pre>\n<p>Gr\u00e2ce \u00e0 ces impl\u00e9mentations, vous pouvez d\u00e9sormais mettre \u00e0 jour sans effort les extensions sur plusieurs sites de votre compte Kinsta, ce qui am\u00e9liore l&rsquo;efficacit\u00e9 et garantit que tous vos sites sont \u00e0 jour avec les derni\u00e8res versions des extensions.<\/p>\n<h2>D\u00e9ployez gratuitement votre site statique React sur Kinsta<\/h2>\n<p>Nous utilisons l&rsquo;<a href=\"https:\/\/sevalla.com\/static-site-hosting\/\">h\u00e9bergement de sites statiques de Kinsta<\/a> pour d\u00e9montrer l&rsquo;application. En pratique, vous pourriez ex\u00e9cuter cette application React depuis votre propre r\u00e9seau ou ne la d\u00e9ployer qu&rsquo;apr\u00e8s avoir ajout\u00e9 un moyen d&rsquo;authentification \u00e0 cet outil pour des raisons de s\u00e9curit\u00e9.<\/p>\n<p>Vous pouvez h\u00e9berger gratuitement vos applications React cr\u00e9\u00e9es avec <code>create-react-app<\/code> en tant que site statique en utilisant notre h\u00e9bergement de site statique en poussant votre code vers un fournisseur Git pr\u00e9f\u00e9r\u00e9<a href=\"https:\/\/docs.sevalla.com\/applications\/git\/bitbucket#grant-access-to-the-kinsta-bitbucket-application\">(Bitbucket<\/a>, <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/github#authenticate-and-authorize\">GitHub<\/a> ou <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/gitlab#authorize-the-kinsta-gitlab-application\">GitLab<\/a>).<\/p>\n<p>Une fois que votre d\u00e9p\u00f4t est pr\u00eat, suivez ces \u00e9tapes pour d\u00e9ployer votre site statique sur Kinsta :<\/p>\n<ol start=\"1\">\n<li>Connectez-vous ou cr\u00e9ez un compte pour afficher votre tableau de bord <a href=\"https:\/\/my.kinsta.com\/?lang=fr\" target=\"_blank\" rel=\"noopener noreferrer\">MyKinsta<\/a>.<\/li>\n<li>Autorisez Kinsta avec votre fournisseur Git.<\/li>\n<li>Cliquez sur <strong>Sites statiques<\/strong> dans la colonne lat\u00e9rale de gauche, puis cliquez sur <strong>Ajouter un site<\/strong>.<\/li>\n<li>S\u00e9lectionnez le d\u00e9p\u00f4t et la branche \u00e0 partir desquels vous souhaitez d\u00e9ployer.<\/li>\n<li>Attribuez un nom unique \u00e0 votre site.<\/li>\n<li>Ajoutez les r\u00e9glages de construction dans le format suivant :\n<ul>\n<li><strong>Commande de construction :<\/strong> npm run build<\/li>\n<li><strong>Version Node :<\/strong> 18.16.0<\/li>\n<li><strong>R\u00e9pertoire de publication :<\/strong> build<\/li>\n<\/ul>\n<\/li>\n<li>Enfin, cliquez sur <strong>Cr\u00e9er un site<\/strong>.<\/li>\n<\/ol>\n<p>Et le tour est jou\u00e9 ! En quelques secondes, vous disposez d&rsquo;un site d\u00e9ploy\u00e9. Un lien est fourni pour acc\u00e9der \u00e0 la version d\u00e9ploy\u00e9e de votre site. Vous pourrez par la suite ajouter votre <a href=\"https:\/\/docs.sevalla.com\/applications\/domains\">domaine personnalis\u00e9<\/a> et votre <a href=\"https:\/\/docs.sevalla.com\/applications\/domains#install-a-custom-ssl-certificate\">certificat SSL<\/a> si vous le souhaitez.<\/p>\n<p>Comme alternative \u00e0 l&rsquo;h\u00e9bergement de sites statiques, vous pouvez d\u00e9ployer votre site statique avec l&rsquo;<a href=\"https:\/\/sevalla.com\/application-hosting\/\">h\u00e9bergement d&rsquo;applications<\/a> de Kinsta, qui offre une plus grande flexibilit\u00e9 d&rsquo;h\u00e9bergement, une plus large gamme d&rsquo;avantages et l&rsquo;acc\u00e8s \u00e0 des fonctionnalit\u00e9s plus robustes. Par exemple, l&rsquo;\u00e9volutivit\u00e9, le d\u00e9ploiement personnalis\u00e9 \u00e0 l&rsquo;aide d&rsquo;un fichier Docker et des <a href=\"https:\/\/docs.sevalla.com\/applications\/analytics\">analyses compl\u00e8tes<\/a> englobant des donn\u00e9es en temps r\u00e9el et historiques.<\/p>\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>L&rsquo;API Kinsta offre des possibilit\u00e9s qui vont au-del\u00e0 de ce que nous avons \u00e9voqu\u00e9. Une application int\u00e9ressante pourrait \u00eatre la <a href=\"https:\/\/kinsta.com\/fr\/blog\/construire-slackbot-nodejs-api-kinsta-gesion-site\/\">cr\u00e9ation d&rsquo;un Slackbot<\/a> qui vous notifie sur Slack chaque fois qu&rsquo;une extension est obsol\u00e8te. Cette int\u00e9gration peut consid\u00e9rablement rationaliser votre flux de travail et vous permettre de rester inform\u00e9 et proactif.<\/p>\n<p>Vous pouvez \u00e9galement d\u00e9velopper un outil similaire, comme expliqu\u00e9 dans ce guide, pour <a href=\"https:\/\/api-docs.kinsta.com\/tag\/WordPress-Site-Themes-and-Plugins#operation\/updateTheme\" target=\"_blank\" rel=\"noopener noreferrer\">mettre \u00e0 jour vos th\u00e8mes<\/a>, car l&rsquo;API de Kinsta dispose d\u00e9j\u00e0 de points de terminaison pour cela.<\/p>\n<p>L&rsquo;\u00e9quipe Kinsta travaille constamment \u00e0 l&rsquo;ajout de nouvelles fonctionnalit\u00e9s en suivant de pr\u00e8s et en \u00e9coutant les commentaires, comme l&rsquo;explique Kristof Siket, chef de l&rsquo;\u00e9quipe de d\u00e9veloppement de l&rsquo;API Kinsta :<\/p>\n<blockquote><p><em>Les commentaires des utilisateurs d\u00e9terminent l&rsquo;ordre de priorit\u00e9 de l&rsquo;exposition des fonctionnalit\u00e9s. Le plan actuel ne couvre pas enti\u00e8rement la page Outils ; les fonctionnalit\u00e9s sont plut\u00f4t bas\u00e9es sur les demandes des utilisateurs et les commentaires recueillis. Si vous pensez qu&rsquo;un outil ou un point de terminaison sp\u00e9cifique devrait \u00eatre inclus dans l&rsquo;API Kinsta, n&rsquo;h\u00e9sitez pas \u00e0 nous faire part de <a href=\"https:\/\/kinsta.com\/fr\/docs\/information-service\/programme-recherche-kinsta\/#how-to-join\">vos commentaires<\/a>.<\/em><\/p><\/blockquote>\n<p><em>Comment utilisez-vous actuellement l&rsquo;API Kinsta ? Quelles fonctionnalit\u00e9s ou am\u00e9liorations souhaiteriez-vous voir appara\u00eetre dans les prochaines mises \u00e0 jour ?<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Les extensions jouent un r\u00f4le essentiel dans la personnalisation et l&rsquo;am\u00e9lioration de vos sites WordPress. Elles sont utilis\u00e9es pour ajouter des fonctionnalit\u00e9s telles que les formulaires &#8230;<\/p>\n","protected":false},"author":287,"featured_media":76079,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[953,1035,1004,985],"class_list":["post-76078","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-api","topic-extensions-wordpress","topic-react","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>Mettre \u00e0 jour les plugins WordPress sur plusieurs sites avec l&#039;API de Kinsta - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Rationalisez votre gestion de WordPress avec notre guide sur la construction d&#039;un outil pour mettre \u00e0 jour en masse les plugins sur plusieurs sites en utilisant l&#039;API de Kinsta.\" \/>\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\/mise-a-jour-groupee-plugins-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Construire un outil pour mettre \u00e0 jour les plugins WordPress sur plusieurs sites avec l&#039;API Kinsta\" \/>\n<meta property=\"og:description\" content=\"Rationalisez votre gestion de WordPress avec notre guide sur la construction d&#039;un outil pour mettre \u00e0 jour en masse les plugins sur plusieurs sites en utilisant l&#039;API de Kinsta.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/mise-a-jour-groupee-plugins-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=\"2024-02-14T18:18:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-09T14:14:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/02\/wp-bulk-update-plugins-wordpress.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=\"Rationalisez votre gestion de WordPress avec notre guide sur la construction d&#039;un outil pour mettre \u00e0 jour en masse les plugins sur plusieurs sites en utilisant l&#039;API de Kinsta.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/02\/wp-bulk-update-plugins-wordpress.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=\"21 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/mise-a-jour-groupee-plugins-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/mise-a-jour-groupee-plugins-wordpress\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Construire un outil pour mettre \u00e0 jour les plugins WordPress sur plusieurs sites avec l&rsquo;API Kinsta\",\"datePublished\":\"2024-02-14T18:18:12+00:00\",\"dateModified\":\"2025-10-09T14:14:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/mise-a-jour-groupee-plugins-wordpress\/\"},\"wordCount\":3761,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/mise-a-jour-groupee-plugins-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/mise-a-jour-groupee-plugins-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/mise-a-jour-groupee-plugins-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/mise-a-jour-groupee-plugins-wordpress\/\",\"name\":\"Mettre \u00e0 jour les plugins WordPress sur plusieurs sites avec l'API de Kinsta - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/mise-a-jour-groupee-plugins-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/mise-a-jour-groupee-plugins-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg\",\"datePublished\":\"2024-02-14T18:18:12+00:00\",\"dateModified\":\"2025-10-09T14:14:59+00:00\",\"description\":\"Rationalisez votre gestion de WordPress avec notre guide sur la construction d'un outil pour mettre \u00e0 jour en masse les plugins sur plusieurs sites en utilisant l'API de Kinsta.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/mise-a-jour-groupee-plugins-wordpress\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/mise-a-jour-groupee-plugins-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/mise-a-jour-groupee-plugins-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/mise-a-jour-groupee-plugins-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Services Kinsta\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/services-kinsta\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Construire un outil pour mettre \u00e0 jour les plugins WordPress sur plusieurs sites avec l&#8217;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":"Mettre \u00e0 jour les plugins WordPress sur plusieurs sites avec l'API de Kinsta - Kinsta\u00ae","description":"Rationalisez votre gestion de WordPress avec notre guide sur la construction d'un outil pour mettre \u00e0 jour en masse les plugins sur plusieurs sites en utilisant l'API de Kinsta.","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\/mise-a-jour-groupee-plugins-wordpress\/","og_locale":"fr_FR","og_type":"article","og_title":"Construire un outil pour mettre \u00e0 jour les plugins WordPress sur plusieurs sites avec l'API Kinsta","og_description":"Rationalisez votre gestion de WordPress avec notre guide sur la construction d'un outil pour mettre \u00e0 jour en masse les plugins sur plusieurs sites en utilisant l'API de Kinsta.","og_url":"https:\/\/kinsta.com\/fr\/blog\/mise-a-jour-groupee-plugins-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2024-02-14T18:18:12+00:00","article_modified_time":"2025-10-09T14:14:59+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Rationalisez votre gestion de WordPress avec notre guide sur la construction d'un outil pour mettre \u00e0 jour en masse les plugins sur plusieurs sites en utilisant l'API de Kinsta.","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Joel Olawanle","Dur\u00e9e de lecture estim\u00e9e":"21 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/mise-a-jour-groupee-plugins-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/mise-a-jour-groupee-plugins-wordpress\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Construire un outil pour mettre \u00e0 jour les plugins WordPress sur plusieurs sites avec l&rsquo;API Kinsta","datePublished":"2024-02-14T18:18:12+00:00","dateModified":"2025-10-09T14:14:59+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/mise-a-jour-groupee-plugins-wordpress\/"},"wordCount":3761,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/mise-a-jour-groupee-plugins-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg","inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/mise-a-jour-groupee-plugins-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/mise-a-jour-groupee-plugins-wordpress\/","url":"https:\/\/kinsta.com\/fr\/blog\/mise-a-jour-groupee-plugins-wordpress\/","name":"Mettre \u00e0 jour les plugins WordPress sur plusieurs sites avec l'API de Kinsta - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/mise-a-jour-groupee-plugins-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/mise-a-jour-groupee-plugins-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg","datePublished":"2024-02-14T18:18:12+00:00","dateModified":"2025-10-09T14:14:59+00:00","description":"Rationalisez votre gestion de WordPress avec notre guide sur la construction d'un outil pour mettre \u00e0 jour en masse les plugins sur plusieurs sites en utilisant l'API de Kinsta.","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/mise-a-jour-groupee-plugins-wordpress\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/mise-a-jour-groupee-plugins-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/mise-a-jour-groupee-plugins-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/mise-a-jour-groupee-plugins-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Services Kinsta","item":"https:\/\/kinsta.com\/fr\/sujets\/services-kinsta\/"},{"@type":"ListItem","position":3,"name":"Construire un outil pour mettre \u00e0 jour les plugins WordPress sur plusieurs sites avec l&#8217;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\/76078","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=76078"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/76078\/revisions"}],"predecessor-version":[{"id":81263,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/76078\/revisions\/81263"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76078\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76078\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76078\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76078\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76078\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76078\/translations\/jp"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76078\/translations\/es"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76078\/translations\/nl"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/76078\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/76079"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=76078"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=76078"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=76078"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}