{"id":68912,"date":"2023-08-07T18:21:22","date_gmt":"2023-08-07T16:21:22","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=68912&#038;preview=true&#038;preview_id=68912"},"modified":"2025-01-17T13:44:28","modified_gmt":"2025-01-17T12:44:28","slug":"clonar-sitio-kinsta-api","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/clonar-sitio-kinsta-api\/","title":{"rendered":"C\u00f3mo Clonar un Sitio WordPress Utilizando la API de Kinsta y React"},"content":{"rendered":"<p>No hace falta que gestiones muchos de los 800 millones de <a href=\"https:\/\/kinsta.com\/wordpress\/\">sitios de WordPress<\/a> que hay en la red para que busques formas de lanzar nuevos sitios de forma eficaz.<\/p>\n<p>Clonar una configuraci\u00f3n de WordPress existente es una forma de ponerse en marcha r\u00e1pidamente, y los clientes del servicio de <a href=\"https:\/\/kinsta.com\/es\/wordpress-hosting\/\">alojamiento administrado de WordPress<\/a> de Kinsta saben que eso se hace f\u00e1cilmente desde nuestro <a href=\"https:\/\/my.kinsta.com\/?lang=es\">panel de control MyKinsta<\/a>.<\/p>\n<p>Es m\u00e1s, puedes clonar sitios WordPress a escala utilizando tus tecnolog\u00edas de desarrollo de aplicaciones favoritas y la <a href=\"https:\/\/kinsta.com\/es\/docs\/api-kinsta\/\">API de Kinsta<\/a>. En este tutorial, utilizaremos esa API y <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-react-js\/\">React<\/a>, una de las muchas <a href=\"https:\/\/kinsta.com\/es\/blog\/bibliotecas-javascript\/\">bibliotecas de JavaScript<\/a> populares, para mostrar c\u00f3mo funciona.<br \/>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>Lo Que Construir\u00e1s<\/h2>\n<p>Este es el escenario: Eres una agencia de desarrollo de WordPress con uno o m\u00e1s sitios que pueden utilizarse como plantillas de inicio. La aplicaci\u00f3n React para clonar sitios de WordPress que estamos construyendo tiene este aspecto:<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/08\/clone-wp-site-demo.gif\" alt=\"React application for cloning site with Kinsta API\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Aplicaci\u00f3n React para clonar sitios con la API de Kinsta.<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>\u00bfTienes prisa? Todo el c\u00f3digo que aparece a continuaci\u00f3n est\u00e1 disponible en <a href=\"https:\/\/github.com\/kinsta\/clone-wp-site\" target=\"_blank\" rel=\"noopener noreferrer\">esta plantilla de GitHub<\/a>. Util\u00edzala para crear tu propio repositorio y desplegarlo a trav\u00e9s de <a href=\"https:\/\/my.kinsta.com\/?lang=es\">MyKinsta<\/a>, a\u00f1adiendo tu propio ID de empresa y clave API como variables de entorno. (Consulta el <a href=\"https:\/\/github.com\/kinsta\/clone-wp-site\/blob\/main\/README.md\" target=\"_blank\" rel=\"noopener noreferrer\">archivo Readme.md<\/a> para m\u00e1s informaci\u00f3n)<\/p>\n<\/aside>\n\n<h3>Requisitos previos<\/h3>\n<p>Para seguir este tutorial, necesitar\u00e1s conocimientos b\u00e1sicos de <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-el-html\/\">HTML<\/a>, <a href=\"https:\/\/kinsta.com\/es\/blog\/buenas-practicas-css\/\">CSS<\/a> y <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a> y cierta familiaridad con React. Adem\u00e1s, necesitar\u00e1s Node.js y npm (el <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-npm\/\">Gestor de Paquetes de Node<\/a>) o yarn instalados en tu ordenador. Este proyecto se centra en la creaci\u00f3n de una aplicaci\u00f3n de clonaci\u00f3n de WordPress utilizando React y la API Kinsta, m\u00e1s que en los detalles de la creaci\u00f3n y el estilo de la interfaz de usuario.<br \/>\n<\/p>\n<h2>Configurar el Entorno de Desarrollo<\/h2>\n<p>Puedes crear una aplicaci\u00f3n React desde cero y desarrollar tu propia interfaz, o puedes coger la plantilla de inicio <a href=\"https:\/\/kinsta.com\/es\/secciones\/git\/\">Git<\/a> mencionada anteriormente siguiendo estos pasos:<\/p>\n<ol start=\"1\">\n<li>Visita el <a href=\"https:\/\/github.com\/kinsta\/clone-wp-site\" target=\"_blank\" rel=\"noopener noreferrer\">repositorio GitHub<\/a> de este proyecto.<\/li>\n<li>Selecciona <strong>Usar esta plantilla<\/strong> &gt; <strong>Crear un nuevo repositorio<\/strong> para copiar el c\u00f3digo de inicio en un repositorio dentro de tu cuenta de GitHub. (Marca la casilla <strong>incluir todas las ramas<\/strong>)<\/li>\n<li>Extrae el repositorio a tu ordenador local y cambia a la rama <a href=\"https:\/\/github.com\/kinsta\/clone-wp-site\/tree\/starter-files\" target=\"_blank\" rel=\"noopener noreferrer\">starter-files<\/a> utilizando el comando: <code>git checkout starter-files<\/code><\/li>\n<\/ol>\n<ol start=\"4\">\n<li>Instala las dependencias necesarias ejecutando el comando <code>npm install<\/code><\/li>\n<\/ol>\n<p>Una vez completada la instalaci\u00f3n, puedes lanzar el proyecto en tu ordenador local con <code>npm run start<\/code>. Esto abre el proyecto en <a href=\"http:\/\/localhost:3000\/\">http:\/\/localhost:3000\/<\/a>.<\/p>\n<h3>Comprender los archivos del proyecto<\/h3>\n<p>La carpeta <strong>src <\/strong>es el coraz\u00f3n de una aplicaci\u00f3n React, ya que contiene el JavaScript que necesita webpack. En la carpeta se encuentra <strong>App.js,<\/strong> donde se configuran las dos rutas de este proyecto.<\/p>\n<p>Dentro de la carpeta <strong>src<\/strong> est\u00e1n las subcarpetas <strong>components<\/strong> y <strong>pages<\/strong>. La carpeta components contiene componentes reutilizables, como <strong>Header.jsx<\/strong> y <strong>Footer.jsx<\/strong>, utilizados en las p\u00e1ginas <strong>Home.jsx<\/strong> y <strong>Operations.jsx <\/strong>.<\/p>\n<p>Tu objetivo aqu\u00ed es implementar la l\u00f3gica en <strong>Home.jsx<\/strong> y <strong>Operations.jsx<\/strong>, ya que el estilo y el enrutamiento se pueden encontrar en nuestros archivos de inicio de GitHub.<\/p>\n<p><strong>Home.jsx<\/strong> tiene un formulario con dos campos: el nombre del sitio que est\u00e1s creando y un campo de selecci\u00f3n que enumera los sitios de WordPress que se encuentran en tu cuenta MyKinsta (esta lista se obtiene a trav\u00e9s de la API de Kinsta).<\/p>\n<p>Cuando se pulsa el bot\u00f3n de env\u00edo del formulario (<strong>Clonar sitio<\/strong>), se devuelve un objeto que contiene una propiedad <code>operation_id<\/code>. Este ID y el nombre para mostrar se pasar\u00e1n como par\u00e1metros de ruta a <strong>Operations.jsx<\/strong>, donde se informa del estado de la operaci\u00f3n de clonaci\u00f3n. La interfaz tambi\u00e9n incluir\u00e1 enlaces para acceder al inicio de sesi\u00f3n del administrador de WordPress y a la p\u00e1gina de inicio del sitio.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/08\/operations-page.jpg\" alt=\"Operations page showing links to WP admin and site\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">P\u00e1gina de operaciones mostrando enlaces al admin de WP y al sitio.<\/figcaption><\/figure>\n<h2>Utilizaci\u00f3n de la API de Kinsta para Clonar un Sitio de WordPress<\/h2>\n<p>En <strong>Home.jsx<\/strong>, se realizar\u00e1n tres peticiones a la <a href=\"https:\/\/api-docs.kinsta.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">API de Kinsta<\/a>. La primera petici\u00f3n es para obtener una lista de sitios en tu cuenta Kinsta. Esto se almacenar\u00e1 en un estado y luego se iterar\u00e1 al campo de selecci\u00f3n. Esta petici\u00f3n se realizar\u00e1 inmediatamente despu\u00e9s de que la p\u00e1gina se ejecute utilizando el <a href=\"https:\/\/kinsta.com\/es\/blog\/react-efecos-secundarios\/\">gancho useEffect<\/a>.<\/p>\n<p>La segunda y tercera petici\u00f3n se realizan cuando se pulsa el bot\u00f3n <strong>Clonar sitio<\/strong>. La segunda petici\u00f3n obtiene el ID de entorno del sitio que quieres clonar. La tercera petici\u00f3n utiliza ese ID de entorno y el nombre para mostrar del sitio para iniciar la clonaci\u00f3n del sitio.<\/p>\n<h3>Interactuar con la API de Kinsta en React<\/h3>\n<p>En este tutorial, interact\u00faas con dos puntos finales de la API Kinsta:<\/p>\n<ul>\n<li><code><a href=\"https:\/\/api-docs.kinsta.com\/tag\/WordPress-Sites\" target=\"_blank\" rel=\"noopener noreferrer\">\/sites<\/a><\/code>: Este puede devolver una lista de todos los sitios, solicitar un ID de entorno del sitio y, por \u00faltimo, clonar un sitio existente.<\/li>\n<li><code><a href=\"https:\/\/api-docs.kinsta.com\/tag\/Operations\" target=\"_blank\" rel=\"noopener noreferrer\">\/operations<\/a><\/code>: Se utiliza para obtener el estado de la operaci\u00f3n. Por ejemplo, cuando la operaci\u00f3n de clonaci\u00f3n de un sitio est\u00e1 en curso, puedes utilizar este punto final para rastrear mediante programaci\u00f3n el estado de la operaci\u00f3n y determinar cu\u00e1ndo ha finalizado.<\/li>\n<\/ul>\n<p>Para interactuar con la API de Kinsta, necesitas <strong>el ID de<\/strong> <strong>tu<\/strong> <strong>empresa<\/strong> (se puede encontrar en MyKinsta en <strong>Empresa<\/strong> &gt; <strong>Detalles de facturaci\u00f3n<\/strong> &gt; <strong>ID de la empresa<\/strong>) y una <strong>clave API<\/strong>. Aqu\u00ed te explicamos c\u00f3mo <a href=\"https:\/\/kinsta.com\/es\/blog\/kinsta-api-key\/#how-to-create-an-api-key\">crear una clave API de Kinsta<\/a>.<\/p>\n<p>Una vez que tengas estas credenciales, lo mejor es almacenarlas de forma segura como variables de entorno en tu aplicaci\u00f3n React. Para configurar las variables de entorno, crea un archivo <strong>.env<\/strong> en la carpeta ra\u00edz de tu proyecto. Dentro de este archivo, a\u00f1ade las siguientes l\u00edneas:<\/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 acceder a estas variables de entorno dentro de tu proyecto, puedes utilizar la sintaxis <code>process.env.THE_VARIABLE<\/code>. Por ejemplo, para acceder a la <code>REACT_APP_KINSTA_COMPANY_ID<\/code>, utilizar\u00edas <code>process.env.REACT_APP_KINSTA_COMPANY_ID<\/code>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Es importante a\u00f1adir el archivo <strong>.env<\/strong> a tu <a href=\"https:\/\/kinsta.com\/es\/blog\/gitignore-no-funciona\/\"> archivo .gitignore<\/a> para evitar que se env\u00ede a GitHub. Esto asegura que tu informaci\u00f3n sensible, como las claves API, permanezca privada.<\/p>\n<\/aside>\n\n<h3>Clonar un sitio existente con la API de Kinsta<\/h3>\n<p>Empecemos por obtener la lista de todos los sitios cuando <strong>Home.jsx<\/strong> se ejecuta utilizando el Gancho useEffect y almacen\u00e1ndolos en un estado. Para ello, importa los Ganchos useEffect y <a href=\"https:\/\/kinsta.com\/es\/blog\/usestate-react\/\">useState<\/a> y crea un estado para almacenar la matriz de sitios que se obtendr\u00e1n:<\/p>\n<pre><code class=\"language-jsx\">import { useState, useEffect } from 'react';\nconst [sites, setSites] = useState([]);<\/code><\/pre>\n<p>A continuaci\u00f3n, utiliza el gancho useEffect para consultar la API Kinsta mediante la <a href=\"https:\/\/kinsta.com\/es\/blog\/javascript-peticion-http\/#4-how-to-make-an-http-request-in-javascript-using-the-fetch-api\">API JavaScript Fetch<\/a>. En primer lugar, crea dos variables constantes para almacenar las cabeceras y la URL de la API Kinsta. Esto se hace para evitar repeticiones, ya que enviar\u00e1s m\u00e1s de una solicitud a la API Kinsta en esta p\u00e1gina:<\/p>\n<pre><code class=\"language-jsx\">const KinstaAPIUrl = 'https:\/\/api.kinsta.com\/v2';\nconst headers = useMemo(() =&gt; {\n    return {\n        Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`\n    };\n}, []);<\/code><\/pre>\n<p>En el c\u00f3digo anterior, el Gancho <a href=\"https:\/\/kinsta.com\/es\/blog\/react-usecallback\/#reacts-usecallback-vs-usememo\">useMemo<\/a> memoriza el objeto headers para que no sea necesario reevaluarlo en cada renderizaci\u00f3n, ya que su valor es constante. Ahora puedes crear la solicitud a la API:<\/p>\n<pre><code class=\"language-jsx\">useEffect(() =&gt; {\n    const fetchAllSites = async () =&gt; {\n        const query = new URLSearchParams({\n            company: process.env.REACT_APP_KINSTA_COMPANY_ID,\n        }).toString();\n        const resp = await fetch(\n            `${KinstaAPIUrl}\/sites?${query}`,\n            {\n                method: 'GET',\n                headers\n            }\n        );\n        const data = await resp.json();\n        setSites(data.company.sites);\n    };\n    fetchAllSites();\n}, [headers]);<\/code><\/pre>\n<p>En el c\u00f3digo anterior, se crea una funci\u00f3n as\u00edncrona <code>fetchAllSites<\/code>. Dentro de esta funci\u00f3n, primero defines el par\u00e1metro <code>query<\/code> (el ID de tu empresa) obtenido de tu archivo <strong>.env<\/strong>. A continuaci\u00f3n, realizas una solicitud GET al punto final <code>\/sites<\/code> de la API Kinsta utilizando el par\u00e1metro <code>query<\/code>. La respuesta se almacena entonces en el estado <code>sites<\/code> que creaste anteriormente. Por \u00faltimo, llamas a <code>fetchAllSites<\/code> para iniciar el proceso de obtenci\u00f3n.<\/p>\n<p>Ahora vamos a incorporar los valores almacenados en el estado <code>sites<\/code> haciendo un bucle a trav\u00e9s de ellos para rellenar el campo de selecci\u00f3n. El nombre para mostrar se mostrar\u00e1 al usuario, mientras que el ID del sitio se utilizar\u00e1 como valor de la opci\u00f3n. De esta forma, cuando se env\u00ede el formulario, el ID del sitio seleccionado podr\u00e1 utilizarse para consultar los detalles del entorno:<\/p>\n<pre><code class=\"language-jsx\">&lt;div className=\"input-div\"&gt;\n    &lt;label&gt;Select a site&lt;\/label&gt;\n    &lt;span&gt;Select the site you want to clone&lt;\/span&gt;\n    &lt;select className=\"form-control\"&gt;\n        &lt;option&gt; value=\"\"&gt;&lt;\/option&gt;\n        {sites && (\n            sites.map((site) =&gt; {\n                return (\n                    &lt;option&gt; key={site.id} value={site.id}&gt;{site.display_name}&lt;\/option&gt;\n                )\n            })\n        )}\n    &lt;\/select&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Procedamos a gestionar el env\u00edo del formulario y a recuperar valores del mismo. Para ello, necesitas crear variables de estado para cada campo de entrada:<\/p>\n<pre><code class=\"language-jsx\">const [selectedSiteId, setSelectedSiteId] = useState('');\nconst [displayName, setDisplayName] = useState('');<\/code><\/pre>\n<p>A continuaci\u00f3n, vincula los campos del formulario a sus respectivos valores de estado a\u00f1adiendo los atributos <code>value<\/code> y <code>onChange<\/code> a cada elemento de entrada. Este es el aspecto que tendr\u00e1 el formulario:<\/p>\n<pre><code class=\"language-jsx\">&lt;form&gt;\n    &lt;div className=\"form-container\"&gt;\n        &lt;div className=\"input-div\"&gt;\n            &lt;label&gt;Display name&lt;\/label&gt;\n            &lt;span&gt;Helps you identify your site. Only used in MyKinsta and temporary domain&lt;\/span&gt;\n            &lt;input type=\"text\" className=\"form-control\" value={displayName} onChange={(e) =&gt; setDisplayName(e.target.value)} \/&gt;\n        &lt;\/div&gt;\n        &lt;div className=\"input-div\"&gt;\n            &lt;label&gt;Select a site&lt;\/label&gt;\n            &lt;span&gt;Select the site you want to clone&lt;\/span&gt;\n            &lt;select className=\"form-control\" value={selectedSiteId} onChange={(e) =&gt; setSelectedSiteId(e.target.value)}&gt;\n                &lt;option value=\"\"&gt;&lt;\/option&gt;\n                {sites && (\n                    sites.map((site) =&gt; {\n                        return (\n                            &lt;option key={site.id} value={site.id}&gt;{site.display_name}&lt;\/option&gt;\n                        )\n                    })\n                )}\n            &lt;\/select&gt;\n        &lt;\/div&gt;\n        &lt;button className='btn'&gt;Clone Site&lt;\/button&gt;\n    &lt;\/div&gt;\n&lt;\/form&gt;<\/code><\/pre>\n<p>En el c\u00f3digo anterior, cada elemento de entrada tiene el atributo value establecido en la variable de estado correspondiente, y el atributo <code>onChange<\/code> se utiliza para actualizar el valor de estado cuando el usuario interact\u00faa con los campos de entrada.<\/p>\n<p>Para gestionar el env\u00edo del formulario, adjunta un m\u00e9todo <code>onSubmit<\/code> al elemento formulario. Por ejemplo<\/p>\n<pre><code class=\"language-jsx\">&lt;form&gt; onSubmit={handleSubmission}&gt;\n    {\/* form details *\/}\n&lt;\/form&gt;<\/code><\/pre>\n<p>Define el m\u00e9todo <code>handleSubmission<\/code>, que consiste en realizar dos peticiones a la API de Kinsta. La primera petici\u00f3n recupera el ID de entorno del sitio que se va a clonar, y la segunda petici\u00f3n realiza la operaci\u00f3n de clonaci\u00f3n.<\/p>\n<p>Empecemos por recuperar el ID del entorno. Dentro del m\u00e9todo <code>handleSubmission<\/code>, crea una funci\u00f3n as\u00edncrona para gestionar esta petici\u00f3n. La funci\u00f3n enviar\u00e1 una petici\u00f3n GET al endpoint <code>\/sites<\/code>, a\u00f1adiendo el ID del sitio seleccionado, seguido del campo <code><a href=\"https:\/\/api-docs.kinsta.com\/tag\/WordPress-Sites#operation\/getSiteEnvironments\" target=\"_blank\" rel=\"noopener noreferrer\">\/environments<\/a><\/code> punto final:<\/p>\n<pre><code class=\"language-jsx\">const handleSubmission = async (e) =&gt; {\n    e.preventDefault();\n    const fetchEnvironmentId = async (siteId) =&gt; {\n        const resp = await fetch(\n            `${KinstaAPIUrl}\/sites\/${siteId}\/environments`,\n            {\n                method: 'GET',\n                headers\n            }\n        );\n        const data = await resp.json();\n        let envId = data.site.environments[0].id;\n        return envId;\n    }\n    let environmentId = await fetchEnvironmentId(selectedSiteId);\n}<\/code><\/pre>\n<p>Arriba, <code>fetchEnvironmentId<\/code> es una funci\u00f3n as\u00edncrona que env\u00eda una solicitud GET a la API de Kinsta. Obtiene los entornos del sitio seleccionado y extrae el ID del entorno de la respuesta. El ID del entorno se almacena en la variable <code>envId<\/code> y luego se devuelve. Al llamar a la funci\u00f3n, asignamos su valor de retorno a la variable <code>envId<\/code>.<br \/>\n<br \/>\nLlegados a este punto, puedes clonar un sitio existente con la API de Kinsta porque tienes la informaci\u00f3n esencial sobre el sitio de origen: el ID de la empresa, el nombre para mostrar y el ID del entorno.<\/p>\n<p>Dentro del m\u00e9todo <code>handleSubmission<\/code>, crea una funci\u00f3n llamada <code>cloneExistingSite<\/code> para gestionar esta petici\u00f3n a la API. Esta solicitud se dirigir\u00e1 al <code><a href=\"https:\/\/api-docs.kinsta.com\/tag\/WordPress-Sites#operation\/cloneWordPressSite\" target=\"_blank\" rel=\"noopener noreferrer\">\/sites\/clone<\/a><\/code> punto final. A diferencia de las peticiones anteriores, las cabeceras de esta petici\u00f3n son diferentes porque necesitas especificar el <code>Content-Type<\/code> como <code>application\/json<\/code>. Adem\u00e1s, se trata de una solicitud POST, por lo que debes incluir un cuerpo de solicitud que contenga la carga \u00fatil que deseas enviar a la API. As\u00ed es como se estructurar\u00e1 la solicitud:<\/p>\n<pre><code class=\"language-jsx\">const handleSubmission = async (e) =&gt; {\n    e.preventDefault();\n\n    \/\/ fetch environment Id\n\n    const cloneExistingSite = async (env_Id) =&gt; {\n        const resp = await fetch(\n            `${KinstaAPIUrl}\/sites\/clone`,\n            {\n                method: 'POST',\n                headers: {\n                    'Content-Type': 'application\/json',\n                    Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`\n                },\n                body: JSON.stringify({\n                    company: `${process.env.REACT_APP_KINSTA_COMPANY_ID}`,\n                    display_name: displayName,\n                    source_env_id: env_Id,\n                })\n            }\n        );\n        const data = await resp.json();\n        navigate(`\/operations\/${displayName}\/${data.operation_id}`)\n        console.log(data);\n    }\n    cloneExistingSite(environmentId);\n}<\/code><\/pre>\n<p>En este c\u00f3digo, la solicitud <code>body<\/code> se construye utilizando <code>JSON.stringify()<\/code> para convertir el objeto de carga \u00fatil en una cadena JSON. A continuaci\u00f3n, la respuesta se almacena en la variable de datos. Utilizando el m\u00e9todo <code>useNavigate<\/code> de la biblioteca <code>react-router-dom<\/code> se pasa <code>displayName<\/code> y <code>operation_id<\/code> como par\u00e1metros de la ruta. Aseg\u00farate de importar el m\u00e9todo <code>useNaviagte<\/code> e instanciarlo:<\/p>\n<pre><code class=\"language-jsx\">\/\/ Import the required method \nimport { useNavigate } from 'react-router-dom'; \n\n\/\/ Instantiate the useNavigate method \nconst navigate = useNavigate();<\/code><\/pre>\n<p>Ahora, cuando rellenes el formulario y hagas clic en el bot\u00f3n <strong>Clonar sitio<\/strong>, un nuevo sitio iniciar\u00e1 el proceso de clonaci\u00f3n, que ser\u00e1 visible en tu panel de MyKinsta. Sin embargo, queremos seguir la operaci\u00f3n de clonaci\u00f3n del sitio program\u00e1ticamente dentro de la IU personalizada. Maneja esto en <strong>Operations.jsx <\/strong>utilizando los datos enviados a trav\u00e9s de la ruta.<\/p>\n<h3>Implementaci\u00f3n de la comprobaci\u00f3n del estado de la operaci\u00f3n con la API de Kinsta<\/h3>\n<p>En <strong>Operations.jsx<\/strong>, recupera el ID de la operaci\u00f3n de la ruta utilizando el m\u00e9todo <code>useParams<\/code> de <code>react-router-dom<\/code>. Este ID se utilizar\u00e1 para realizar una solicitud a la API cada vez que se haga clic en el bot\u00f3n <strong>Comprobar<\/strong> <strong>Estado del Sitio<\/strong>.<\/p>\n<p>Primero, importa el m\u00e9todo <code>useParams<\/code> y util\u00edzalo para instanciar las variables <code>displayName<\/code> y <code>operationId<\/code>:<\/p>\n<pre><code class=\"language-jsx\">\/\/ Import the useParams library\nimport { useParams } from 'react-router-dom';\n\n\/\/ Instantiate the paramters\nconst { displayName, operationId } = useParams();<\/code><\/pre>\n<p>A continuaci\u00f3n, crea un estado para almacenar el estado de la operaci\u00f3n cuando se realice la solicitud:<\/p>\n<pre><code class=\"language-jsx\">const [operationData, setOperationData] = useState({ message: \"Operation in progress.\" });<\/code><\/pre>\n<p>En el c\u00f3digo anterior, el estado se inicializa con un mensaje por defecto, que se mostrar\u00e1 hasta que se pulse el bot\u00f3n <strong>Comprobar<\/strong> Estado del Sitio. A\u00f1ade un evento <code>onClick<\/code> al bot\u00f3n <strong>Comprobar<\/strong> <strong>Estado del Sitio<\/strong> y llama al m\u00e9todo <code>checkOperation<\/code> cuando se haga clic en el bot\u00f3n:<\/p>\n<pre><code class=\"language-jsx\">&lt;button&gt; className='sm-btn' onClick={() =&gt; checkOperation()}&gt;Check Site Status&lt;\/button&gt;<\/code><\/pre>\n<p>Ahora, crea la funci\u00f3n <code>checkOperation<\/code> para realizar la solicitud de operaci\u00f3n a la API de Kinsta. Almacena las constantes <code>headers<\/code> y <code>KinstaAPIUrl<\/code> en variables, y luego util\u00edzalas en la solicitud a la API:<\/p>\n<pre><code class=\"language-jsx\">const KinstaAPIUrl = 'https:\/\/api.kinsta.com\/v2';\nconst headers = useMemo(() =&gt; {\n    return {\n        Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`\n    };\n}, []);\n\nconst checkOperation = async () =&gt; {\n    const resp = await fetch(\n        `${KinstaAPIUrl}\/operations\/${operationId}`,\n        {\n            method: 'GET',\n            headers\n        }\n    );\n    const data = await resp.json();\n    setOperationData(data);\n};<\/code><\/pre>\n<p>En el c\u00f3digo anterior, se env\u00eda una solicitud GET al punto final <code>\/operations<\/code> con el ID de la operaci\u00f3n, y la respuesta se almacena en el estado <code>operationData<\/code>. Ahora, puedes utilizar los datos dentro del marcado:<\/p>\n<pre><code class=\"language-jsx\">&lt;div className=\"services\"&gt;\n    &lt;div className=\"details\"&gt;\n        &lt;p&gt;{operationData.message}..&lt;\/p&gt;\n        &lt;button&gt; className='sm-btn' onClick={() =&gt; checkOperation()}&gt;Check Site Status&lt;\/button&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Por \u00faltimo, los datos de <code>displayName<\/code> pasados a trav\u00e9s de la ruta se utilizar\u00e1n para construir la URL del nuevo sitio y la URL de administraci\u00f3n de WordPress. Ambos enlaces se abrir\u00e1n en una nueva pesta\u00f1a.<\/p>\n<pre><code class=\"language-jsx\">&lt;div className=\"details\"&gt;\n    &lt;a href={`http:\/\/${displayName}.kinsta.cloud\/wp-admin\/`} target=\"_blank\" rel=\"noreferrer\" className='detail-link'&gt;\n        &lt;p&gt;Open WordPress admin&lt;\/p&gt;\n        &lt;FiExternalLink \/&gt;\n    &lt;\/a&gt;\n    &lt;a href={`http:\/\/${displayName}.kinsta.cloud\/`} target=\"_blank\" rel=\"noreferrer\" className='detail-link'&gt;\n        &lt;p&gt;Open URL&lt;\/p&gt;\n        &lt;FiExternalLink \/&gt;\n    &lt;\/a&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Con estos cambios, <strong>Operations.jsx<\/strong> recuperar\u00e1 el ID de la operaci\u00f3n de la ruta, realizar\u00e1 una solicitud a la API cuando se pulse el bot\u00f3n, mostrar\u00e1 el estado de la operaci\u00f3n y proporcionar\u00e1 enlaces a la URL del sitio y del administrador de WordPress bas\u00e1ndose en los datos de <code>displayName<\/code>.<\/p>\n<h2>Despliega Tu Aplicaci\u00f3n en Kinsta<\/h2>\n<p>Para desplegar tu aplicaci\u00f3n en la plataforma de <a href=\"https:\/\/sevalla.com\/application-hosting\/\">alojamiento de aplicaciones<\/a> de Kinsta, tienes que enviar el proyecto a tu <a href=\"https:\/\/docs.sevalla.com\/applications\/get-started\/add-an-application#adding-an-application\">proveedor Git preferido<\/a>. Cuando tu proyecto est\u00e9 alojado en <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-github\/\">GitHub<\/a>, <a href=\"https:\/\/kinsta.com\/es\/blog\/gitlab-vs-github\/\">GitLab<\/a> o <a href=\"https:\/\/kinsta.com\/es\/blog\/bitbucket-vs-github\/\">Bitbucket<\/a>, puedes proceder a desplegarlo en Kinsta.<\/p>\n<p>Para desplegar tu repositorio en Kinsta, sigue estos pasos:<\/p>\n<ol start=\"1\">\n<li>Inicia sesi\u00f3n o crea tu cuenta Kinsta en el panel MyKinsta.<\/li>\n<li>En la barra lateral izquierda, haz clic en <strong>Aplicaciones<\/strong> y luego en <strong>A\u00f1adir servicio<\/strong>.<\/li>\n<li>Selecciona <strong>Aplicaci\u00f3n<\/strong> en el men\u00fa desplegable para desplegar una aplicaci\u00f3n React en Kinsta.<\/li>\n<li>En el modal que aparece, elige el repositorio que quieres desplegar. Si tienes varias ramas, puedes seleccionar la rama deseada y dar un nombre a tu aplicaci\u00f3n.<\/li>\n<li>Selecciona una de las ubicaciones de centros de datos disponibles en la lista de opciones de 24.<\/li>\n<li>Kinsta detecta autom\u00e1ticamente el comando de inicio de tu aplicaci\u00f3n.<\/li>\n<\/ol>\n<p>Por \u00faltimo, no es seguro enviar claves API a hosts p\u00fablicos como tu proveedor de Git. Cuando alojes, puedes a\u00f1adirlas como <a href=\"https:\/\/docs.sevalla.com\/applications\/environment-variables\">variables de entorno<\/a> utilizando el mismo nombre de variable y valor especificados en el archivo <strong>.env<\/strong>.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/08\/environment-variables-mykinsta.jpg\" alt=\"environment variables\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Establece variables de entorno en MyKinsta al desplegar.<\/figcaption><\/figure>\n<p>Una vez que inicias el despliegue de tu aplicaci\u00f3n, comienza el proceso y normalmente se completa en unos minutos. Un despliegue con \u00e9xito genera un enlace a tu aplicaci\u00f3n, como <strong>https:\/\/clone-wp-site-12teh.kinsta.app\/<\/strong>.<\/p>\n<p><aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Puedes activar el despliegue autom\u00e1tico, para que Kinsta vuelva a desplegar tu aplicaci\u00f3n cada vez que cambies tu c\u00f3digo base y lo env\u00edes a tu servidor Git.<\/p>\n<\/aside>\n<\/p>\n<h2>Resumen<\/h2>\n<p>La API de Kinsta ofrece flexibilidad para crear interfaces de usuario personalizadas para administrar sitios WordPress, incluyendo la posibilidad de clonar sitios existentes y gestionar varios aspectos de tu entorno WordPress.<\/p>\n<p>En este art\u00edculo, has aprendido a desarrollar una aplicaci\u00f3n que permite clonar sitios fuera de MyKinsta.<\/p>\n<p><em>\u00bfC\u00f3mo utilizas la API de Kinsta? \u00bfQu\u00e9 funciones y puntos finales te gustar\u00eda que se a\u00f1adieran a la API? \u00a1Comp\u00e1rtelos en la secci\u00f3n de comentarios!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>No hace falta que gestiones muchos de los 800 millones de sitios de WordPress que hay en la red para que busques formas de lanzar nuevos &#8230;<\/p>\n","protected":false},"author":287,"featured_media":68913,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1270,1321,1302],"class_list":["post-68912","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-api","topic-react","topic-servicios-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>C\u00f3mo Clonar un Sitio WordPress Utilizando la API de Kinsta y React<\/title>\n<meta name=\"description\" content=\"Aprende a clonar sin esfuerzo un sitio WordPress utilizando la potente API de Kinsta y React construyendo una interfaz de usuario personalizada.\" \/>\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\/es\/blog\/clonar-sitio-kinsta-api\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo Clonar un Sitio WordPress Utilizando la API de Kinsta y React\" \/>\n<meta property=\"og:description\" content=\"Aprende a clonar sin esfuerzo un sitio WordPress utilizando la potente API de Kinsta y React construyendo una interfaz de usuario personalizada.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/clonar-sitio-kinsta-api\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-07T16:21:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-17T12:44:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/08\/clone-site-kinsta-api.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Aprende a clonar sin esfuerzo un sitio WordPress utilizando la potente API de Kinsta y React construyendo una interfaz de usuario personalizada.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/08\/clone-site-kinsta-api.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/clonar-sitio-kinsta-api\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/clonar-sitio-kinsta-api\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"C\u00f3mo Clonar un Sitio WordPress Utilizando la API de Kinsta y React\",\"datePublished\":\"2023-08-07T16:21:22+00:00\",\"dateModified\":\"2025-01-17T12:44:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/clonar-sitio-kinsta-api\/\"},\"wordCount\":2531,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/clonar-sitio-kinsta-api\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/08\/clone-site-kinsta-api-1.jpg\",\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/clonar-sitio-kinsta-api\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/clonar-sitio-kinsta-api\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/clonar-sitio-kinsta-api\/\",\"name\":\"C\u00f3mo Clonar un Sitio WordPress Utilizando la API de Kinsta y React\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/clonar-sitio-kinsta-api\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/clonar-sitio-kinsta-api\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/08\/clone-site-kinsta-api-1.jpg\",\"datePublished\":\"2023-08-07T16:21:22+00:00\",\"dateModified\":\"2025-01-17T12:44:28+00:00\",\"description\":\"Aprende a clonar sin esfuerzo un sitio WordPress utilizando la potente API de Kinsta y React construyendo una interfaz de usuario personalizada.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/clonar-sitio-kinsta-api\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/clonar-sitio-kinsta-api\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/clonar-sitio-kinsta-api\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/08\/clone-site-kinsta-api-1.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/08\/clone-site-kinsta-api-1.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/clonar-sitio-kinsta-api\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"API\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/api\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"C\u00f3mo Clonar un Sitio WordPress Utilizando la API de Kinsta y React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/es\/#website\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"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\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/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\/es\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"C\u00f3mo Clonar un Sitio WordPress Utilizando la API de Kinsta y React","description":"Aprende a clonar sin esfuerzo un sitio WordPress utilizando la potente API de Kinsta y React construyendo una interfaz de usuario personalizada.","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\/es\/blog\/clonar-sitio-kinsta-api\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo Clonar un Sitio WordPress Utilizando la API de Kinsta y React","og_description":"Aprende a clonar sin esfuerzo un sitio WordPress utilizando la potente API de Kinsta y React construyendo una interfaz de usuario personalizada.","og_url":"https:\/\/kinsta.com\/es\/blog\/clonar-sitio-kinsta-api\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2023-08-07T16:21:22+00:00","article_modified_time":"2025-01-17T12:44:28+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/08\/clone-site-kinsta-api.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Aprende a clonar sin esfuerzo un sitio WordPress utilizando la potente API de Kinsta y React construyendo una interfaz de usuario personalizada.","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/08\/clone-site-kinsta-api.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Joel Olawanle","Tiempo de lectura":"13 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/clonar-sitio-kinsta-api\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/clonar-sitio-kinsta-api\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"C\u00f3mo Clonar un Sitio WordPress Utilizando la API de Kinsta y React","datePublished":"2023-08-07T16:21:22+00:00","dateModified":"2025-01-17T12:44:28+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/clonar-sitio-kinsta-api\/"},"wordCount":2531,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/clonar-sitio-kinsta-api\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/08\/clone-site-kinsta-api-1.jpg","inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/es\/blog\/clonar-sitio-kinsta-api\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/clonar-sitio-kinsta-api\/","url":"https:\/\/kinsta.com\/es\/blog\/clonar-sitio-kinsta-api\/","name":"C\u00f3mo Clonar un Sitio WordPress Utilizando la API de Kinsta y React","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/clonar-sitio-kinsta-api\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/clonar-sitio-kinsta-api\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/08\/clone-site-kinsta-api-1.jpg","datePublished":"2023-08-07T16:21:22+00:00","dateModified":"2025-01-17T12:44:28+00:00","description":"Aprende a clonar sin esfuerzo un sitio WordPress utilizando la potente API de Kinsta y React construyendo una interfaz de usuario personalizada.","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/clonar-sitio-kinsta-api\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/clonar-sitio-kinsta-api\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/clonar-sitio-kinsta-api\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/08\/clone-site-kinsta-api-1.jpg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/08\/clone-site-kinsta-api-1.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/clonar-sitio-kinsta-api\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"API","item":"https:\/\/kinsta.com\/es\/secciones\/api\/"},{"@type":"ListItem","position":3,"name":"C\u00f3mo Clonar un Sitio WordPress Utilizando la API de Kinsta y React"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/es\/#website","url":"https:\/\/kinsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","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\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/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\/es\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/68912","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=68912"}],"version-history":[{"count":8,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/68912\/revisions"}],"predecessor-version":[{"id":69275,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/68912\/revisions\/69275"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/68912\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/68912\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/68912\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/68912\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/68912\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/68912\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/68912\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/68912\/translations\/es"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/68912\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/68913"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=68912"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=68912"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=68912"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}