{"id":74923,"date":"2024-05-09T15:35:34","date_gmt":"2024-05-09T13:35:34","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=74923&#038;preview=true&#038;preview_id=74923"},"modified":"2024-05-27T15:38:27","modified_gmt":"2024-05-27T13:38:27","slug":"tema-wordpress-react","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/tema-wordpress-react\/","title":{"rendered":"C\u00f3mo crear un tema de WordPress con React"},"content":{"rendered":"<p>Este art\u00edculo pr\u00e1ctico aprovecha la flexibilidad de<a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-wordpress\/\"> WordPress<\/a> y la potente interfaz de usuario (IU) de <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-react-js\/\">React<\/a> para el desarrollo de temas. Demuestra c\u00f3mo la integraci\u00f3n de <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-react\/\">WordPress y React<\/a> eleva tus proyectos de WordPress gui\u00e1ndote a trav\u00e9s de los pasos necesarios para crear un tema.<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>Requisitos previos<\/h2>\n<p>Para seguir este art\u00edculo, debes tener lo siguiente:<\/p>\n<ul>\n<li>Un sitio WordPress. Kinsta ofrece m\u00faltiples opciones de configuraci\u00f3n, incluido el <a href=\"https:\/\/kinsta.com\/local-development\/\">desarrollo local<\/a> con <a href=\"https:\/\/kinsta.com\/es\/devkinsta\/\">DevKinsta<\/a>, un sencillo <a href=\"https:\/\/kinsta.com\/es\/mykinsta\/\">panel de control MyKinsta,<\/a> o de forma program\u00e1tica a trav\u00e9s de la API de Kinsta.<\/li>\n<li>Node.js y npm (<a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-npm\/\">Node Package Manager<\/a>) o yarn instalados en tu ordenador<\/li>\n<\/ul>\n<h2>Crear una estructura b\u00e1sica de temas de WordPress<\/h2>\n<p>Crear una estructura b\u00e1sica de un tema de WordPress implica configurar una serie de archivos y directorios que WordPress utiliza para aplicar los estilos, funcionalidades y dise\u00f1os de tu tema a un sitio de WordPress.<\/p>\n<ol start=\"1\">\n<li>En tu entorno DevKinsta, accede a la carpeta de tu sitio. Navega hasta el directorio <strong>wp-content\/themes<\/strong>.<\/li>\n<li>Crea una nueva carpeta para tu tema. El nombre de la carpeta debe ser \u00fanico y descriptivo \u2014 por ejemplo, <strong>my-basic-theme<\/strong>.<\/li>\n<li>En la carpeta del tema, crea estos archivos esenciales y d\u00e9jalos vac\u00edos:\n<ul>\n<li><strong>style.css<\/strong> \u2014 Este es el archivo principal de la hoja de estilos. Tambi\u00e9n contiene la informaci\u00f3n de cabecera de tu tema.<\/li>\n<li><strong>functions.php<\/strong> \u2014 Este archivo define las funciones, clases, acciones y filtros que utilizar\u00e1 tu tema.<\/li>\n<li><strong>index.php<\/strong> \u2014 Este es el archivo principal de la plantilla. Es necesario para todos los temas.<\/li>\n<\/ul>\n<p>Si no utilizas React, tambi\u00e9n debes crear los siguientes archivos. Pero con React crear\u00edamos componentes para ellos m\u00e1s tarde.<\/p>\n<ul>\n<li><strong>header.php<\/strong> \u2014 Contiene la secci\u00f3n de cabecera de tu sitio.<\/li>\n<li><strong>footer.php<\/strong> \u2014 Contiene la secci\u00f3n de pie de p\u00e1gina de tu sitio.<\/li>\n<li><strong>sidebar.php<\/strong> \u2014 Para la secci\u00f3n de la barra lateral, si tu tema incluye barras laterales.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>A continuaci\u00f3n, abre <strong>style.css<\/strong> y a\u00f1ade lo siguiente al principio del archivo:<\/p>\n<pre><code class=\"language-css\">\/*\nTheme Name: My Basic Theme\nTheme URI: http:\/\/example.com\/my-basic-theme\/\nAuthor: Your Name\nAuthor URI: http:\/\/example.com\nDescription: A basic WordPress theme.\nVersion: 1.0\nLicense: GNU General Public License v2 or later\nLicense URI: http:\/\/www.gnu.org\/licenses\/gpl-2.0.html\nTags: blog, custom-background\nText Domain: my-basic-theme\n*\/<\/code><\/pre>\n<p>Este fragmento de c\u00f3digo es la secci\u00f3n de cabecera del archivo <strong>style.css<\/strong> de un tema de WordPress, que contiene metadatos esenciales como el nombre del tema, los datos del autor, la versi\u00f3n y la licencia. Ayuda a WordPress a reconocer y mostrar el tema en el <a href=\"https:\/\/kinsta.com\/es\/blog\/panel-control-administracion-wordpress\/\">panel de control<\/a>, incluyendo su descripci\u00f3n y etiquetas para categorizarlo.<\/p>\n<h2>Integrar React en WordPress<\/h2>\n<p>Integrar React en un tema de WordPress te permite utilizar la arquitectura basada en componentes de React para crear interfaces de usuario din\u00e1micas e interactivas en tu sitio de WordPress. Para integrar React, utilizar\u00e1s el <a href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/scripts\" target=\"_blank\" rel=\"noopener noreferrer\"> paquete @wordpress\/scripts<\/a>.<\/p>\n<p>Se trata de una colecci\u00f3n de scripts reutilizables adaptados al desarrollo de WordPress. WordPress lo proporciona para simplificar el proceso de configuraci\u00f3n y construcci\u00f3n, especialmente cuando se integran flujos de trabajo modernos de <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a>, como React, en temas y plugins de WordPress.<\/p>\n<p>Este conjunto de herramientas envuelve tareas comunes, facilitando el desarrollo con <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-javascript\/\">JavaScript<\/a> en el ecosistema de WordPress.<\/p>\n<h3>Adapta tu tema<\/h3>\n<p>Ahora que tienes una estructura b\u00e1sica de temas de WordPress, puedes adaptar tu tema.<\/p>\n<ol start=\"1\">\n<li>Dentro del directorio de tu tema, pega el siguiente c\u00f3digo en el archivo <strong>functions.php<\/strong>:\n<pre><code class=\"language-php\">&lt;?php\nfunction my_react_theme_scripts() {\n    wp_enqueue_script('my-react-theme-app', get_template_directory_uri() . '\/build\/index.js', array('wp-element'), '1.0.0', true);\n    wp_enqueue_style('my-react-theme-style', get_stylesheet_uri());\n}\n\nadd_action('wp_enqueue_scripts', 'my_react_theme_scripts');<\/code><\/pre>\n<p>El archivo <strong>functions.php<\/strong> integra React con tu tema de WordPress. Utiliza las funciones <code>wp_enqueue_script<\/code> y <code>wp_enqueue_style<\/code> para a\u00f1adir archivos JavaScript y hojas de estilo en cascada (<a href=\"https:\/\/kinsta.com\/es\/blog\/buenas-practicas-css\/\">CSS<\/a>) a tu tema.<\/p>\n<p>La funci\u00f3n <code>wp_enqueue_script<\/code> de WordPress toma varios argumentos:<\/p>\n<ul>\n<li>El nombre del manejador (<code>'my-react-theme-app'<\/code>), que identifica de forma \u00fanica el script<\/li>\n<li>La ruta al archivo del script<\/li>\n<li>El array de dependencias, <code>array('wp-element')<\/code>, que indica que el script depende del wrapper de WordPress para React <code>('wp-element')<\/code>.<\/li>\n<li>El n\u00famero de versi\u00f3n <code>('1.0.0')<\/code><\/li>\n<li>La posici\u00f3n <code>true<\/code>, que especifica que el script debe cargarse en el pie de p\u00e1gina del documento HTML para mejorar el rendimiento de carga de la p\u00e1gina<\/li>\n<\/ul>\n<p>La funci\u00f3n <code>wp_enqueue_style<\/code> toma los siguientes argumentos:<\/p>\n<ul>\n<li>El nombre del manejador <code>'my-react-theme-style'<\/code>, que identifica un\u00edvocamente la hoja de estilos<\/li>\n<li>La fuente <code>get_stylesheet_uri()<\/code>, que devuelve la URL de la hoja de estilos principal del tema <strong>(style.css<\/strong>) y garantiza que se apliquen los estilos del tema<\/li>\n<\/ul>\n<ul>\n<li>El elemento <code>add_action<\/code>, que hace hook (engancha) una funci\u00f3n personalizada <code>'my_react_theme_scripts'<\/code> a una acci\u00f3n espec\u00edfica (<code>'wp_enqueue_scripts'<\/code>). Esto garantiza que tu JavaScript y CSS se carguen correctamente cuando WordPress se prepare para renderizar la p\u00e1gina.<\/li>\n<\/ul>\n<p>Este c\u00f3digo garantiza que el archivo JavaScript compilado de tu aplicaci\u00f3n React, ubicado en <strong>&lt;tu-directorio-del-tema&gt;\/build\/index.js<\/strong>, y la hoja de estilos principal de tu tema se carguen con tu tema.<\/p>\n<p>El <strong>directorio \/build<\/strong> suele proceder de la compilaci\u00f3n de tu aplicaci\u00f3n React mediante una herramienta como <code>create-react-app<\/code> o <a href=\"https:\/\/kinsta.com\/es\/blog\/vite-vs-webpack\/\">webpack<\/a>, que agrupa tu c\u00f3digo React en un archivo JavaScript minificado y listo para producci\u00f3n.<\/p>\n<p>Esta configuraci\u00f3n es esencial para integrar la funcionalidad React en tu tema de WordPress, permitiendo experiencias de usuario din\u00e1micas, similares a las de una aplicaci\u00f3n, dentro de un sitio de WordPress.<\/li>\n<li>A continuaci\u00f3n, actualiza el contenido del archivo <strong>index.php<\/strong>:\n<pre><code class=\"language-php\">&lt;!DOCTYPE html&gt;\n&lt;html &lt;?php language_attributes(); ?&gt;&gt;\n&lt;head&gt;\n    &lt;meta charset=\"&lt;?php bloginfo('charset'); ?&gt;\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;\n    &lt;?php wp_head(); ?&gt;\n&lt;\/head&gt;\n&lt;body &lt;?php body_class(); ?&gt;&gt;\n    &lt;div id=\"app\"&gt;&lt;\/div&gt;\n    &lt;?php wp_footer(); ?&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>El c\u00f3digo del archivo <strong>index.php<\/strong> define la estructura HTML b\u00e1sica del tema de WordPress, incluyendo hooks para que WordPress inserte las cabeceras (<code>wp_head<\/code>) y pies de p\u00e1gina (<code>wp_footer<\/code>) necesarios y un <code>div<\/code> con el ID <code>app<\/code> donde se monta la aplicaci\u00f3n React.<\/li>\n<\/ol>\n<h3>Montar React con @wordpress\/scripts<\/h3>\n<ol start=\"1\">\n<li>Abre tu terminal y navega hasta el directorio de tu tema:\n<pre><code class=\"language-bash\">cd wp-content\/themes\/my-basic-theme\n<\/code><\/pre>\n<\/li>\n<li>Inicializa un nuevo proyecto Node.js:\n<pre><code class=\"language-bash\">npm init -y<\/code><\/pre>\n<\/li>\n<li>Instala <code>@wordpress\/scripts<\/code> y <code>@wordpress\/element<\/code>:\n<pre><code class=\"language-bash\">npm install @wordpress\/scripts @wordpress\/element --save-dev<\/code><\/pre>\n<p>Ten en cuenta que este paso puede tardar unos minutos.<\/li>\n<li>Modifica tu archivo <strong>package.json<\/strong> para incluir un script <code>start<\/code> y otro <code>build<\/code>:\n<pre><code class=\"language-json\">\"scripts\": {\n  \"start\": \"wp-scripts start\",\n  \"build\": \"wp-scripts build\"\n},<\/code><\/pre>\n<p>El <code>'@wordpress\/scripts'<\/code> se utiliza para iniciar un servidor de desarrollo con recarga en caliente (hot reloading) con fines de desarrollo (<code>start<\/code>) y para compilar la aplicaci\u00f3n React en activos est\u00e1ticos para producci\u00f3n (<code>build<\/code>).<\/li>\n<\/ol>\n<h3>Crear un proyecto React<\/h3>\n<ol start=\"1\">\n<li>Crea un nuevo directorio llamado <strong>src<\/strong> para tus archivos fuente React dentro de tu tema.<\/li>\n<li>Dentro de la carpeta <strong>src<\/strong>, crea dos nuevos archivos: <strong>index.js <\/strong>y <strong>App.js<\/strong>.<\/li>\n<li>Coloca el siguiente c\u00f3digo en <strong>index.js<\/strong>:\n<pre><code class=\"language-jsx\">import { render } from '@wordpress\/element';\nimport App from '.\/App';\nrender(, document.getElementById('app'))<\/code><\/pre>\n<p>El c\u00f3digo anterior importa la funci\u00f3n <code>render<\/code> de <code>@wordpress\/element<\/code> y el componente <code>App<\/code>. A continuaci\u00f3n, monta el componente <code>App<\/code> en el Modelo de Objetos del Documento (DOM, Document Object Model).<\/li>\n<li>A continuaci\u00f3n, pega este c\u00f3digo en el archivo <strong>App.js<\/strong>:\n<pre><code class=\"language-jsx\">import { Component } from '@wordpress\/element';\nexport default class App extends Component {\n  render() {\n    return (\n      &lt;div&gt; \n        &lt;h1&gt;Hello, WordPress and React!&lt;\/h1&gt;\n        {\/* Your React components will go here *\/}\n      &lt;\/div&gt;\n);\n    }\n}<\/code><\/pre>\n<\/li>\n<\/ol>\n<h3>Finaliza y activa tu tema<\/h3>\n<p>Para activar tu tema:<\/p>\n<ol start=\"1\">\n<li>Ejecuta el servidor de desarrollo con <code>npm start<\/code>.<\/li>\n<li>Activa tu nuevo tema en el panel de control de WordPress accediendo a <strong>Apariencia <\/strong>&gt; <strong>Temas<\/strong>, localizando tu tema y haciendo clic en <strong>Activar<\/strong>.<\/li>\n<li>Aseg\u00farate de que el proceso de construcci\u00f3n de tu proyecto React est\u00e1 correctamente configurado para dar salida al directorio correcto del tema, permitiendo que WordPress renderice tus componentes React.<\/li>\n<li>Visita el frontend de tu sitio WordPress para ver los cambios en directo.<\/li>\n<\/ol>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/hello-wp-react.png\" alt=\"The home page shows the newly created React-based WordPress theme with the message Hello, WordPress and React\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">La p\u00e1gina de inicio muestra el tema de WordPress reci\u00e9n creado basado en React con el mensaje \u2014 Hello, WordPress and React<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Cuando est\u00e9s listo para desplegar tu tema, ejecuta: <code>npm run build<\/code>. Este comando compila tu aplicaci\u00f3n React en activos est\u00e1ticos en un directorio de construcci\u00f3n dentro de la carpeta de tu tema.<\/p>\n<\/aside>\n\n<h2>Desarrollar componentes React para el tema<\/h2>\n<p>A continuaci\u00f3n, sigue un enfoque basado en componentes para ampliar la configuraci\u00f3n b\u00e1sica de React en tu tema de WordPress con componentes espec\u00edficos, como un encabezado.<\/p>\n<h3>Crea el componente de cabecera<\/h3>\n<p>En el directorio <strong>src<\/strong> de tu tema, crea un nuevo archivo para el componente de cabecera. Dale un nombre, como <strong>Header.js<\/strong>, y a\u00f1ade el siguiente c\u00f3digo:<\/p>\n<pre><code class=\"language-jsx\">import { Component } from '@wordpress\/element';\nclass Header extends Component {\n    render() {\n        const { toggleTheme, darkTheme } = this.props;\n        const headerStyle = {\n            backgroundColor: darkTheme ? '#333' : '#EEE',\n            color: darkTheme ? 'white' : '#333',\n            padding: '10px 20px',\n            display: 'flex',\n            justifyContent: 'space-between',\n            alignItems: 'center',\n        };\n        return (\n            &lt;header style={headerStyle}&gt;\n                &lt;div&gt;My WP Theme&lt;\/div&gt;\n                &lt;button onClick={toggleTheme}&gt;{darkTheme ? 'Light Mode' : 'Dark Mode'}&lt;\/button&gt;\n            &lt;\/header&gt;\n        );\n    }\n}\nexport default Header;<\/code><\/pre>\n<p>Este c\u00f3digo define un componente de cabecera utilizando <code>'@wordpress\/element'<\/code> que estiliza din\u00e1micamente la cabecera bas\u00e1ndose en <code>darkTheme prop<\/code>. Incluye un bot\u00f3n para alternar entre los temas claro y oscuro invocando la funci\u00f3n <code>toggleTheme<code> method passed as a prop.<\/code><\/code><\/p>\n<h3>Crear el componente pie de p\u00e1gina<\/h3>\n<p>En el directorio <strong>src<\/strong> de tu tema, crea un nuevo archivo para el componente pie de p\u00e1gina. Dale un nombre \u2014 por ejemplo, <strong>Footer.js<\/strong> \u2014 y a\u00f1ade el siguiente c\u00f3digo:<\/p>\n<pre><code class=\"language-jsx\">import { Component } from '@wordpress\/element';\nclass Footer extends Component {\n    render() {\n        const { darkTheme } = this.props;\n        const footerStyle = {\n            backgroundColor: darkTheme ? '#333' : '#EEE',\n            color: darkTheme ? 'white' : '#333',\n            padding: '20px',\n            textAlign: 'center',\n        };\n        return (\n            &lt;footer&gt; style={footerStyle}&gt;\n                \u00a9 {new Date().getFullYear()} My WP Theme\n            &lt;\/footer&gt;\n        );\n    }\n}\nexport default Footer;<\/code><\/pre>\n<p>Este c\u00f3digo define un componente de pie de p\u00e1gina que muestra un pie de p\u00e1gina con un estilo din\u00e1mico basado en la propiedad <code>darkTheme<\/code> y muestra el a\u00f1o actual.<\/p>\n<h3>Actualiza el archivo App.js<\/h3>\n<p>Para utilizar el nuevo encabezado y pie de p\u00e1gina, sustituye el contenido del archivo <strong>App.js<\/strong> por el siguiente c\u00f3digo:<\/p>\n<pre><code class=\"language-jsx\">import { Component } from '@wordpress\/element';\nimport Header from '.\/Header';\nimport Footer from '.\/Footer';\nexport default class App extends Component {\n    state = {\n        darkTheme: true,\n    };\n    toggleTheme = () =&gt; {\n        this.setState(prevState =&gt; ({\n            darkTheme: !prevState.darkTheme,\n        }));\n    };\n    render() {\n        const { darkTheme } = this.state;\n        return (\n            &lt;div&gt;\n                &lt;Header darkTheme={darkTheme} toggleTheme={this.toggleTheme} \/&gt;\n                &lt;main style={{ padding: '20px', background: darkTheme ? '#282c34' : '#f5f5f5', color: darkTheme ? 'white' : 'black' }}&gt;               \n                &lt;\/main&gt;\n                &lt;Footer darkTheme={darkTheme} \/&gt;\n            &lt;\/div&gt;\n        );\n    }\n}<\/code><\/pre>\n<p>El proceso de construcci\u00f3n de desarrollo, que busca cambios y recompila tu c\u00f3digo, deber\u00eda seguir activo. Por tanto, tu \u00faltima versi\u00f3n de la plantilla deber\u00eda tener un aspecto similar a \u00e9ste:<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/new-styles-react-wp.png\" alt=\"La p\u00e1gina de inicio mostrando el tema de WordPress basado en React, incluyendo la cabecera y el pie de p\u00e1gina.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">La p\u00e1gina de inicio mostrando el tema de WordPress basado en React, incluyendo la cabecera y el pie de p\u00e1gina.<\/figcaption><\/figure>\n<h2>C\u00f3mo manejar los datos de WordPress en React<\/h2>\n<p>Integrar el contenido de WordPress en aplicaciones React ofrece un puente perfecto entre las s\u00f3lidas capacidades de <a href=\"https:\/\/kinsta.com\/es\/blog\/sitema-de-gestion-de-contenido\/\">gesti\u00f3n de contenidos<\/a> de WordPress y el dise\u00f1o din\u00e1mico de la interfaz de usuario de React. Esto es posible con la API REST de WordPress.<\/p>\n<p>Para acceder a la <a href=\"https:\/\/kinsta.com\/es\/blog\/rest-api-de-wordpress\/\">API REST de WordPress<\/a>, habil\u00edtala actualizando la configuraci\u00f3n del permalink. En el panel de administraci\u00f3n de WordPress, ve a <strong>Ajustes<\/strong> &gt; <strong>Enlaces permanentes<\/strong>. Selecciona la opci\u00f3n <strong>Nombre de la entrada<\/strong> o cualquier otra opci\u00f3n que no sea <strong>Simple<\/strong> y guarda los cambios.<\/p>\n<p>En el directorio <strong>src<\/strong> de tu tema, crea un nuevo archivo llamado <strong>Posts.js<\/strong> y a\u00f1ade este c\u00f3digo:<\/p>\n<pre><code class=\"language-jsx\">import { Component } from '@wordpress\/element';\nclass Posts extends Component {\n    state = {\n        posts: [],\n        isLoading: true,\n        error: null,\n    };\n    componentDidMount() {\n        fetch('http:\/\/127.0.0.1\/wordpress_oop\/wp-json\/wp\/v2\/posts')\n            .then(response =&gt; {\n                if (!response.ok) {\n                    throw new Error('Something went wrong');\n                }\n                return response.json();\n            })\n            .then(posts =&gt; this.setState({ posts, isLoading: false }))\n            .catch(error =&gt; this.setState({ error, isLoading: false }));\n    }\n    render() {\n        const { posts, isLoading, error } = this.state;\n        if (error) {\n            return &lt;div&gt;Error: {error.message}&lt;\/div&gt;;\n        }\n        if (isLoading) {\n            return &lt;div&gt;Loading...&lt;\/div&gt;;\n        }\n        return (\n            &lt;div&gt;\n                {posts.map(post =&gt; (\n                    &lt;article key={post.id}&gt;\n                        &lt;h2 dangerouslySetInnerHTML={{ __html: post.title.rendered }} \/&gt;\n                        &lt;div dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }} \/&gt;\n                    &lt;\/article&gt;\n                ))}\n            &lt;\/div&gt;\n        );\n    }\n}\nexport default Posts;<\/code><\/pre>\n<p>La URL <code>fetch('http:\/\/127.0.0.1\/wordpress_oop\/wp-json\/wp\/v2\/posts')<\/code> podr\u00eda ser ligeramente diferente dependiendo del nombre de despliegue de WP \u2014 es decir, de la carpeta donde instalaste WP. Alternativamente, puedes tomar el nombre de host del sitio del panel de control de DevKinsta y a\u00f1adir el sufijo <code>\/wp-json\/wp\/v2\/posts<\/code>.<\/p>\n<p>El componente <code>Posts<\/code> es un excelente ejemplo de esta integraci\u00f3n, que demuestra el proceso de obtenci\u00f3n y gesti\u00f3n de datos de WordPress \u2014concretamente, entradas \u2014 utilizando la API REST de WordPress.<\/p>\n<p>Al iniciar una solicitud de red dentro del m\u00e9todo del ciclo de vida del componente, <code>componentDidMount<\/code>, el componente recupera eficazmente las entradas de un sitio de WordPress y las almacena en su estado. Este m\u00e9todo resalta un patr\u00f3n para incorporar din\u00e1micamente datos de WordPress, como p\u00e1ginas o tipos de post personalizados, en componentes React.<\/p>\n<p>Para utilizar un nuevo componente, sustituye el contenido del archivo <strong>App.js<\/strong> por el siguiente c\u00f3digo:<\/p>\n<pre><code class=\"language-jsx\">import { Component } from '@wordpress\/element';\nimport Header from '.\/Header';\nimport Footer from '.\/Footer';\nimport Posts from '.\/Posts'; \/\/ Import the Posts component\n\nexport default class App extends Component {\n    state = {\n        darkTheme: true,\n    };\n    toggleTheme = () =&gt; {\n        this.setState(prevState =&gt; ({\n            darkTheme: !prevState.darkTheme,\n        }));\n    };\n    render() {\n        const { darkTheme } = this.state;\n        return (\n            &lt;div&gt;\n                &lt;Header darkTheme={darkTheme} toggleTheme={this.toggleTheme} \/&gt;\n                &lt;main style={{ padding: '20px', background: darkTheme ? '#282c34' : '#f5f5f5', color: darkTheme ? 'white' : 'black' }}&gt;\n                    &lt;Posts \/&gt; {\/* Render the Posts component *\/}\n                &lt;\/main&gt;\n\n                &lt;Footer darkTheme={darkTheme} \/&gt;\n            &lt;\/div&gt;\n        );\n    }\n}<\/code><\/pre>\n<p>Ahora puedes comprobar la \u00faltima y definitiva versi\u00f3n de tu tema. Adem\u00e1s de la cabecera y el pie de p\u00e1gina, consta de un \u00e1rea de contenido din\u00e1mico que presenta las entradas.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/04\/fetch-data-react-wp-theme.png\" alt=\"La p\u00e1gina de inicio muestra el tema final de WordPress basado en React, incluidas las entradas.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">La p\u00e1gina de inicio muestra el tema final de WordPress basado en React, incluidas las entradas.<\/figcaption><\/figure>\n<h2>Utilizar el tema de WordPress basado en React en un proyecto de WordPress<\/h2>\n<p>La integraci\u00f3n de un tema basado en React en un proyecto de WordPress comienza con la transformaci\u00f3n del c\u00f3digo React en un formato compatible con WordPress, aprovechando paquetes como <code>@wordpress\/scripts<\/code>. Esta herramienta simplifica el proceso de construcci\u00f3n, permiti\u00e9ndote compilar aplicaciones React en activos est\u00e1ticos que WordPress puede poner en cola.<\/p>\n<p>Construir el tema es sencillo con los comandos npm proporcionados por <code>@wordpress\/scripts<\/code>. Ejecutar <code>npm run build<\/code> en el directorio del tema compila el c\u00f3digo React en archivos JavaScript y CSS est\u00e1ticos.<\/p>\n<p>A continuaci\u00f3n, coloca estos activos compilados en el directorio apropiado dentro del tema, asegur\u00e1ndote de que WordPress pueda cargar y renderizar correctamente los componentes React como parte del tema. Una vez integrado, puedes activar el tema React de WordPress como cualquier otro, aportando al instante una experiencia de usuario moderna, similar a la de una aplicaci\u00f3n, al sitio de WordPress.<\/p>\n<h2>Resumen<\/h2>\n<p>Al crear e integrar un tema en WordPress utilizando las potentes capacidades de interfaz de usuario de React, puedes liberar el potencial para crear experiencias web flexibles, altamente interactivas y centradas en el usuario.<\/p>\n<p>Si est\u00e1s listo para poner en marcha tus temas de WordPress React, Kinsta ofrece un <a href=\"https:\/\/kinsta.com\/es\/wordpress-hosting\/\">servicio de alojamiento administrado de WordPress<\/a> con una infraestructura segura, edge caching y otras funciones que aumentan la velocidad y el rendimiento de tu sitio.<\/p>\n<p><em>\u00bfEst\u00e1s pensando en crear un tema de WordPress con React? Por favor, comparte algunos consejos sobre por qu\u00e9 crees que es lo mejor y c\u00f3mo hacerlo.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Este art\u00edculo pr\u00e1ctico aprovecha la flexibilidad de WordPress y la potente interfaz de usuario (IU) de React para el desarrollo de temas. Demuestra c\u00f3mo la integraci\u00f3n &#8230;<\/p>\n","protected":false},"author":199,"featured_media":74924,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1321,1355],"class_list":["post-74923","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-react","topic-temas-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 tema de WordPress con React - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Aprende a crear un tema de WordPress desde cero con React aprovechando sus potentes funciones, como los componentes reutilizables y las peticiones API.\" \/>\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\/tema-wordpress-react\/\" \/>\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 tema de WordPress con React\" \/>\n<meta property=\"og:description\" content=\"Aprende a crear un tema de WordPress desde cero con React aprovechando sus potentes funciones, como los componentes reutilizables y las peticiones API.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/tema-wordpress-react\/\" \/>\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=\"2024-05-09T13:35:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-27T13:38:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/05\/wordpress-react-theme.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=\"Jeremy Holcombe\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Aprende a crear un tema de WordPress desde cero con React aprovechando sus potentes funciones, como los componentes reutilizables y las peticiones API.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/05\/wordpress-react-theme-1024x512.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jeremy Holcombe\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/tema-wordpress-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/tema-wordpress-react\/\"},\"author\":{\"name\":\"Jeremy Holcombe\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\"},\"headline\":\"C\u00f3mo crear un tema de WordPress con React\",\"datePublished\":\"2024-05-09T13:35:34+00:00\",\"dateModified\":\"2024-05-27T13:38:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/tema-wordpress-react\/\"},\"wordCount\":2071,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/tema-wordpress-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/05\/wordpress-react-theme.jpg\",\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/tema-wordpress-react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/tema-wordpress-react\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/tema-wordpress-react\/\",\"name\":\"C\u00f3mo crear un tema de WordPress con React - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/tema-wordpress-react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/tema-wordpress-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/05\/wordpress-react-theme.jpg\",\"datePublished\":\"2024-05-09T13:35:34+00:00\",\"dateModified\":\"2024-05-27T13:38:27+00:00\",\"description\":\"Aprende a crear un tema de WordPress desde cero con React aprovechando sus potentes funciones, como los componentes reutilizables y las peticiones API.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/tema-wordpress-react\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/tema-wordpress-react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/tema-wordpress-react\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/05\/wordpress-react-theme.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/05\/wordpress-react-theme.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/tema-wordpress-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Temas WordPress\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/temas-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"C\u00f3mo crear un tema de WordPress con 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\/4eee42881d7b5a73ebb4f58dd5223b21\",\"name\":\"Jeremy Holcombe\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"caption\":\"Jeremy Holcombe\"},\"description\":\"Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/jeremyholcombe\/\"],\"url\":\"https:\/\/kinsta.com\/es\/blog\/author\/jeremyholcombe\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"C\u00f3mo crear un tema de WordPress con React - Kinsta\u00ae","description":"Aprende a crear un tema de WordPress desde cero con React aprovechando sus potentes funciones, como los componentes reutilizables y las peticiones API.","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\/tema-wordpress-react\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo crear un tema de WordPress con React","og_description":"Aprende a crear un tema de WordPress desde cero con React aprovechando sus potentes funciones, como los componentes reutilizables y las peticiones API.","og_url":"https:\/\/kinsta.com\/es\/blog\/tema-wordpress-react\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2024-05-09T13:35:34+00:00","article_modified_time":"2024-05-27T13:38:27+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/05\/wordpress-react-theme.jpg","type":"image\/jpeg"}],"author":"Jeremy Holcombe","twitter_card":"summary_large_image","twitter_description":"Aprende a crear un tema de WordPress desde cero con React aprovechando sus potentes funciones, como los componentes reutilizables y las peticiones API.","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/05\/wordpress-react-theme-1024x512.jpg","twitter_creator":"@Kinsta_ES","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Jeremy Holcombe","Tiempo de lectura":"14 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/tema-wordpress-react\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/tema-wordpress-react\/"},"author":{"name":"Jeremy Holcombe","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21"},"headline":"C\u00f3mo crear un tema de WordPress con React","datePublished":"2024-05-09T13:35:34+00:00","dateModified":"2024-05-27T13:38:27+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/tema-wordpress-react\/"},"wordCount":2071,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/tema-wordpress-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/05\/wordpress-react-theme.jpg","inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/es\/blog\/tema-wordpress-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/tema-wordpress-react\/","url":"https:\/\/kinsta.com\/es\/blog\/tema-wordpress-react\/","name":"C\u00f3mo crear un tema de WordPress con React - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/tema-wordpress-react\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/tema-wordpress-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/05\/wordpress-react-theme.jpg","datePublished":"2024-05-09T13:35:34+00:00","dateModified":"2024-05-27T13:38:27+00:00","description":"Aprende a crear un tema de WordPress desde cero con React aprovechando sus potentes funciones, como los componentes reutilizables y las peticiones API.","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/tema-wordpress-react\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/tema-wordpress-react\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/tema-wordpress-react\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/05\/wordpress-react-theme.jpg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/05\/wordpress-react-theme.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/tema-wordpress-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Temas WordPress","item":"https:\/\/kinsta.com\/es\/secciones\/temas-wordpress\/"},{"@type":"ListItem","position":3,"name":"C\u00f3mo crear un tema de WordPress con 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\/4eee42881d7b5a73ebb4f58dd5223b21","name":"Jeremy Holcombe","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","caption":"Jeremy Holcombe"},"description":"Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.","sameAs":["https:\/\/www.linkedin.com\/in\/jeremyholcombe\/"],"url":"https:\/\/kinsta.com\/es\/blog\/author\/jeremyholcombe\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/74923","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\/199"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=74923"}],"version-history":[{"count":9,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/74923\/revisions"}],"predecessor-version":[{"id":75250,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/74923\/revisions\/75250"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74923\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74923\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74923\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74923\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74923\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74923\/translations\/jp"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74923\/translations\/es"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74923\/translations\/nl"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74923\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/74924"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=74923"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=74923"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=74923"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}