{"id":67029,"date":"2024-02-14T15:25:30","date_gmt":"2024-02-14T18:25:30","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=67029&#038;preview=true&#038;preview_id=67029"},"modified":"2025-10-09T09:50:42","modified_gmt":"2025-10-09T12:50:42","slug":"atualizacao-em-massa-de-plugins-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/atualizacao-em-massa-de-plugins-wordpress\/","title":{"rendered":"Crie uma Ferramenta para Atualiza\u00e7\u00e3o em Massa de Plugins WordPress em V\u00e1rios Sites com a API da Kinsta"},"content":{"rendered":"<p>Os plugins desempenham um papel fundamental na personaliza\u00e7\u00e3o e no aprimoramento dos sites WordPress. Eles s\u00e3o usados para adicionar funcionalidades como <a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-plugins-formulario-contato\/\">formul\u00e1rios de contato<\/a>, <a href=\"https:\/\/kinsta.com\/pt\/blog\/plugins-ecommerce-do-wordpress\/\">eCommerce<\/a> e <a href=\"https:\/\/kinsta.com\/pt\/topicos\/analises\/\">an\u00e1lises<\/a> aos seus sites sem a necessidade de codifica\u00e7\u00e3o.<\/p>\n<p>Assim como o WordPress, que recebe atualiza\u00e7\u00f5es regulares, os plugins tamb\u00e9m recebem atualiza\u00e7\u00f5es regulares para adicionar novos recursos, corrigir uma falha de seguran\u00e7a, aumentar a compatibilidade e muito mais. \u00c9 por isso que a Kinsta incluiu o <a href=\"https:\/\/kinsta.com\/pt\/changelog\/atualize-plugins-e-temas\/\">gerenciamento de plugins e temas<\/a> entre as ferramentas dispon\u00edveis no MyKinsta para cada um de seus sites.<\/p>\n<p>No entanto, atualizar plugins em diversos sites ainda pode ser uma tarefa desafiadora para clientes ocupados, como ag\u00eancias. Este artigo apresenta uma solu\u00e7\u00e3o que utiliza a <a href=\"https:\/\/kinsta.com\/pt\/changelog\/kinsta-api\/\">API da Kinsta<\/a> para gerenciar plugins simultaneamente em v\u00e1rios 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>O que voc\u00ea est\u00e1 construindo<\/h2>\n<p>Este guia se concentra na cria\u00e7\u00e3o de uma solu\u00e7\u00e3o avan\u00e7ada usando a API da Kinsta, que agora oferece endpoints para recuperar e atualizar plugins.<\/p>\n<p>Nele, criamos um aplicativo React personalizado que busca todos os plugins da conta da sua empresa na Kinsta. Essa ferramenta permite que voc\u00ea <strong>identifique e atualize um plugin espec\u00edfico em v\u00e1rios sites<\/strong>, simplificando significativamente o processo.<\/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=\"Ferramenta desenvolvida com React e a API da Kinsta para atualizar em massa plugins de WordPress em v\u00e1rios sites.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Ferramenta desenvolvida com React e a API da Kinsta para atualizar em massa plugins de WordPress em v\u00e1rios sites.<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Se voc\u00ea \u00e9 uma <a href=\"https:\/\/kinsta.com\/pt\/diretorio-de-agencias\/\">ag\u00eancia<\/a> que gerencia v\u00e1rios sites na Kinsta, pode come\u00e7ar a usar essa ferramenta imediatamente sem precisar se aprofundar neste guia, a menos que esteja interessado em entender como ela interage com a API para adicionar funcionalidades personalizadas.<\/p>\n<p>Para usar essa ferramenta, voc\u00ea deve criar um reposit\u00f3rio <a href=\"https:\/\/kinsta.com\/pt\/topicos\/git\/\">Git<\/a> <a href=\"https:\/\/github.com\/kinsta\/Kinsta-Plugin-Manager\" target=\"_blank\" rel=\"noopener noreferrer\">usando este template no GitHub<\/a>. Selecione <strong>Usar este template <\/strong>&gt;<strong> Criar um novo reposit\u00f3rio<\/strong> para copiar o c\u00f3digo inicial em um novo reposit\u00f3rio na sua conta do GitHub.<\/p>\n<p>Depois que o reposit\u00f3rio estiver configurado, implante em nossa plataforma de hospedagem de sites est\u00e1ticos gratuitamente e adicione o seguinte como <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-sao-variaveis-de-ambiente\/\">vari\u00e1veis de ambiente<\/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>Isso \u00e9 tudo. Agora voc\u00ea pode usar essa ferramenta na sua empresa Kinsta para simplificar os processos de gerenciamento de sites.<\/p>\n<\/aside>\n\n<h2>Pr\u00e9-requisitos do aplicativo<\/h2>\n<p>Para acompanhar este projeto, voc\u00ea deve ter o seguinte:<\/p>\n<ul>\n<li>Conhecimento b\u00e1sico de <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-html\/\">HTML<\/a>, <a href=\"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-css\/\">CSS<\/a> e <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a>.<\/li>\n<li>Alguma familiaridade com <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-react-js\/\">React<\/a>.<\/li>\n<li>Node.js e npm (<a href=\"https:\/\/kinsta.com\/pt\/blog\/npm-gerenciador-pacotes-node\/\">Node Package Manager<\/a>) ou yarn instalados em seu computador.<\/li>\n<\/ul>\n<h2>Entendendo a API da Kinsta<\/h2>\n<p>A <a href=\"https:\/\/kinsta.com\/pt\/docs\/kinsta-api\/\">API da Kinsta<\/a> \u00e9 uma ferramenta poderosa que permite que voc\u00ea interaja programaticamente com os servi\u00e7os Kinsta, como sites WordPress hospedados. Ela pode ajudar a automatizar v\u00e1rias tarefas relacionadas ao gerenciamento do WordPress, incluindo <a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-api\/\">cria\u00e7\u00e3o de sites<\/a>, <a href=\"https:\/\/kinsta.com\/pt\/blog\/agendar-tarefas-api-kinsta\/\">recupera\u00e7\u00e3o de informa\u00e7\u00f5es de sites<\/a>, <a href=\"https:\/\/kinsta.com\/pt\/blog\/chave-api-kinsta\/#how-to-use-kinsta-api-to-build-a-status-checker\">obten\u00e7\u00e3o do status de um site<\/a>, <a href=\"https:\/\/kinsta.com\/pt\/blog\/registros-do-servidor-api\/\">navega\u00e7\u00e3o<\/a> e <a href=\"https:\/\/kinsta.com\/pt\/blog\/backups-wordpress-api\/\">restaura\u00e7\u00e3o de backups<\/a>, e muito mais.<\/p>\n<p>Para usar a API da Kinsta, voc\u00ea deve ter uma conta com pelo menos um site, <a href=\"https:\/\/sevalla.com\/application-hosting\/\">aplicativo<\/a> ou <a href=\"https:\/\/sevalla.com\/database-hosting\/\">banco de dados<\/a> de WordPress no MyKinsta. Voc\u00ea tamb\u00e9m deve gerar uma chave API para autenticar e acessar sua conta.<\/p>\n<p>Para gerar uma chave API:<\/p>\n<ol start=\"1\">\n<li>V\u00e1 para o painel <a href=\"https:\/\/my.kinsta.com\/?lang=pt\" target=\"_blank\" rel=\"noopener noreferrer\">MyKinsta<\/a>.<\/li>\n<li>Navegue at\u00e9 a p\u00e1gina <strong>Chaves API <\/strong>(<strong>Seu nome <\/strong>&gt;<strong> Configura\u00e7\u00f5es da empresa <\/strong>&gt;<strong> Chaves API<\/strong>).<\/li>\n<li>Clique em <strong>Criar chave API<\/strong>.<\/li>\n<li>Escolha uma expira\u00e7\u00e3o ou defina uma data de in\u00edcio personalizada e o n\u00famero de horas para a chave expirar.<\/li>\n<li>D\u00ea \u00e0 chave um nome exclusivo.<\/li>\n<li>Clique em <strong>Gerar<\/strong>.<\/li>\n<\/ol>\n<p>Depois de criar uma chave API, copie e armazene em um local seguro (recomenda-se o uso de um <a href=\"https:\/\/kinsta.com\/pt\/blog\/gerenciadores-de-senhas\/\">gerenciador de senhas<\/a>). Voc\u00ea pode gerar v\u00e1rias chaves API, que ser\u00e3o listadas na p\u00e1gina <strong>Chaves API<\/strong>. Se voc\u00ea precisar revogar uma chave API, clique no bot\u00e3o <strong>Revogar<\/strong>.<\/p>\n<h2>Configure seu ambiente de desenvolvimento do React<\/h2>\n<p>O React \u00e9 uma <a href=\"https:\/\/kinsta.com\/pt\/blog\/bibliotecas-javascript\/\">biblioteca JavaScript popular<\/a> para criar interfaces de usu\u00e1rio. Ela permite que os desenvolvedores criem componentes declarativos que representam diferentes partes da interface do usu\u00e1rio. Esses componentes s\u00e3o definidos usando a <a href=\"https:\/\/kinsta.com\/pt\/blog\/sintaxe-jsx\/\">sintaxe JSX<\/a>, uma combina\u00e7\u00e3o de JavaScript e HTML.<\/p>\n<p>Para come\u00e7ar, siga estas etapas:<\/p>\n<ol start=\"1\">\n<li>Navegue at\u00e9 a pasta em que voc\u00ea deseja criar seu projeto e use <a href=\"https:\/\/reactjs.org\/docs\/create-a-new-react-app.html#create-react-app\" target=\"_blank\" rel=\"noopener noreferrer\">create-react-app<\/a> para criar um projeto React:\n<pre><code class=\"language-bash\">npx create-react-app &lt;project-name&gt;<\/code><\/pre>\n<p>Altere <code>&lt;project-name&gt;<\/code> acima para o nome que voc\u00ea preferir para seu projeto.<\/li>\n<li>Quando a opera\u00e7\u00e3o for conclu\u00edda com sucesso, acesse o diret\u00f3rio do projeto e inicie o servidor de desenvolvimento:\n<pre><code class=\"language-bash\">cd &lt;project-name&gt;\nnpm run start<\/code><\/pre>\n<p>Seu aplicativo React ser\u00e1 aberto no navegador web padr\u00e3o em http:\/\/localhost:3000.<\/li>\n<\/ol>\n<p>Ao criar um projeto React usando <code>create-react-app<\/code>, voc\u00ea configura uma estrutura de pastas. A pasta crucial \u00e9 <strong>src<\/strong>, onde o desenvolvimento acontece. Os principais arquivos dessa pasta s\u00e3o:<\/p>\n<ul>\n<li><strong>App.js:<\/strong> Esse \u00e9 o componente principal, que renderiza todos os outros em seu aplicativo React. \u00c9 aqui que voc\u00ea adicionar\u00e1 todo o c\u00f3digo para essa ferramenta.<\/li>\n<li><strong>index.js:<\/strong> \u00c9 o ponto de entrada, carregado primeiro e respons\u00e1vel por renderizar o <strong>App.js<\/strong>.<\/li>\n<li><strong>index.css:<\/strong> Esse arquivo define o estilo e o layout gerais do aplicativo. Todos os estilos ser\u00e3o adicionados aqui.<\/li>\n<\/ul>\n<h2>Construindo e estilizando a Interface de Usu\u00e1rio<\/h2>\n<p>Vamos nos concentrar na cria\u00e7\u00e3o e no estilo da interface de um aplicativo b\u00e1sico hospedado no arquivo <strong>App.js<\/strong> sem envolver roteamento. Nossa interface de usu\u00e1rio principal \u00e9 um formul\u00e1rio com um campo <code>select<\/code> para listar plugins exclusivos em seus sites da Kinsta, juntamente com um bot\u00e3o <code>submit<\/code> para buscar sites com o plugin selecionado.<\/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 de usu\u00e1rio para a ferramenta de gerenciamento de plugins para acessar uma lista de plugins e carregar sites.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Interface de usu\u00e1rio para a ferramenta de gerenciamento de plugins para acessar uma lista de plugins e carregar sites.<\/figcaption><\/figure>\n<p>Al\u00e9m disso, uma se\u00e7\u00e3o de exibi\u00e7\u00e3o mostra detalhes do site, como nome, status do plugin e vers\u00e3o. Ela inclui um bot\u00e3o para atualizar cada site, se necess\u00e1rio, e um bot\u00e3o geral para atualizar em massa todos os sites que exigem a atualiza\u00e7\u00e3o do plugin.<\/p>\n<p>Em seu arquivo <strong>App.js<\/strong>, adicione o seguinte c\u00f3digo:<\/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>Para estilizar este projeto, visite o <a href=\"https:\/\/github.com\/kinsta\/Kinsta-Plugin-Manager\/blob\/main\/src\/index.css\" target=\"_blank\" rel=\"noopener noreferrer\">arquivo CSS em nosso reposit\u00f3rio completo do GitHub<\/a> e copie o c\u00f3digo dele em seu arquivo <strong>index.css<\/strong>.<\/p>\n<h2>Interagindo com a API da Kinsta<\/h2>\n<p>A API da Kinsta oferece uma s\u00e9rie de endpoints essenciais para voc\u00ea acessar v\u00e1rios par\u00e2metros necess\u00e1rios para interagir com o plugin de um site. Por exemplo, se voc\u00ea deseja recuperar ou atualizar um plugin, primeiro deve adquirir o ID do ambiente do site.<\/p>\n<p>Para obter o ID de ambiente, siga um processo passo a passo. Primeiramente, identifique o ID do site, que depende diretamente do ID da empresa Kinsta. Esse ID da empresa est\u00e1 dispon\u00edvel no painel MyKinsta, acessando <strong>Configura\u00e7\u00f5es da empresa<\/strong> e depois <strong>Detalhes de cobran\u00e7a<\/strong>. \u00c9 importante tratar esse ID como uma informa\u00e7\u00e3o sens\u00edvel, semelhante \u00e0 sua chave API, e n\u00e3o compartilh\u00e1-lo.<\/p>\n<p>Voc\u00ea pode armazen\u00e1-las com seguran\u00e7a como vari\u00e1veis de ambiente em seu aplicativo React, criando um arquivo <strong>.env<\/strong> na pasta raiz do seu projeto. Nesse arquivo, adicione o seguinte com o valor correto:<\/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>Para acessar essas vari\u00e1veis de ambiente em seu projeto, voc\u00ea pode usar a sintaxe <code>process.env.THE_VARIABLE<\/code>. Por exemplo, para acessar <code>REACT_APP_KINSTA_COMPANY_ID<\/code>, voc\u00ea usaria <code>process.env.REACT_APP_KINSTA_COMPANY_ID<\/code>.<\/p>\n<p>Ao adicionar o arquivo <strong>.env<\/strong> ao seu arquivo <strong><a href=\"https:\/\/kinsta.com\/pt\/blog\/nao-funcionamento-do-gitignore\/\">.gitignore<\/a><\/strong> \u00e9 importante para evitar que voc\u00ea o envie para o GitHub. Isso garante que suas informa\u00e7\u00f5es confidenciais permane\u00e7am privadas e seguras.<\/p>\n<h3>Recupere todos os sites e plugins usando a API da Kinsta<\/h3>\n<p>Para recuperar dados de plugin para todos os sites gerenciados pela sua conta da empresa Kinsta, voc\u00ea pode utilizar a API da Kinsta executando tr\u00eas solicita\u00e7\u00f5es de API. Aqui est\u00e1 uma explica\u00e7\u00e3o simplificada:<\/p>\n<p>Comece armazenando a URL da API da Kinsta em uma vari\u00e1vel para facilitar a refer\u00eancia.<\/p>\n<pre><code class=\"language-js\">const KinstaAPIUrl = 'https:\/\/api.kinsta.com\/v2';<\/code><\/pre>\n<ol start=\"1\">\n<li><strong>Obtenha a lista de sites da empresa:<\/strong> Voc\u00ea precisa obter uma lista de todos os sites WordPress associados \u00e0 sua empresa. Para isso, crie uma consulta usando o ID da empresa, fa\u00e7a uma solicita\u00e7\u00e3o GET com a autoriza\u00e7\u00e3o apropriada, processe a resposta no formato JSON e extraia os detalhes do site da resposta.\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>Recupere o ID do ambiente do site:<\/strong> A etapa anterior retorna uma array de sites WordPress. Para cada site, fa\u00e7a um loop e outra solicita\u00e7\u00e3o GET para obter os ambientes associados.\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>Obtenha a lista de plugins de sites WordPress:<\/strong> Depois de obter o ID do site, o nome e o ambiente, voc\u00ea pode usar o ID do ambiente para recuperar uma lista de todos os plugins em cada site. Primeiro, voc\u00ea precisa resolver as promessas da etapa anterior e, em seguida, fazer as solicita\u00e7\u00f5es GET para os plugins:\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>Consolidando o processo:<\/strong> Para simplificar o processo, voc\u00ea pode encapsular essas solicita\u00e7\u00f5es de API em uma \u00fanica fun\u00e7\u00e3o ass\u00edncrona <code>getSitesWithPluginData<\/code>, que pode ser reutilizada. Essa fun\u00e7\u00e3o executar\u00e1 as etapas descritas acima e retornar\u00e1 uma array que cont\u00e9m as informa\u00e7\u00f5es essenciais sobre cada site, incluindo o ID do ambiente, o nome do site e uma array de plugins.\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>Recupere plugins exclusivos de todos os sites<\/h3>\n<p>No seu aplicativo, a inten\u00e7\u00e3o \u00e9 apresentar a lista de plugins dispon\u00edveis em todos os sites atrav\u00e9s de um menu suspenso <code>select<\/code>. Para isso, utilizaremos a fun\u00e7\u00e3o <code>getSitesWithPluginData<\/code> que coleta o ID do ambiente, o nome e os plugins de cada site. Com essas informa\u00e7\u00f5es em m\u00e3os, \u00e9 poss\u00edvel montar uma lista completa de plugins.<\/p>\n<p>Defina uma nova fun\u00e7\u00e3o, <code>fetchAllSitesPlugins<\/code>, que chama <code>getSitesWithPluginData<\/code> e processa sua sa\u00edda para obter uma lista de todos os plugins:<\/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>Este c\u00f3digo percorre os dados de cada site e compila uma lista de plugins. Para garantir que cada plugin seja listado apenas uma vez, utilize o objeto <code>Set<\/code> do JavaScript, que armazena valores \u00fanicos:<\/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>O m\u00e9todo <code>.flat()<\/code> simplifica a estrutura do array e <code>.map()<\/code> faz um loop para extrair apenas os nomes dos plugins. O objeto <code>Set<\/code> filtra as duplicatas.<\/p>\n<p>Para carregar e exibir esses dados em seu aplicativo React, utilize os hooks <code>useState()<\/code> e <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>O hook <code>useEffect()<\/code> garante que os dados sejam obtidos e definidos quando o componente for montado. O hook <code>useState()<\/code> mant\u00e9m a lista de plugins exclusivos.<\/p>\n<p>Por fim, exiba esses plugins em um campo <code>select<\/code>. Se os plugins ainda estiverem sendo carregados, mostre uma mensagem de espa\u00e7o reservado:<\/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>Neste c\u00f3digo:<\/p>\n<ul>\n<li>O elemento <code>select<\/code> est\u00e1 vinculado a uma vari\u00e1vel de estado <code>pluginName<\/code> para armazenar o valor selecionado.<\/li>\n<li>O manipulador <code>onChange<\/code> atualiza esse estado sempre que um novo plugin \u00e9 selecionado.<\/li>\n<li>A fun\u00e7\u00e3o <code>plugins.map()<\/code> cria dinamicamente elementos de op\u00e7\u00e3o para cada plugin.<\/li>\n<\/ul>\n<p>Seguindo essas etapas, seu aplicativo exibir\u00e1 efetivamente uma lista exclusiva de plugins obtidos de todos os sites, fornecendo uma interface limpa e f\u00e1cil de usar para a sele\u00e7\u00e3o.<\/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=\"Selecione o campo que mostra a lista de plugins exclusivos de todos os sites na conta da empresa Kinsta.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Selecione o campo que mostra a lista de plugins exclusivos de todos os sites na conta da empresa Kinsta.<\/figcaption><\/figure>\n<h3>Busque sites com um plugin espec\u00edfico<\/h3>\n<p>At\u00e9 agora, voc\u00ea conseguiu recuperar plugins da conta da empresa Kinsta, mas deseja percorrer todos os sites para buscar sites com um plugin espec\u00edfico, armazen\u00e1-los em um estado e depois exibi-los.<\/p>\n<p>Para fazer isso, crie dois estados: Um para armazenar os sites (<code>sites<\/code>) e outro para indicar o status de carregamento (<code>isLoading<\/code>).<\/p>\n<pre><code class=\"language-jsx\">const [sites, setSites] = useState([]);\nconst [isLoading, setIsLoading] = useState(false);<\/code><\/pre>\n<p>Em seguida, crie uma fun\u00e7\u00e3o <code>fetchSites<\/code> para filtrar cada site e verificar se ele cont\u00e9m o plugin selecionado. Se isso acontecer, os detalhes relevantes do site ser\u00e3o armazenados.<\/p>\n<p>Essa fun\u00e7\u00e3o come\u00e7a definindo <code>isLoading<\/code> como <code>true<\/code> e limpando a array <code>sites<\/code>. Em seguida, ela chama <code>getSitesWithPluginData<\/code> para buscar todos os dados do 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>Na fun\u00e7\u00e3o <code>sitesWithPluginDataFiltered<\/code>:<\/p>\n<ul>\n<li>O m\u00e9todo <code>.filter()<\/code> isola os sites que cont\u00eam o plugin selecionado.<\/li>\n<li>Em seguida, o m\u00e9todo <code>.map()<\/code> extrai os detalhes necess\u00e1rios de cada site.<\/li>\n<li>Por fim, os hooks <code>setSites<\/code> e <code>setIsLoading<\/code> atualizam o estado com os novos dados e o status de carregamento.<\/li>\n<\/ul>\n<p>Em seguida, crie uma fun\u00e7\u00e3o <code>handleSubmit<\/code> e adicione ao bot\u00e3o <strong>Fetch sites with this plugin<\/strong> no formul\u00e1rio para invocar a fun\u00e7\u00e3o quando um usu\u00e1rio selecionar um plugin e enviar o formul\u00e1rio. Essa fun\u00e7\u00e3o impede a a\u00e7\u00e3o padr\u00e3o do formul\u00e1rio e chama <code>fetchSites<\/code>:<\/p>\n<pre><code class=\"language-jsx\">const handleSubmit = (e) =&gt; {\n    e.preventDefault();\n    fetchSites();\n};<\/code><\/pre>\n<p>Dessa forma, ao selecionar um plugin espec\u00edfico e clicar no bot\u00e3o de envio, o sistema realiza a busca por todos os sites que utilizam esse plugin, armazenando no estado de <code>sites<\/code>.<\/p>\n<h4>Exiba sites com o plugin selecionado<\/h4>\n<p>Depois de armazenar com \u00eaxito os sites relevantes no estado <code>sites<\/code>, a pr\u00f3xima etapa \u00e9 exibir esses dados na interface de usu\u00e1rio do seu projeto. O objetivo \u00e9 apresentar cada site como um item de lista com detalhes importantes e um bot\u00e3o condicional para atualiza\u00e7\u00f5es de plugins.<\/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>No c\u00f3digo acima, o array <code>sites<\/code> \u00e9 iterado usando o m\u00e9todo <code>.map()<\/code>, criando uma lista (<code>&lt;ul&gt;<\/code>) de sites (elementos<code>&lt;li&gt;<\/code>). Cada item da lista cont\u00e9m detalhes sobre o site e um bot\u00e3o para atualiza\u00e7\u00f5es do plugin.<\/p>\n<p>O bot\u00e3o na interface do usu\u00e1rio altera o estilo e a fun\u00e7\u00e3o com base no status de atualiza\u00e7\u00e3o do plugin: Ele fica ativo para atualiza\u00e7\u00f5es dispon\u00edveis, caso contr\u00e1rio, \u00e9 desativado e rotulado como &#8220;Up to date&#8221;, controlado por <a href=\"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-css\/\">CSS<\/a> condicional e pelo atributo disabled.<\/p>\n<p>Al\u00e9m disso, para melhorar a experi\u00eancia do usu\u00e1rio, vamos adicionar condicionalmente um texto de carregamento usando o estado <code>isLoading<\/code> quando os sites estiverem sendo buscados.<\/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=\"Uma lista de sites que usam um determinado plugin da conta da empresa Kinsta com bot\u00f5es para atualiz\u00e1-los individualmente ou de uma s\u00f3 vez.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Uma lista de sites que usam um determinado plugin da conta da empresa Kinsta com bot\u00f5es para atualiz\u00e1-los individualmente ou de uma s\u00f3 vez.<\/figcaption><\/figure>\n<h3>Atualize plugins com a API da Kinsta<\/h3>\n<p>At\u00e9 agora, conseguimos buscar sites com detalhes importantes e acessar seus plugins. O objetivo dessa ferramenta \u00e9 facilitar a atualiza\u00e7\u00e3o de plugins em v\u00e1rios sites usando a API da Kinsta. O processo envolve iniciar atualiza\u00e7\u00f5es e acompanhar seu progresso.<\/p>\n<h4>Acionando as atualiza\u00e7\u00f5es de plugins<\/h4>\n<p>Para cada site listado, disponibilizamos um bot\u00e3o, cujo estilo indica se existe uma atualiza\u00e7\u00e3o dispon\u00edvel, ao clicar no bot\u00e3o voc\u00ea aciona a fun\u00e7\u00e3o <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>O manipulador <code>onClick<\/code> chama <code>updatePlugin<\/code> com o ID do ambiente do site e a vers\u00e3o mais recente do plugin (<code>updateVersion<\/code>). Essa fun\u00e7\u00e3o envia uma solicita\u00e7\u00e3o PUT para a API da Kinsta para atualizar o plugin.<\/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>Acompanhe o progresso da atualiza\u00e7\u00e3o<\/h4>\n<p>Ap\u00f3s iniciar a atualiza\u00e7\u00e3o, \u00e9 importante acompanhar o seu progresso. A API da Kinsta retorna uma resposta como a seguinte ao iniciar uma atualiza\u00e7\u00e3o:<\/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>O <code>operation_id<\/code> rastreia o status da atualiza\u00e7\u00e3o por meio do endpoint de opera\u00e7\u00f5es. Crie uma fun\u00e7\u00e3o para fazer essa solicita\u00e7\u00e3o de API, esperando o <code>operation_id<\/code> como um argumento:<\/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>Dentro de <code>updatePlugin<\/code>, use uma instru\u00e7\u00e3o <code>if<\/code> para verificar se as solicita\u00e7\u00f5es de atualiza\u00e7\u00e3o inicial <code>status<\/code> \u00e9 <code>202<\/code>. Em caso afirmativo, voc\u00ea define um intervalo para chamar <code>checkPluginUpdateStatus<\/code> a cada cinco segundos (5000 milissegundos).<\/p>\n<p>O intervalo realiza verifica\u00e7\u00f5es cont\u00ednuas do status da atualiza\u00e7\u00e3o e, em caso de sucesso, encerra o intervalo e aciona <code>fetchSites<\/code> para renovar a lista de sites. Se algum erro surgir durante essas verifica\u00e7\u00f5es, este ser\u00e1 registrado no 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>Feedback do usu\u00e1rio durante a opera\u00e7\u00e3o<\/h4>\n<p>Tudo funciona bem neste ponto, mas \u00e9 bom que voc\u00ea informe o usu\u00e1rio sobre o andamento da opera\u00e7\u00e3o em vez de deix\u00e1-lo na d\u00favida. Voc\u00ea pode fazer isso exibindo uma notifica\u00e7\u00e3o que aparece quando a opera\u00e7\u00e3o est\u00e1 em andamento e \u00e9 apagada quando a opera\u00e7\u00e3o \u00e9 conclu\u00edda. Crie um estado <code>showStatusBar<\/code> para controlar isso:<\/p>\n<pre><code class=\"language-jsx\">const [showStatusBar, setShowStatusBar] = useState(false);<\/code><\/pre>\n<p>Quando <code>showStatusBar<\/code> \u00e9 <code>true<\/code>, uma barra de status aparece na parte superior da tela, sinalizando que uma atualiza\u00e7\u00e3o est\u00e1 em andamento. Esta barra \u00e9 estilizada para permanecer fixa no topo da tela.<\/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>Agora voc\u00ea pode ajustar a instru\u00e7\u00e3o <code>if<\/code> na fun\u00e7\u00e3o <code>updatePlugin<\/code> para definir <code>showStatusBar<\/code> para <code>true<\/code> ou <code>false<\/code> com base no status da atualiza\u00e7\u00e3o:<\/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>Esta estrat\u00e9gia assegura que os usu\u00e1rios sejam constantemente atualizados sobre o estado das atualiza\u00e7\u00f5es do plugin, melhorando significativamente a usabilidade da ferramenta.<\/p>\n<h3>Atualize os plugins em v\u00e1rios sites com a API da Kinsta<\/h3>\n<p>O principal recurso dessa ferramenta \u00e9 a capacidade de atualizar um determinado plugin com um clique em v\u00e1rios sites da sua conta Kinsta. Isso \u00e9 semelhante \u00e0 funcionalidade implementada para atualizar plugins em um \u00fanico site.<\/p>\n<p>O processo envolve percorrer o estado <code>sites<\/code>, que cont\u00e9m os sites com o plugin espec\u00edfico que precisa de uma atualiza\u00e7\u00e3o. Para cada site que requer uma atualiza\u00e7\u00e3o, \u00e9 feita uma solicita\u00e7\u00e3o de API para atualizar o plugin e, posteriormente, rastrear o status da opera\u00e7\u00e3o:<\/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>Essa fun\u00e7\u00e3o est\u00e1 conectada a um bot\u00e3o <strong>Update All<\/strong>. Para aprimorar a experi\u00eancia do usu\u00e1rio, o bot\u00e3o exibe o n\u00famero da vers\u00e3o para a qual os plugins est\u00e3o sendo atualizados:<\/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>Al\u00e9m disso, renderizamos condicionalmente esse bot\u00e3o para ser exibido somente quando mais de um site necessita de uma atualiza\u00e7\u00e3o para o plugin. Se todos os sites estiverem atualizados, uma mensagem ser\u00e1 exibida em seu lugar:<\/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>Com essas implementa\u00e7\u00f5es, agora voc\u00ea pode atualizar sem esfor\u00e7o os plugins em v\u00e1rios sites da sua conta Kinsta, aumentando a efici\u00eancia e garantindo que todos os seus sites estejam atualizados com as vers\u00f5es mais recentes do plugin.<\/p>\n<h2>Implante seu site est\u00e1tico React na Kinsta gratuitamente<\/h2>\n<p>Estamos usando a <a href=\"https:\/\/sevalla.com\/static-site-hosting\/\">hospedagem de site est\u00e1tico da Kinsta<\/a> para demonstrar o aplicativo. Na pr\u00e1tica, voc\u00ea pode executar esse aplicativo React a partir de sua pr\u00f3pria rede ou implant\u00e1-lo somente depois de adicionar um meio de autentica\u00e7\u00e3o a essa ferramenta para seguran\u00e7a.<\/p>\n<p>Voc\u00ea pode hospedar seus aplicativos React criados com o <code>create-react-app<\/code> como um site est\u00e1tico usando nossa hospedagem de site est\u00e1tico gratuitamente, enviando seu c\u00f3digo para um provedor Git preferido (<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>Quando seu reposit\u00f3rio estiver pronto, siga estas etapas para implantar seu site est\u00e1tico na Kinsta:<\/p>\n<ol start=\"1\">\n<li>Fa\u00e7a login ou crie uma conta para visualizar seu painel <a href=\"https:\/\/my.kinsta.com\/?lang=pt\" target=\"_blank\" rel=\"noopener noreferrer\">MyKinsta<\/a>.<\/li>\n<li>Autorize a Kinsta com seu provedor Git.<\/li>\n<li>Clique em <strong>Sites est\u00e1ticos<\/strong> na barra lateral esquerda e, em seguida, clique em <strong>Adicionar site<\/strong>.<\/li>\n<li>Selecione o reposit\u00f3rio e a branch a partir da qual voc\u00ea deseja implantar.<\/li>\n<li>Atribua um nome exclusivo ao seu site.<\/li>\n<li>Adicione as configura\u00e7\u00f5es de build no seguinte formato:\n<ul>\n<li><strong>Comando build:<\/strong> npm run build<\/li>\n<li><strong>Vers\u00e3o do node:<\/strong> 18.16.0<\/li>\n<li><strong>Diret\u00f3rio de publica\u00e7\u00e3o:<\/strong> build<\/li>\n<\/ul>\n<\/li>\n<li>Por fim, clique em <strong>Criar site<\/strong>.<\/li>\n<\/ol>\n<p>E \u00e9 isso! Agora voc\u00ea tem um site implantado em poucos segundos. Voc\u00ea receber\u00e1 um link para acessar a vers\u00e3o implantada do seu site. Posteriormente, voc\u00ea poder\u00e1 adicionar seu <a href=\"https:\/\/docs.sevalla.com\/applications\/domains\">dom\u00ednio personalizado<\/a> e o <a href=\"https:\/\/docs.sevalla.com\/applications\/domains#install-a-custom-ssl-certificate\">certificado SSL<\/a>, se desejar.<\/p>\n<p>Como alternativa \u00e0 hospedagem de sites est\u00e1ticos, voc\u00ea pode implantar seu site est\u00e1tico com a <a href=\"https:\/\/sevalla.com\/application-hosting\/\">hospedagem de aplicativos<\/a> da Kinsta, que oferece maior flexibilidade de hospedagem, uma gama mais ampla de benef\u00edcios e acesso a recursos mais robustos. Por exemplo, escalabilidade, implanta\u00e7\u00e3o personalizada usando um Dockerfile e <a href=\"https:\/\/docs.sevalla.com\/applications\/analytics\">an\u00e1lises abrangentes<\/a> que englobam dados hist\u00f3ricos e em tempo real.<\/p>\n<h2>Resumo<\/h2>\n<p>A API da Kinsta oferece possibilidades que ultrapassam o que mencionamos aqui. Por exemplo, voc\u00ea poderia <a href=\"https:\/\/kinsta.com\/pt\/blog\/criar-slackbot-gerenciamento-sites\/\">criar um Slackbot<\/a> que o notifique no Slack sempre que detectar um plugin desatualizado em seu site. Essa integra\u00e7\u00e3o tem o potencial de aprimorar consideravelmente seu fluxo de trabalho, mantendo-o sempre informado e \u00e0 frente das necessidades de atualiza\u00e7\u00e3o.<\/p>\n<p>Al\u00e9m disso, seguindo as orienta\u00e7\u00f5es deste guia, \u00e9 poss\u00edvel desenvolver uma ferramenta para <a href=\"https:\/\/api-docs.kinsta.com\/tag\/WordPress-Site-Themes-and-Plugins#operation\/updateTheme\">atualizar automaticamente seus temas<\/a>, aproveitando os endpoints j\u00e1 dispon\u00edveis na API da Kinsta.<\/p>\n<p>Kristof Siket, l\u00edder da equipe de desenvolvimento da API na Kinsta, destaca que a equipe est\u00e1 em constante esfor\u00e7o para expandir os recursos dispon\u00edveis, sempre atenta e receptiva ao feedback dos usu\u00e1rios.<\/p>\n<blockquote><p><em>O feedback dos usu\u00e1rios \u00e9 fundamental para definir a prioriza\u00e7\u00e3o e a exposi\u00e7\u00e3o de novas funcionalidades. O plano atual n\u00e3o abrange completamente a p\u00e1gina de Ferramentas; ao inv\u00e9s disso, as funcionalidades s\u00e3o desenvolvidas com base nos pedidos e no feedback dos usu\u00e1rios. Caso considere que uma ferramenta espec\u00edfica ou um endpoint deveria ser inclu\u00eddo na API da Kinsta, fique \u00e0 vontade para <a href=\"https:\/\/kinsta.com\/pt\/docs\/informacoes-de-servico\/programa-de-pesquisa-kinsta\/#how-to-join\">enviar seu feedback<\/a>.<\/em><\/p><\/blockquote>\n<p><em>Como voc\u00ea est\u00e1 utilizando a API da Kinsta atualmente? Quais funcionalidades ou melhorias voc\u00ea gostaria de ver nas pr\u00f3ximas atualiza\u00e7\u00f5es?<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Os plugins desempenham um papel fundamental na personaliza\u00e7\u00e3o e no aprimoramento dos sites WordPress. Eles s\u00e3o usados para adicionar funcionalidades como formul\u00e1rios de contato, eCommerce e &#8230;<\/p>\n","protected":false},"author":287,"featured_media":67030,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[951,1033,1002,983],"class_list":["post-67029","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-api","topic-plugins-wordpress","topic-react","topic-servicos-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>Atualiza\u00e7\u00e3o em Massa de Plugins WordPress em V\u00e1rios Sites com a API da Kinsta - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Simplifique seu gerenciamento do WordPress com nosso guia sobre a cria\u00e7\u00e3o de uma ferramenta para atualizar plugins em massa em v\u00e1rios sites usando a API da 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\/pt\/blog\/atualizacao-em-massa-de-plugins-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Crie uma Ferramenta para Atualiza\u00e7\u00e3o em Massa de Plugins WordPress em V\u00e1rios Sites com a API da Kinsta\" \/>\n<meta property=\"og:description\" content=\"Simplifique seu gerenciamento do WordPress com nosso guia sobre a cria\u00e7\u00e3o de uma ferramenta para atualizar plugins em massa em v\u00e1rios sites usando a API da Kinsta\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/atualizacao-em-massa-de-plugins-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-02-14T18:25:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-09T12:50:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/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=\"Simplifique seu gerenciamento do WordPress com nosso guia sobre a cria\u00e7\u00e3o de uma ferramenta para atualizar plugins em massa em v\u00e1rios sites usando a API da Kinsta\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"20 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/atualizacao-em-massa-de-plugins-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/atualizacao-em-massa-de-plugins-wordpress\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Crie uma Ferramenta para Atualiza\u00e7\u00e3o em Massa de Plugins WordPress em V\u00e1rios Sites com a API da Kinsta\",\"datePublished\":\"2024-02-14T18:25:30+00:00\",\"dateModified\":\"2025-10-09T12:50:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/atualizacao-em-massa-de-plugins-wordpress\/\"},\"wordCount\":3368,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/atualizacao-em-massa-de-plugins-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg\",\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/atualizacao-em-massa-de-plugins-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/atualizacao-em-massa-de-plugins-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/atualizacao-em-massa-de-plugins-wordpress\/\",\"name\":\"Atualiza\u00e7\u00e3o em Massa de Plugins WordPress em V\u00e1rios Sites com a API da Kinsta - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/atualizacao-em-massa-de-plugins-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/atualizacao-em-massa-de-plugins-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg\",\"datePublished\":\"2024-02-14T18:25:30+00:00\",\"dateModified\":\"2025-10-09T12:50:42+00:00\",\"description\":\"Simplifique seu gerenciamento do WordPress com nosso guia sobre a cria\u00e7\u00e3o de uma ferramenta para atualizar plugins em massa em v\u00e1rios sites usando a API da Kinsta\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/atualizacao-em-massa-de-plugins-wordpress\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/atualizacao-em-massa-de-plugins-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/atualizacao-em-massa-de-plugins-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/atualizacao-em-massa-de-plugins-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Servi\u00e7os Kinsta\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/servicos-kinsta\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Crie uma Ferramenta para Atualiza\u00e7\u00e3o em Massa de Plugins WordPress em V\u00e1rios Sites com a API da Kinsta\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"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\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/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\/pt\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Atualiza\u00e7\u00e3o em Massa de Plugins WordPress em V\u00e1rios Sites com a API da Kinsta - Kinsta\u00ae","description":"Simplifique seu gerenciamento do WordPress com nosso guia sobre a cria\u00e7\u00e3o de uma ferramenta para atualizar plugins em massa em v\u00e1rios sites usando a API da 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\/pt\/blog\/atualizacao-em-massa-de-plugins-wordpress\/","og_locale":"pt_PT","og_type":"article","og_title":"Crie uma Ferramenta para Atualiza\u00e7\u00e3o em Massa de Plugins WordPress em V\u00e1rios Sites com a API da Kinsta","og_description":"Simplifique seu gerenciamento do WordPress com nosso guia sobre a cria\u00e7\u00e3o de uma ferramenta para atualizar plugins em massa em v\u00e1rios sites usando a API da Kinsta","og_url":"https:\/\/kinsta.com\/pt\/blog\/atualizacao-em-massa-de-plugins-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2024-02-14T18:25:30+00:00","article_modified_time":"2025-10-09T12:50:42+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Simplifique seu gerenciamento do WordPress com nosso guia sobre a cria\u00e7\u00e3o de uma ferramenta para atualizar plugins em massa em v\u00e1rios sites usando a API da Kinsta","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Joel Olawanle","Tempo estimado de leitura":"20 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/atualizacao-em-massa-de-plugins-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/atualizacao-em-massa-de-plugins-wordpress\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Crie uma Ferramenta para Atualiza\u00e7\u00e3o em Massa de Plugins WordPress em V\u00e1rios Sites com a API da Kinsta","datePublished":"2024-02-14T18:25:30+00:00","dateModified":"2025-10-09T12:50:42+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/atualizacao-em-massa-de-plugins-wordpress\/"},"wordCount":3368,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/atualizacao-em-massa-de-plugins-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg","inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/atualizacao-em-massa-de-plugins-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/atualizacao-em-massa-de-plugins-wordpress\/","url":"https:\/\/kinsta.com\/pt\/blog\/atualizacao-em-massa-de-plugins-wordpress\/","name":"Atualiza\u00e7\u00e3o em Massa de Plugins WordPress em V\u00e1rios Sites com a API da Kinsta - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/atualizacao-em-massa-de-plugins-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/atualizacao-em-massa-de-plugins-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg","datePublished":"2024-02-14T18:25:30+00:00","dateModified":"2025-10-09T12:50:42+00:00","description":"Simplifique seu gerenciamento do WordPress com nosso guia sobre a cria\u00e7\u00e3o de uma ferramenta para atualizar plugins em massa em v\u00e1rios sites usando a API da Kinsta","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/atualizacao-em-massa-de-plugins-wordpress\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/atualizacao-em-massa-de-plugins-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/atualizacao-em-massa-de-plugins-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/02\/wp-bulk-update-plugins-wordpress.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/atualizacao-em-massa-de-plugins-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Servi\u00e7os Kinsta","item":"https:\/\/kinsta.com\/pt\/topicos\/servicos-kinsta\/"},{"@type":"ListItem","position":3,"name":"Crie uma Ferramenta para Atualiza\u00e7\u00e3o em Massa de Plugins WordPress em V\u00e1rios Sites com a API da Kinsta"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","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\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/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\/pt\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/67029","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=67029"}],"version-history":[{"count":10,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/67029\/revisions"}],"predecessor-version":[{"id":73146,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/67029\/revisions\/73146"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67029\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67029\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67029\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67029\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67029\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67029\/translations\/jp"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67029\/translations\/es"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67029\/translations\/nl"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67029\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/67030"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=67029"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=67029"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=67029"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}