{"id":68048,"date":"2023-07-13T13:09:54","date_gmt":"2023-07-13T11:09:54","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=68048&#038;preview=true&#038;preview_id=68048"},"modified":"2023-08-23T11:32:25","modified_gmt":"2023-08-23T09:32:25","slug":"api-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/api-wordpress\/","title":{"rendered":"C\u00f3mo Crear un Sitio WordPress con la API de Kinsta"},"content":{"rendered":"<p><a href=\"https:\/\/kinsta.com\/wordpress\/\">WordPress<\/a> es un popular sistema de gesti\u00f3n de contenidos que impulsa millones de sitios web en Internet. Ofrece una interfaz f\u00e1cil de usar y una amplia gama de opciones de personalizaci\u00f3n.<\/p>\n<p>Crear sitios WordPress puede llevar mucho tiempo, sobre todo si se realizan manualmente tareas repetitivas. Kinsta ha simplificado y <a href=\"https:\/\/kinsta.com\/es\/docs\/alojamiento-wordpress\/como-empezar-con-wordpress\/sitio-nuevo\/\">agilizado este proceso<\/a> con el panel de control <a href=\"https:\/\/my.kinsta.com\/?lang=es\">MyKinsta<\/a>, que tambi\u00e9n proporciona un <a href=\"https:\/\/kinsta.com\/es\/docs\/alojamiento-wordpress\/dominios-wordpress\/url-temporal-de-wordpress\/\">dominio temporal<\/a> para pruebas inmediatas. Sin embargo, la introducci\u00f3n de la <a href=\"https:\/\/kinsta.com\/es\/docs\/api-kinsta\/\">API de Kinsta<\/a> significa que los <a href=\"https:\/\/kinsta.com\/es\/blog\/tipos-de-desarrolladores\/\">desarrolladores<\/a> pueden mejorar el flujo de trabajo de creaci\u00f3n de sitios y desarrollar interfaces personalizadas para satisfacer necesidades espec\u00edficas.<\/p>\n<p>Este tutorial profundiza en el aprovechamiento del poder de la API de Kinsta para crear sitios de WordPress. Y utilizamos la biblioteca <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-react-js\/\">React<\/a> JavaScript para demostrar c\u00f3mo crear una aplicaci\u00f3n que cree sitios de WordPress sin MyKinsta.<\/p>\n<p>Aqu\u00ed tienes una demostraci\u00f3n en tiempo real de la <a href=\"https:\/\/site-builder-ndg9i.kinsta.app\/\">aplicaci\u00f3n de creaci\u00f3n de sitios<\/a>.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/site-builder-application.gif\" alt=\"Aplicaci\u00f3n de creaci\u00f3n de sitios.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Aplicaci\u00f3n de creaci\u00f3n de sitios.<\/figcaption><\/figure>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Comprender la API de Kinsta<\/h2>\n<p>La <a href=\"https:\/\/kinsta.com\/es\/changelog\/api-kinsta\/\">API de Kinsta<\/a> es una potente herramienta que te permite interactuar con la plataforma de <a href=\"https:\/\/kinsta.com\/es\/wordpress-hosting\/\">Alojamiento Administrado de WordPress<\/a> de Kinsta mediante programaci\u00f3n. Puede ayudar a automatizar varias tareas relacionadas con los servicios proporcionados por Kinsta, incluyendo la creaci\u00f3n de sitios, la recuperaci\u00f3n de informaci\u00f3n del sitio, la <a href=\"https:\/\/kinsta.com\/es\/blog\/kinsta-api-key\/#how-to-use-kinsta-api-to-build-a-status-checker\">obtenci\u00f3n del estado de un sitio<\/a>, y mucho m\u00e1s.<\/p>\n<p>Esta API simplifica la creaci\u00f3n de sitios de WordPress, lo que la convierte en una herramienta inestimable para los desarrolladores. Para utilizar la API de Kinsta, debes tener una cuenta con al menos un sitio, <a href=\"https:\/\/sevalla.com\/application-hosting\/\">aplicaci\u00f3n<\/a> o <a href=\"https:\/\/sevalla.com\/database-hosting\/\">base de datos <\/a>de WordPress en MyKinsta. Tambi\u00e9n necesitas generar una clave API para autenticarte y acceder a tu cuenta a trav\u00e9s de la API.<\/p>\n<p>Para generar una clave API:<\/p>\n<ol start=\"1\">\n<li>Ve a tu panel de MyKinsta.<\/li>\n<li>Ve a la p\u00e1gina <strong>Claves API <\/strong>(<strong>Tu nombre<\/strong> &gt; <strong>Configuraci\u00f3n de la empresa<\/strong> &gt; <strong>Claves API<\/strong>).<\/li>\n<li>Haz clic en <strong>Crear Clave API<\/strong>.<\/li>\n<li>Elige una fecha de caducidad o establece una fecha de inicio personalizada y un n\u00famero de horas para que caduque la clave.<\/li>\n<li>Dale a la clave un nombre \u00fanico.<\/li>\n<li>Haz clic en <strong>Generar<\/strong>.<\/li>\n<\/ol>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/create-api-key-on-mykinsta.jpg\" alt=\"Crear clave API en MyKinsta.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Crear clave API en MyKinsta.<\/figcaption><\/figure>\n<p>Despu\u00e9s de crear una clave API, c\u00f3piala y gu\u00e1rdala en alg\u00fan lugar seguro (recomendamos utilizar un <a href=\"https:\/\/kinsta.com\/es\/blog\/administradores-contrasenas\/\">gestor de contrase\u00f1as<\/a>), ya que es la <strong>\u00fanica vez<\/strong> que se revela dentro de MyKinsta. Puedes generar m\u00faltiples claves API \u2014 est\u00e1n listadas en la p\u00e1gina <strong>Claves API<\/strong>. Si necesitas revocar una clave API, haz clic en <strong>Revocar<\/strong> junto a la que quieras revocar.<\/p>\n<h2>Crear un Sitio de WordPress con la API de Kinsta<\/h2>\n<p>Ahora que tu clave API est\u00e1 lista, vamos a crear un sitio de WordPress con la API de Kinsta. Para ello, utiliza el endpoint <code><a href=\"https:\/\/api-docs.kinsta.com\/tag\/WordPress-Sites#operation\/addWordPressSite\" target=\"_blank\" rel=\"noopener noreferrer\">\/sites<\/a><\/code> que espera un payload que contenga los siguientes datos:<\/p>\n<ul>\n<li><strong>company:<\/strong> Este par\u00e1metro espera un ID de empresa \u00fanico que se puede encontrar en la configuraci\u00f3n de MyKinsta. Ayuda a identificar la empresa asociada al sitio de WordPress.<\/li>\n<li><strong>display_name:<\/strong> El nombre para mostrar, que es el mismo que el nombre del sitio en MyKinsta, te ayuda a identificar tu sitio. S\u00f3lo se utiliza en MyKinsta. Se utiliza para el dominio temporal de tu sitio de WordPress y <a href=\"https:\/\/kinsta.com\/es\/blog\/panel-control-administracion-wordpress\/\">WordPress admin<\/a> (para la API de Kinsta, es display_name <em>.kinsta.cloud<\/em> y <em>display_name.kinsta.cloud\/wp-admin<\/em>).<\/li>\n<li><strong>region:<\/strong> Este par\u00e1metro te permite elegir entre 27 la ubicaci\u00f3n del centro de datos para tu sitio web. Seleccionar la regi\u00f3n m\u00e1s cercana a tu p\u00fablico objetivo puede ayudar a mejorar el rendimiento y la velocidad del sitio web (Consulta la <a href=\"https:\/\/kinsta.com\/es\/docs\/servicio-de-informacion\/ubicaciones-de-los-centros-de-datos\/\">lista de regiones disponibles<\/a>).<\/li>\n<li><strong>install_mode:<\/strong> Este par\u00e1metro determina el tipo de instalaci\u00f3n de WordPress. El valor por defecto es \u00abplain\u00bb, que configura un sitio de WordPress normal. Otras opciones incluyen \u00abnew\u00bb para una instalaci\u00f3n nueva y modos adicionales en funci\u00f3n de requisitos espec\u00edficos.<\/li>\n<li><strong>is_subdomain_multisite: <\/strong>Este par\u00e1metro booleano (verdadero\/falso) especifica si el sitio WordPress debe configurarse como un multisitio utilizando subdominios.<\/li>\n<li><strong>admin_email:<\/strong> Este par\u00e1metro espera la direcci\u00f3n de correo electr\u00f3nico del administrador de WordPress. Se utiliza con fines administrativos y para recibir notificaciones importantes.<\/li>\n<li><strong>admin_password<\/strong>: Este par\u00e1metro se utiliza para establecer la contrase\u00f1a de la cuenta de usuario admin de WordPress. Elige una contrase\u00f1a segura para proteger tu sitio.<\/li>\n<li><strong>admin_user:<\/strong> Este par\u00e1metro establece el nombre de usuario para la cuenta de usuario admin de WordPress. Se utiliza para acceder al panel de control de WordPress y gestionar el sitio.<\/li>\n<li><strong>is_multisite:<\/strong> Similar a <code>is_subdomain_multisite<\/code>, este par\u00e1metro booleano determina si el sitio WordPress debe configurarse como multisitio.<\/li>\n<li><strong>site_title:<\/strong> Este par\u00e1metro representa el t\u00edtulo de tu sitio WordPress. Aparece en la parte superior de todas las p\u00e1ginas del sitio. Siempre puedes cambiarlo m\u00e1s adelante.<\/li>\n<li><strong>woocommerce:<\/strong> Este par\u00e1metro booleano indica si quieres instalar el plugin WooCommerce durante la creaci\u00f3n del sitio de WordPress.<\/li>\n<li><strong>wordpressseo:<\/strong> Este par\u00e1metro controla la instalaci\u00f3n del <a href=\"https:\/\/kinsta.com\/es\/blog\/yoast-seo\/\">plugin Yoast SEO<\/a> durante la creaci\u00f3n del sitio.<\/li>\n<li><strong>wp_idioma:<\/strong> Este par\u00e1metro espera un valor de cadena que represente el idioma\/localizaci\u00f3n de tu sitio de WordPress (descubre tu <a href=\"https:\/\/translate.wordpress.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">localizaci\u00f3n de WordPress aqu\u00ed<\/a>).<\/li>\n<\/ul>\n<p>Ahora que entiendes cada par\u00e1metro. Este es un ejemplo del aspecto de la carga \u00fatil que env\u00edas a la API de Kinsta:<\/p>\n<pre><code class=\"language-json\">{\n  \"company\": \"54fb80af-576c-4fdc-ba4f-b596c83f15a1\",\n  \"display_name\": \"First site\",\n  \"region\": \"us-central1\",\n  \"install_mode\": \"new\",\n  \"is_subdomain_multisite\": false,\n  \"admin_email\": \"admin@example.com\",\n  \"admin_password\": \"vJnFnN-~v)PxF[6k\",\n  \"admin_user\": \"admin\",\n  \"is_multisite\": false,\n  \"site_title\": \"My First Site\",\n  \"woocommerce\": false,\n  \"wordpressseo\": false,\n  \"wp_language\": \"en_US\"\n}<\/code><\/pre>\n<p>Utilizando el modo que prefieras, puedes enviar una solicitud POST a la API de Kinsta. Para este ejemplo, vamos a utilizar 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>:<\/p>\n<pre><code class=\"language-jsx\">const createWPSite = async () =&gt; {\n    const resp = await fetch(\n        `https:\/\/api.kinsta.com\/v2\/sites`,\n        {\n          method: 'POST',\n          headers: {\n            'Content-Type': 'application\/json',\n            Authorization: 'Bearer &lt;YOUR_KEY_HERE&gt;'\n          },\n          body: JSON.stringify({\n            company: '54fb80af-576c-4fdc-ba4f-b596c83f15a1',\n            display_name: 'First site',\n            region: 'us-central1',\n            install_mode: 'new',\n            is_subdomain_multisite: false,\n            admin_email: 'admin@example.com',\n            admin_password: 'vJnFnN-~v)PxF[6k',\n            admin_user: 'admin',\n            is_multisite: false,\n            site_title: 'My First Site',\n            woocommerce: false,\n            wordpressseo: false,\n            wp_language: 'en_US'\n          })\n        }\n      );\n      \n      const data = await resp.json();\n      console.log(data);\n}<\/code><\/pre>\n<p>El c\u00f3digo anterior utiliza la API JavaScript Fetch para enviar una solicitud POST a la API de Kinsta para crear un sitio WordPress. La funci\u00f3n <code>createWPSite<\/code> se encarga del proceso. Dentro de la funci\u00f3n, se realiza una solicitud Fetch a la API de Kinsta <code>\/sites<code> endpoint with the necessary data.<\/code><\/code><\/p>\n<p>La respuesta se analiza como JSON utilizando <code>resp.json()<\/code>, y el resultado se registra en la consola. Aseg\u00farate de sustituir <code>&lt;YOUR_KEY_HERE&gt;<\/code> por tu clave API, ajusta los valores de la carga \u00fatil y llama a <code>createWPSite()<\/code> para crear un sitio WordPress utilizando la API de Kinsta.<\/p>\n<p>Este es el aspecto de la respuesta<\/p>\n<pre><code class=\"language-json\">{\n    \"operation_id\": \"sites:add-54fb80af-576c-4fdc-ba4f-b596c83f15a1\",\n    \"message\": \"Adding site in progress\",\n    \"status\": 202\n}<\/code><\/pre>\n<h3>Monitorizaci\u00f3n de Operaciones con la API de Kinsta<\/h3>\n<p>Una vez que inicias la creaci\u00f3n de un sitio con la API de Kinsta, es importante hacer un seguimiento del progreso de la operaci\u00f3n. Esto puede hacerse mediante programaci\u00f3n, sin tener que consultar MyKinsta con el endpoint <code><a href=\"https:\/\/api-docs.kinsta.com\/tag\/Operations#operation\/getOperationStatus\" target=\"_blank\" rel=\"noopener noreferrer\">\/operations<\/a><\/code> de la API Kinsta.<\/p>\n<p>Para realizar el seguimiento de las operaciones, utiliza el <code>operation_id<\/code> obtenido al iniciar una operaci\u00f3n, como la creaci\u00f3n de un sitio WordPress. Pasa el <code>operation_id<\/code> como par\u00e1metro al endpoint <code>\/operations<\/code>.<\/p>\n<pre><code class=\"language-jsx\">const operationId = 'YOUR_operation_id_PARAMETER';\nconst resp = await fetch(\n  `https:\/\/api.kinsta.com\/v2\/operations\/${operationId}`,\n  {\n    method: 'GET',\n    headers: {\n      Authorization: 'Bearer &lt;YOUR_TOKEN_HERE&gt;'\n    }\n  }\n);\nconst data = await resp.json();\nconsole.log(data);<\/code><\/pre>\n<p>El c\u00f3digo anterior recupera informaci\u00f3n sobre una operaci\u00f3n enviando una solicitud GET al endpoint <code>\/operations<\/code> con el <code>operation_id<\/code> apropiado. La solicitud incluye la <a href=\"https:\/\/kinsta.com\/es\/blog\/kinsta-api-key\/\">clave API<\/a> para la autenticaci\u00f3n.<\/p>\n<p>Cuando se reciben los datos de respuesta de la API, se registran en la consola. La respuesta proporciona informaci\u00f3n valiosa sobre el estado y el progreso de la operaci\u00f3n. Por ejemplo, si la creaci\u00f3n del sitio de WordPress a\u00fan est\u00e1 en curso, la respuesta tendr\u00e1 el siguiente aspecto:<\/p>\n<pre><code class=\"language-json\">{\n    \"status\": 202,\n    \"message\": \"Operation in progress\",\n    \"data\": null\n}<\/code><\/pre>\n<p>Del mismo modo, una vez que la operaci\u00f3n se ha completado con \u00e9xito, \u00e9sta es la respuesta<\/p>\n<pre><code class=\"language-json\">{\n    \"message\": \"Successfully finished request\",\n    \"status\": 200,\n    \"data\": null\n}<\/code><\/pre>\n<p>Llegados a este punto, puedes crear mediante programaci\u00f3n un sitio de WordPress y comprobar su funcionamiento utilizando la API de Kinsta. Para mejorar esta funcionalidad, vayamos un paso m\u00e1s all\u00e1 y desarrollemos una interfaz de usuario (IU) personalizada que pueda gestionar estas operaciones. De esta forma, incluso las personas sin conocimientos t\u00e9cnicos pueden aprovechar las capacidades de la API.<\/p>\n<h2>Crear una Aplicaci\u00f3n React para Crear un Sitio de WordPress con la API Kinsta<\/h2>\n<p>Para empezar, configura una estructura de proyecto React e instala las dependencias necesarias. Integra la API Kinsta en tu aplicaci\u00f3n React con la API Fetch u otras bibliotecas de <a href=\"https:\/\/kinsta.com\/es\/blog\/javascript-peticion-http\/\">peticiones HTTP<\/a>, como Axios.<\/p>\n<h3>Requisitos Previos<\/h3>\n<p>Para seguir este proyecto, es aconsejable tener 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. El objetivo principal de este proyecto es demostrar la utilizaci\u00f3n de la API de Kinsta, por lo que este art\u00edculo no profundiza en los detalles de la creaci\u00f3n o el estilo de la interfaz de usuario.<\/p>\n<h3>C\u00f3mo Empezar<\/h3>\n<p>Para agilizar el proceso de configuraci\u00f3n del proyecto, te hemos preparado un proyecto inicial. Siga estos pasos para empezar:<\/p>\n<p>1. Crea un repositorio <a href=\"https:\/\/kinsta.com\/es\/secciones\/git\/\">Git<\/a> utilizando <a href=\"https:\/\/github.com\/kinsta\/site-builder\">esta plantilla en GitHub<\/a>. Selecciona <strong>Utilizar esta plantilla &gt; Crear un nuevo repositorio<\/strong> para copiar el c\u00f3digo de inicio en un nuevo repositorio dentro de tu cuenta de GitHub, y aseg\u00farate de marcar la casilla para <strong>incluir todas las ramas<\/strong>.<\/p>\n<p>2. Sube el repositorio a tu ordenador local y cambia a la carpeta <strong><a href=\"https:\/\/github.com\/kinsta\/site-builder\/tree\/starter-files\" target=\"_blank\" rel=\"noopener noreferrer\">archivos de inicio<\/a><\/strong> utilizando el siguiente comando:<\/p>\n<pre><code class=\"language-bash\">git checkout starter-files<\/code><\/pre>\n<p>3. Instala las dependencias necesarias ejecutando el comando <code>npm install<\/code>. Una vez completada la instalaci\u00f3n, puedes iniciar el proyecto en tu ordenador local con <code>npm run start<\/code>. Esto abre el proyecto en <strong><a href=\"http:\/\/localhost:3000\/\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/localhost:3000\/<\/a><\/strong>.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/site-builder-form.jpg\" alt=\"Formulario del constructor del sitio.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Formulario del constructor del sitio.<\/figcaption><\/figure>\n<h3>Comprender los Archivos del Proyecto<\/h3>\n<p>Dentro de la <strong>carpeta src<\/strong> de este proyecto hay dos subcarpetas principales: <strong>components<\/strong> y <strong>pages<\/strong>. La carpeta components contiene componentes reutilizables, como la <strong>cabecera<\/strong> y el <strong>pie de p\u00e1gina<\/strong>, utilizados en las <strong>p\u00e1ginas<\/strong> <strong>Home<\/strong> y <strong>Details<\/strong>.<\/p>\n<p>En este proyecto, su objetivo principal es implementar la l\u00f3gica en las <strong>p\u00e1ginas Home<\/strong> y <strong>Details<\/strong>, ya que el estilo y el enrutamiento ya est\u00e1n hechos.<\/p>\n<p>La<strong> p\u00e1gina Home<\/strong> tiene un formulario que recoge varios campos de datos que se pasan a la API de Kinsta. La respuesta de esta p\u00e1gina se almacena en el localStorage (puedes explorar m\u00e9todos alternativos para almacenar el ID de la operaci\u00f3n, que es crucial para comprobar el estado de la operaci\u00f3n).<\/p>\n<p>En la <strong>p\u00e1gina Details<\/strong>, el ID de la operaci\u00f3n se recupera de loaclStoage y se pasa al endpoint <code>\/operation<\/code> de la API Kinsta como par\u00e1metro para comprobar el estado de la operaci\u00f3n. En este proyecto, incluimos un bot\u00f3n que permite a los usuarios comprobar el estado de forma intermitente (puedes utilizar el m\u00e9todo <code>setInterval<\/code> para automatizar este proceso).<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/site-builder-operation-information.jpg\" alt=\"Informaci\u00f3n de la operaci\u00f3n del constructor del sitio.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Informaci\u00f3n de la operaci\u00f3n del constructor del sitio.<\/figcaption><\/figure>\n<h2>Interactuar con la API de Kinsta en React<\/h2>\n<p>Con la interfaz de usuario (UI) ahora en su lugar, tu siguiente paso es gestionar el env\u00edo del formulario en la <strong>p\u00e1gina Home<\/strong>\u00a0y enviar una solicitud POST al endpoint <code>\/sites<\/code> de la API Kinsta. Esta solicitud incluye los datos recogidos del formulario como payload, lo que nos permite crear un sitio WordPress.<\/p>\n<p>Para interactuar con la API Kinsta, necesitas <strong>el ID de tu empresa<\/strong> y <strong>la clave API<\/strong>. Una vez que tengas estas credenciales, es mejor almacenarlas de forma segura como variables de entorno en tu aplicaci\u00f3n React.<\/p>\n<p>Para configurar las variables de entorno, crea un <strong> archivo .env<\/strong> en la carpeta root 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 que a\u00f1adas el <strong> archivo .env<\/strong> a tu archivo <strong><a href=\"https:\/\/kinsta.com\/es\/blog\/gitignore-no-funciona\/\">archivo .gitignore<\/a><\/strong> para evitar que se env\u00ede a GitHub. Esto garantiza que tu informaci\u00f3n sensible, como las claves API, permanezca privada y segura.<\/p>\n<\/aside>\n\n<h3>Recuperar Datos del Formulario en React<\/h3>\n<p>En el archivo <strong>Home.jsx<\/strong> hay un formulario. Necesitas a\u00f1adir l\u00f3gica al formulario para obtener datos y validarlos cuando se env\u00eden. Para recuperar los datos del formulario en tu aplicaci\u00f3n React, utiliza el enfoque de componentes controlados de React junto con el hook <code><a href=\"https:\/\/kinsta.com\/es\/blog\/usestate-react\/\">useState<\/a><\/code>. Este enfoque te permite crear un estado para cada campo del formulario y actualizarlo a medida que el usuario introduce los datos.<\/p>\n<p>En primer lugar, importa el hook <code>useState<\/code> en la parte superior de tu archivo:<\/p>\n<pre><code class=\"language-jsx\">import React, { useState } from 'react';<\/code><\/pre>\n<p>A continuaci\u00f3n, configura una variable de estado para cada campo de formulario dentro de tu componente funcional. Por ejemplo, si tienes un campo de entrada para el \u00abT\u00edtulo del sitio\u00bb, puedes crear una variable de estado llamada <code>siteTitle<\/code>:<\/p>\n<pre><code class=\"language-jsx\">const [siteTitle, setSiteTitle] = useState('');<\/code><\/pre>\n<p>Aqu\u00ed, <code>siteTitle<\/code> es la variable de estado que contiene el valor del campo de entrada \u00abT\u00edtulo del sitio\u00bb, y <code>setSiteTitle<\/code> es la funci\u00f3n actualizadora de estado correspondiente.<\/p>\n<p>Para vincular los campos del formulario a sus respectivos valores de estado, a\u00f1ade los atributos <code>value<\/code> y <code>onChange<\/code> a cada elemento de entrada. Por ejemplo, el campo de entrada \u00abT\u00edtulo del sitio\u00bb:<\/p>\n<pre><code class=\"language-jsx\">&lt;input\n  type=\"text\"\n  className=\"form-control\"\n  value={siteTitle}\n  onChange={(event) =&gt; setSiteTitle(event.target.value)}\n\/&gt;<\/code><\/pre>\n<p>En este ejemplo, el atributo <code>value<\/code> se establece en la variable de estado <code>siteTitle<\/code>, lo que garantiza que el campo de entrada muestre el valor actual de <code>siteTitle<\/code>. El controlador de eventos <code>onChange<\/code> se establece en la funci\u00f3n <code>setSiteTitle<\/code>, que actualiza el estado <code>siteTitle<\/code> con el nuevo valor cada vez que el usuario escribe en el campo de entrada.<\/p>\n<p>Siguiendo este enfoque para cada campo de formulario, puedes crear las variables de estado necesarias y actualizarlas a medida que el usuario interact\u00faa con el formulario. Esto te permite acceder f\u00e1cilmente a los valores introducidos cuando se env\u00eda el formulario y realizar otras acciones o validaciones con los datos del formulario.<\/p>\n<p>Cuando hagas esto para todos los campos del formulario, tu archivo <strong>Home.jsx<\/strong> tendr\u00e1 el siguiente aspecto:<\/p>\n<pre><code class=\"language-jsx\">import Header from '..\/components\/Header';\nimport Footer from '..\/components\/Footer';\n\nconst Home = () =&gt; {\n\n    return (\n        &lt;div className=\"app-container\"&gt;\n            &lt;Header \/&gt;\n            &lt;div className=\"container\"&gt;\n                &lt;div className=\"container-title\"&gt;\n                    &lt;h1&gt; className=\"title\"&gt;Site Builder with Kinsta API&lt;\/h1&gt;\n                    &lt;p&gt; className=\"description\"&gt;\n                        This is a React app that uses the Kinsta API to create WordPress sites, without needing to access MyKinsta dashboard.\n                    &lt;\/p&gt;\n                &lt;\/div&gt;\n                &lt;form&gt;\n                    &lt;div className=\"form-container\"&gt;\n                        &lt;div className=\"input-div\"&gt;\n                            &lt;label&gt;Display name&lt;\/label&gt;\n                            &lt;span&gt;Helps you identify your site. Only used in MyKinsta and temporary domain&lt;\/span&gt;\n                            &lt;input type=\"text\" className=\"form-control\" \/&gt;\n                            &lt;span&gt; className='error-message'&gt;Ensure this has more than 4 characters&lt;\/span&gt;\n                        &lt;\/div&gt;\n                        &lt;div className=\"input-div\"&gt;\n                            &lt;label&gt; WordPress site title&lt;\/label&gt;\n                            &lt;span&gt;Appears across the top of every page of the site. You can always change it later.&lt;\/span&gt;\n                            &lt;input type=\"text\" className=\"form-control\" \/&gt;\n                            &lt;span&gt; className='error-message'&gt;Ensure this has more than 4 characters&lt;\/span&gt;\n                        &lt;\/div&gt;\n                        &lt;div className=\"input-flex\"&gt;\n                            &lt;div className=\"input-div\"&gt;\n                                &lt;label&gt;WordPress admin username&lt;\/label&gt;\n                                &lt;input type=\"text\" className=\"form-control\" \/&gt;\n                            &lt;\/div&gt;\n                            &lt;div className=\"input-div\"&gt;\n                                &lt;label&gt;WordPress admin email&lt;\/label&gt;\n                                &lt;input type=\"email\" className=\"form-control\" \/&gt;\n                                &lt;span&gt; className='error-message'&gt;Ensure this is a valid email&lt;\/span&gt;\n                            &lt;\/div&gt;\n                        &lt;\/div&gt;\n                        &lt;div className=\"input-div\"&gt;\n                            &lt;label&gt;WordPress admin password&lt;\/label&gt;\n                            &lt;span&gt;Ensure you remember this password as it is what you'll use to log into WP-admin&lt;\/span&gt;\n                            &lt;input type=\"text\" className=\"form-control\" \/&gt;\n                        &lt;\/div&gt;\n                        &lt;div className=\"input-div\"&gt;\n                            &lt;label&gt;Data center location&lt;\/label&gt;\n                            &lt;span&gt;Allows you to place your website in a geographical location closest to your visitors.&lt;\/span&gt;\n                            &lt;select className=\"form-control\"&gt;\n                                &lt;option&gt; value=\"\"&gt;&lt;\/option&gt;\n                                {\/* add options *\/}\n                            &lt;\/select&gt;\n                        &lt;\/div&gt;\n                        &lt;div className=\"checkbox-flex\"&gt;\n                            &lt;div className=\"checkbox-input\"&gt;\n                                &lt;input type=\"checkbox\" \/&gt;\n                                &lt;label&gt;Install WooCommerce&lt;\/label&gt;\n                            &lt;\/div&gt;\n                            &lt;div className=\"checkbox-input\"&gt;\n                                &lt;input type=\"checkbox\" \/&gt;\n                                &lt;label&gt;Install Yoast SEO&lt;\/label&gt;\n                            &lt;\/div&gt;\n                        &lt;\/div&gt;\n                        &lt;button&gt; className='btn'&gt;Create Site&lt;\/button&gt;\n                    &lt;\/div&gt;\n                &lt;\/form&gt;\n            &lt;\/div&gt;\n            &lt;Footer \/&gt;\n        &lt;\/div &gt;\n    )\n}\n\nexport default Home;<\/code><\/pre>\n<h4>Implementaci\u00f3n de la Validaci\u00f3n de Campos de Formulario con el Hook useRef<\/h4>\n<p>Para implementar la validaci\u00f3n de campos de formulario en React, podemos seguir estos pasos. Vamos a centrarnos en implementar la validaci\u00f3n de los campos \u00abNombre para mostrar\u00bb y \u00abCorreo electr\u00f3nico del administrador de WordPress\u00bb.<\/p>\n<p>En primer lugar, tenemos que crear referencias utilizando el hook <code><a href=\"https:\/\/kinsta.com\/es\/blog\/react-useref\/\">useRef<\/a><\/code> para controlar la visualizaci\u00f3n de los mensajes de error. Importa el hook <code>useRef<\/code> y crea las referencias necesarias para cada campo:<\/p>\n<pre><code class=\"language-jsx\">import { useRef } from 'react';\n\nconst displayNameRef = useRef(null);\nconst wpEmailRef = useRef(null);<\/code><\/pre>\n<p>A continuaci\u00f3n, adjuntamos las refs a los elementos de mensaje de error correspondientes en los campos del formulario. Por ejemplo, para el campo \u00abMostrar nombre\u00bb, a\u00f1ades el <code>ref<\/code> a la etiqueta <code>span<\/code>, que contiene el mensaje de error:<\/p>\n<pre><code class=\"language-jsx\">&lt;div className=\"input-div\"&gt;\n    &lt;label&gt;Display name&lt;\/label&gt;\n    &lt;span&gt;Helps you identify your site. Only used in MyKinsta and temporary domain&lt;\/span&gt;\n    &lt;input type=\"text\" className=\"form-control\" value={displayName} onChange={(e) =&gt; setDisplayName(e.target.value)} \/&gt;\n    &lt;span className='error-message' ref={displayNameRef}&gt;Ensure this has more than 4 characters&lt;\/span&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Del mismo modo, para el campo \u00abCorreo electr\u00f3nico del administrador de WordPress\u00bb:<\/p>\n<pre><code class=\"language-jsx\">&lt;div className=\"input-div\"&gt;\n  &lt;label&gt;WordPress admin email&lt;\/label&gt;\n  &lt;input\n    type=\"email\"\n    className=\"form-control\"\n    value={wpAdminEmail}\n    onChange={(e) =&gt; setWpAdminEmail(e.target.value)}\n  \/&gt;\n  &lt;span&gt; className='error-message' ref={wpEmailRef}&gt;Ensure this is a valid email&lt;\/span&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Ahora, podemos crear las funciones de validaci\u00f3n que comprueban los valores de entrada y deciden si mostrar los mensajes de error. Estas son las funciones para \u00abNombre para mostrar\u00bb y \u00abCorreo electr\u00f3nico del administrador de WordPress\u00bb:<\/p>\n<pre><code class=\"language-jsx\">const checkDisplayName = () =&gt; {\n  if (displayName.length &lt; 4) {\n    displayNameRef.current.style.display = 'block';\n  } else {\n    displayNameRef.current.style.display = 'none';\n  }\n}\n\nconst checkWpAdminEmail = () =&gt; {\n  let regex = \/^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$\/;\n  if (!wpAdminEmail.match(regex)) {\n    wpEmailRef.current.style.display = 'block';\n  } else {\n    wpEmailRef.current.style.display = 'none';\n  }\n}<\/code><\/pre>\n<p>Estas funciones se llaman cada vez que se modifican los campos de entrada correspondientes. Comparan los valores de entrada con los criterios de validaci\u00f3n y actualizan la visualizaci\u00f3n de los mensajes de error manipulando la propiedad <code>style.display<\/code> de los elementos del mensaje de error.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/site-builder-form-with-validation.jpg\" alt=\"Formulario del constructor del sitio con validaci\u00f3n.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Formulario del constructor del sitio con validaci\u00f3n.<\/figcaption><\/figure>\n<p>Si\u00e9ntete libre de implementar validaciones adicionales o personalizar la l\u00f3gica de validaci\u00f3n seg\u00fan tus requisitos.<\/p>\n<h3>Manejo del Env\u00edo de Formularios en React<\/h3>\n<p>Al manejar el evento de env\u00edo del formulario para crear un sitio, necesitamos realizar varias tareas. En primer lugar, adjuntamos un controlador de eventos <code>onSubmit<\/code> al elemento <code>&lt;form&gt;<\/code>. Dentro de la funci\u00f3n <code>createSite<\/code>, evitamos el comportamiento predeterminado de env\u00edo de formularios llamando a <code>event.preventDefault()<\/code>. Esto nos permite gestionar el env\u00edo mediante programaci\u00f3n.<\/p>\n<p>Para asegurarnos de que los datos del formulario son v\u00e1lidos antes de proceder al env\u00edo, invocamos los m\u00e9todos de validaci\u00f3n <code>checkDisplayName<\/code> y <code>checkWpAdminEmail<\/code>. Estos m\u00e9todos verifican que los campos obligatorios cumplen los criterios especificados.<\/p>\n<pre><code class=\"language-jsx\">const createSite = (e) =&gt; {\n  e.preventDefault();\n\n  checkDisplayName();\n  checkWpAdminEmail();\n\n  \/\/ Additional logic\n};<\/code><\/pre>\n<p>Suponiendo que todas las validaciones pasan y que los campos requeridos contienen datos v\u00e1lidos, procede a borrar el localStorage para garantizar un estado limpio para almacenar la respuesta de la API y el nombre para mostrar.<\/p>\n<p>A continuaci\u00f3n, realiza una solicitud a la API de Kinsta utilizando la funci\u00f3n fetch. La solicitud es un m\u00e9todo POST al endpoint <strong>https:\/\/api.kinsta.com\/v2\/sites<\/strong>. Aseg\u00farate de incluir las cabeceras necesarias y el payload como JSON.<\/p>\n<pre><code class=\"language-jsx\">const createSiteWithKinstaAPI = async () =&gt; {\n    const resp = await fetch(\n        `${KinstaAPIUrl}\/sites`,\n        {\n            method: 'POST',\n            headers: {\n                'Content-Type': 'application\/json',\n                Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`\n            },\n            body: JSON.stringify({\n                company: `${process.env.REACT_APP_KINSTA_COMPANY_ID}`,\n                display_name: displayName,\n                region: centerLocation,\n                install_mode: 'new',\n                is_subdomain_multisite: false,\n                admin_email: wpAdminEmail,\n                admin_password: wpAdminPassword,\n                admin_user: wpAdminUsername,\n                is_multisite: false,\n                site_title: siteTitle,\n                woocommerce: false,\n                wordpressseo: false,\n                wp_language: 'en_US'\n            })\n        }\n    );\n\n    \/\/ Handle the response data\n};<\/code><\/pre>\n<p>El payload contiene varios campos de datos que requiere la API Kinsta, como el ID de la empresa, el nombre para mostrar, la regi\u00f3n, el modo de instalaci\u00f3n, el correo electr\u00f3nico del administrador, la contrase\u00f1a del administrador, etc. Estos valores se obtienen de las variables de estado correspondientes.<\/p>\n<p>Tras realizar la solicitud a la API, esperamos la respuesta utilizando <code>await resp.json()<\/code> y extraemos los datos relevantes. Creamos un nuevo objeto <code>newData<\/code>, con el ID de la operaci\u00f3n y el nombre para mostrar, que se almacena en el localStorage utilizando <code>localStorage.setItem<\/code>.<\/p>\n<pre><code class=\"language-jsx\">const createSiteWithKinstaAPI = async () =&gt; {\n    const resp = await fetch(\n        \/\/ Fetch request here\n    );\n\n    const data = await resp.json();\n    let newData = { operationId: data.operation_id, display_name: displayName };\n    localStorage.setItem('state', JSON.stringify(newData));\n    navigate('\/details');\n}<\/code><\/pre>\n<p>Por \u00faltimo, invocamos la funci\u00f3n <code>createSiteWithKinstaAPI<\/code> para que cuando un usuario rellene el formulario y haga clic en el bot\u00f3n, se cree un sitio WordPress utilizando la API de Kinsta. Adem\u00e1s, en el c\u00f3digo, se menciona que el usuario es redirigido a la p\u00e1gina <strong>details.jsx<\/strong> para realizar un seguimiento de la operaci\u00f3n con la API de Kinsta. Para activar la funcionalidad de navegaci\u00f3n, importa <code>useNavigate<\/code> de <code>react-router-dom<\/code> e in\u00edcialo.<\/p>\n<p>Recordatorio: Puedes encontrar el c\u00f3digo completo de <a href=\"https:\/\/github.com\/kinsta\/site-builder\/blob\/starter-files\/src\/pages\/Home.jsx\">esta p\u00e1gina en el repositorio de GitHub<\/a>.<\/p>\n<h3>Implementar la Comprobaci\u00f3n del Estado de la Operaci\u00f3n con la API Kinsta<\/h3>\n<p>Para comprobar el estado de la operaci\u00f3n con la API de Kinsta, utilizamos el ID de la operaci\u00f3n que se almacen\u00f3 en el localStorage. Este ID de operaci\u00f3n se recupera del localStorage utilizando <code>JSON.parse(localStorage.getItem('state'))<\/code> y se asigna a una variable.<\/p>\n<p>Para comprobar el estado de la operaci\u00f3n, realiza otra solicitud a la API Kinsta enviando una solicitud GET al endpoint <code>\/operations\/{operationId}<\/code>. Esta solicitud incluye las cabeceras necesarias, como la cabecera de Autorizaci\u00f3n que contiene la clave de la API.<\/p>\n<pre><code class=\"language-jsx\">const [operationData, setOperationData] = useState({ message: \"Operation in progress\" });\nconst KinstaAPIUrl = 'https:\/\/api.kinsta.com\/v2';\nconst stateData = JSON.parse(localStorage.getItem('state'));\n\nconst checkOperation = async () =&gt; {\n    const operationId = stateData.operationId;\n    const resp = await fetch(\n        `${KinstaAPIUrl}\/operations\/${operationId}`,\n        {\n            method: 'GET',\n            headers: {\n                Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`\n            }\n        }\n    );\n    const data = await resp.json();\n    setOperationData(data);\n}<\/code><\/pre>\n<p>Una vez recibida la respuesta, extraemos los datos relevantes de la misma utilizando <code>await resp.json()<\/code>. A continuaci\u00f3n, los datos de la operaci\u00f3n se actualizan en el estado utilizando <code>setOperationData(data)<\/code>.<\/p>\n<p>En la sentencia de retorno del componente, mostramos el mensaje de la operaci\u00f3n utilizando <code>operationData.message<\/code>. Tambi\u00e9n proporcionamos un bot\u00f3n que permite al usuario activar manualmente la comprobaci\u00f3n del estado de la operaci\u00f3n llamando al <code>checkOperation<\/code>.<\/p>\n<p>Adem\u00e1s, si el estado de la operaci\u00f3n indica que ha finalizado con \u00e9xito, el usuario puede utilizar los enlaces a\u00f1adidos para acceder al administrador de WordPress y al propio sitio. Los enlaces se construyen utilizando el <code>stateData.display_name<\/code> obtenido de localStorage.<\/p>\n<pre><code class=\"language-jsx\">&lt;a href={`http:\/\/${stateData.display_name}.kinsta.cloud\/wp-admin\/`} target=\"_blank\" rel=\"noreferrer\" className='detail-link'&gt;\n    &lt;p&gt;Open WordPress admin&lt;\/p&gt;\n    &lt;FiExternalLink \/&gt;\n&lt;\/a&gt;\n&lt;a href={`http:\/\/${stateData.display_name}.kinsta.cloud\/`} target=\"_blank\" rel=\"noreferrer\" className='detail-link'&gt;\n    &lt;p&gt;Open URL&lt;\/p&gt;\n    &lt;FiExternalLink \/&gt;\n&lt;\/a&gt;<\/code><\/pre>\n<p>Al hacer clic en estos enlaces se abre el admin de WordPress y la URL del sitio respectivamente en una nueva pesta\u00f1a, permitiendo al usuario acceder a ellos sin tener que navegar a MyKinsta.<\/p>\n<p>Ahora puedes crear un sitio WordPress f\u00e1cilmente a trav\u00e9s de tu aplicaci\u00f3n personalizada.<\/p>\n<h2>C\u00f3mo Desplegar tu Aplicaci\u00f3n React con Kinsta<\/h2>\n<p>Para desplegar tu proyecto React en el <a href=\"https:\/\/sevalla.com\/application-hosting\/\">alojamiento de aplicaciones<\/a> de Kinsta, necesitas 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 \u00abAplicaciones\u00bb y luego en \u00abA\u00f1adir servicio\u00bb.<\/li>\n<li>Selecciona \u00abAplicaci\u00f3n\u00bb 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 24 ubicaciones de centros de datos disponibles en la lista de opciones. 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 alojamientos 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 <strong> archivo .env<\/strong>.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/set-environment-variables-on-mykinsta.jpg\" alt=\"Establece variables de entorno en MyKinsta al desplegar.\" 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:\/\/site-builder-ndg9i.kinsta.app\/<\/strong>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>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\n<h2>Resumen<\/h2>\n<p>En este art\u00edculo, has aprendido a utilizar mediante programaci\u00f3n la API de Kinsta para crear un sitio WordPress e integrar la API en una aplicaci\u00f3n React. Recuerda siempre mantener segura tu clave API y siempre que creas que la has compartido p\u00fablicamente, rev\u00f3cala y crea una nueva.<\/p>\n<p>La API de Kinsta puede utilizarse no s\u00f3lo para crear un sitio WordPress, sino tambi\u00e9n para recuperar informaci\u00f3n sobre tus sitios de WordPress, dominios y mucho m\u00e1s. Tambi\u00e9n puede acceder a servicios de <a href=\"https:\/\/kinsta.com\/es\/\">Kinsta<\/a> como bases de datos y aplicaciones.<\/p>\n<p><em>\u00bfQu\u00e9 endpoint te gustar\u00eda que se a\u00f1adiera pr\u00f3ximamente a la API Kinsta, y qu\u00e9 te gustar\u00eda que construy\u00e9ramos a continuaci\u00f3n con la API Kinsta? H\u00e1znoslo saber en los comentarios.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>WordPress es un popular sistema de gesti\u00f3n de contenidos que impulsa millones de sitios web en Internet. Ofrece una interfaz f\u00e1cil de usar y una amplia &#8230;<\/p>\n","protected":false},"author":287,"featured_media":68049,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1270,1345],"class_list":["post-68048","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-api","topic-desarrollo-wordpress"],"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 crear un Sitio WordPress con la API de Kinsta - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Desbloquea todo el potencial de la API de Kinsta y crea un sitio WordPress f\u00e1cilmente. Aprende tambi\u00e9n a conectar la API de Kinsta y a crear 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\/api-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo Crear un Sitio WordPress con la API de Kinsta\" \/>\n<meta property=\"og:description\" content=\"Desbloquea todo el potencial de la API de Kinsta y crea un sitio WordPress f\u00e1cilmente. Aprende tambi\u00e9n a conectar la API de Kinsta y a crear una interfaz de usuario personalizada.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/api-wordpress\/\" \/>\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-07-13T11:09:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-23T09:32:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/07\/wordpress-api.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Desbloquea todo el potencial de la API de Kinsta y crea un sitio WordPress f\u00e1cilmente. Aprende tambi\u00e9n a conectar la API de Kinsta y a crear una interfaz de usuario personalizada.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/07\/wordpress-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=\"19 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/api-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/api-wordpress\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"C\u00f3mo Crear un Sitio WordPress con la API de Kinsta\",\"datePublished\":\"2023-07-13T11:09:54+00:00\",\"dateModified\":\"2023-08-23T09:32:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/api-wordpress\/\"},\"wordCount\":3534,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/api-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/07\/wordpress-api.jpg\",\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/api-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/api-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/api-wordpress\/\",\"name\":\"C\u00f3mo crear un Sitio WordPress con la API de Kinsta - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/api-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/api-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/07\/wordpress-api.jpg\",\"datePublished\":\"2023-07-13T11:09:54+00:00\",\"dateModified\":\"2023-08-23T09:32:25+00:00\",\"description\":\"Desbloquea todo el potencial de la API de Kinsta y crea un sitio WordPress f\u00e1cilmente. Aprende tambi\u00e9n a conectar la API de Kinsta y a crear una interfaz de usuario personalizada.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/api-wordpress\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/api-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/api-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/07\/wordpress-api.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/07\/wordpress-api.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/api-wordpress\/#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 Crear un Sitio WordPress con la API de Kinsta\"}]},{\"@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 crear un Sitio WordPress con la API de Kinsta - Kinsta\u00ae","description":"Desbloquea todo el potencial de la API de Kinsta y crea un sitio WordPress f\u00e1cilmente. Aprende tambi\u00e9n a conectar la API de Kinsta y a crear 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\/api-wordpress\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo Crear un Sitio WordPress con la API de Kinsta","og_description":"Desbloquea todo el potencial de la API de Kinsta y crea un sitio WordPress f\u00e1cilmente. Aprende tambi\u00e9n a conectar la API de Kinsta y a crear una interfaz de usuario personalizada.","og_url":"https:\/\/kinsta.com\/es\/blog\/api-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2023-07-13T11:09:54+00:00","article_modified_time":"2023-08-23T09:32:25+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/07\/wordpress-api.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Desbloquea todo el potencial de la API de Kinsta y crea un sitio WordPress f\u00e1cilmente. Aprende tambi\u00e9n a conectar la API de Kinsta y a crear una interfaz de usuario personalizada.","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/07\/wordpress-api.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Joel Olawanle","Tiempo de lectura":"19 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/api-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/api-wordpress\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"C\u00f3mo Crear un Sitio WordPress con la API de Kinsta","datePublished":"2023-07-13T11:09:54+00:00","dateModified":"2023-08-23T09:32:25+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/api-wordpress\/"},"wordCount":3534,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/api-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/07\/wordpress-api.jpg","inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/es\/blog\/api-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/api-wordpress\/","url":"https:\/\/kinsta.com\/es\/blog\/api-wordpress\/","name":"C\u00f3mo crear un Sitio WordPress con la API de Kinsta - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/api-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/api-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/07\/wordpress-api.jpg","datePublished":"2023-07-13T11:09:54+00:00","dateModified":"2023-08-23T09:32:25+00:00","description":"Desbloquea todo el potencial de la API de Kinsta y crea un sitio WordPress f\u00e1cilmente. Aprende tambi\u00e9n a conectar la API de Kinsta y a crear una interfaz de usuario personalizada.","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/api-wordpress\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/api-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/api-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/07\/wordpress-api.jpg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/07\/wordpress-api.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/api-wordpress\/#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 Crear un Sitio WordPress con la API de Kinsta"}]},{"@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\/68048","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=68048"}],"version-history":[{"count":9,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/68048\/revisions"}],"predecessor-version":[{"id":68145,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/68048\/revisions\/68145"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/68048\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/68048\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/68048\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/68048\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/68048\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/68048\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/68048\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/68048\/translations\/es"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/68048\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/68049"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=68048"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=68048"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=68048"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}