{"id":44319,"date":"2021-10-08T10:42:52","date_gmt":"2021-10-08T08:42:52","guid":{"rendered":"https:\/\/kinsta.com\/?p=104261"},"modified":"2025-12-16T19:36:20","modified_gmt":"2025-12-16T18:36:20","slug":"headless-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/headless-wordpress\/","title":{"rendered":"Aprende a Crear un Sitio Headless WordPress con Vue.js"},"content":{"rendered":"

WordPress ha sido el sistema de gesti\u00f3n de contenidos<\/a> preferido por los desarrolladores y los no desarrolladores para construir y crear r\u00e1pidamente sitios web impresionantes.<\/p>\n

El uso de una arquitectura de microservicios, donde el backend de gesti\u00f3n de contenidos est\u00e1 separado del frontend, permite el m\u00e1ximo control de ambos \u00abextremos\u00bb.\u00a0 Este problema de separaci\u00f3n es lo que intentan resolver los sistemas de gesti\u00f3n de contenidos headless, incluidas las soluciones de\u00a0headless <\/span>WordPress.<\/span><\/p>\n

Con un enfoque headless, las empresas tienen un control m\u00e1s granular sobre el backend de gesti\u00f3n de contenidos. Tambi\u00e9n son libres de utilizar cualquier frontend de su elecci\u00f3n, incluyendo React, Vue, Angular<\/a>, etc.<\/p>\n

Esta gu\u00eda explorar\u00e1 en detalle el\u00a0headless <\/span>WordPress, y en qu\u00e9 consiste, cu\u00e1ndo y por qu\u00e9 deber\u00edas considerar su uso. Por \u00faltimo, exploraremos la creaci\u00f3n de un entorno de <\/span>headless <\/span>WordPress, la construcci\u00f3n del frontend con <\/span>Vue.js<\/a>, y el despliegue de\u00a0<\/span>headless <\/span>WordPress<\/span> utilizando Kinsta.<\/span><\/p>\n

<\/div><\/kinsta-auto-toc>\n

\u00bfQu\u00e9 es Headless WordPress?<\/h2>\n

WordPress es una aplicaci\u00f3n monol\u00edtica en la que las partes del backend y del frontend est\u00e1n estrechamente unidos. El backend es donde entra la gesti\u00f3n, donde se puede crear, editar, a\u00f1adir y eliminar contenido, incluso cambiar las configuraciones de apariencia. En cambio, el frontend se encarga de mostrar el contenido al usuario.<\/p>\n

Headless WordPress es el t\u00e9rmino utilizado para describir el WordPress desacoplado. La parte del backend (gesti\u00f3n) est\u00e1 separada de la parte del frontend del CMS WordPress<\/a>. Puedes desarrollar y gestionar el frontend como una aplicaci\u00f3n independiente con cualquier framework de frontend de tu elecci\u00f3n.<\/p>\n\n

Ventajas y Desventajas de Headless WordPress<\/h2>\n

A continuaci\u00f3n, exploraremos los pros y los contras de\u00a0headless<\/span>\u00a0<\/span>WordPress para que entiendas mejor el concepto.<\/span><\/p>\n

Los pros<\/h3>\n

En primer lugar, empezaremos explorando los pros.<\/p>\n

Rendimiento Superr\u00e1pido<\/h4>\n

En esta era de aplicaciones de rendimiento superr\u00e1pido, tu sitio web no deber\u00eda tardar m\u00e1s de unos segundos en cargarse<\/a> y evitar la p\u00e9rdida de visitantes. Dado que el frontend est\u00e1 separado de WordPress y puede desarrollarse teniendo en cuenta el alto rendimiento y la escalabilidad utilizando herramientas modernas de frontend, emplear un enfoque de headless WordPress es de gran beneficio para la experiencia general del usuario de tu sitio web.<\/p>\n

Control Granular<\/h4>\n

Optar por la arquitectura headless te da m\u00e1s control sobre la disposici\u00f3n del dise\u00f1o, la presentaci\u00f3n del contenido y la forma en que los usuarios interact\u00faan con el frontend de tu aplicaci\u00f3n. Tambi\u00e9n permite que el contenido del backend est\u00e9 protegido y se pueda acceder a \u00e9l desde una ubicaci\u00f3n central.<\/p>\n

Mayor Escalabilidad<\/h4>\n

Escalar WordPress puede ser complicado a veces porque no se tiene un control completo de todos los componentes y c\u00f3digos que hacen funcionar a WordPress, sobre todo si no eres un desarrollador. Pero con el desacoplamiento de WordPress, es f\u00e1cil escalar cada parte de forma aislada, y puedes detectar f\u00e1cilmente qu\u00e9 parte necesita ser escalada.<\/p>\n

Seguridad m\u00e1s Estricta<\/h4>\n

No podemos enfatizar los beneficios de seguridad de headless WordPress lo suficiente, ya que WordPress desacoplado tiene beneficios de alta seguridad contra los hackers y los ataques DDoS<\/a>. El enfoque de headless WordPress hace que sea dif\u00edcil para los hackers acceder a tus datos sensibles de backend, ya que est\u00e1 separado de tu frontend, el sitio web de cara al usuario.<\/p>\n

Dise\u00f1o Ligero<\/h4>\n

Tendr\u00e1s m\u00e1s control sobre la estructura y el dise\u00f1o de tu frontend. Adem\u00e1s, podr\u00e1s trabajar en el frontend con m\u00e1s libertad y dise\u00f1o personalizado; gracias a las llamadas a la API REST, podr\u00e1s aprovechar las herramientas web modernas y desplegarlas en el frontend.<\/p>\n

Publicaci\u00f3n de Contenidos Multicanal<\/h4>\n

Dado que Headless WordPress utiliza un sistema basado en la API<\/a> para comunicar tu contenido al frontend, puedes mostrar tu contenido en cualquier lugar y en cualquier plataforma, incluyendo el escritorio, el sitio web, las aplicaciones m\u00f3viles y el quiosco de pantalla t\u00e1ctil. Tambi\u00e9n es posible hacer un uso completo de la Realidad Aumentada, la Realidad Virtual y los dispositivos del Internet de las Cosas para mostrar y presentar tu contenido procedente del sistema basado en la API.<\/p>\n

Los Contras<\/h3>\n

Exploraremos los contras de headless en mayor profundidad a medida que avancemos, pero sus principales inconvenientes son:<\/p>\n

    \n
  1. Separar el backend y el frontend supone una carga extra a la hora de gestionar diferentes instancias del sitio web.<\/li>\n
  2. Puede ser costoso de implementar, ya que necesita miembros adicionales en tu equipo y capital extra para ejecutar diferentes instancias.<\/li>\n
  3. Hacer que tu contenido est\u00e9 disponible en diferentes plataformas puede causar una experiencia inconsistente para tus usuarios si el contenido no se presenta de manera consistente en todas las plataformas.<\/li>\n<\/ol>\n

    Cuando un Headless WordPress Puede no ser la Mejor Opci\u00f3n<\/h2>\n

    Dado que el headless WordPress es una innovaci\u00f3n incre\u00edble con grandes beneficios, hay algunas cosas que debes tener en cuenta a la hora de decidir si debes optar por \u00e9l o no.<\/p>\n

      \n
    1. Headless WordPress es muy caro de mantener. Tendr\u00e1s que mantener dos instancias diferentes de un sitio web desde la infraestructura<\/a> hasta los m\u00faltiples desarrolladores.<\/li>\n
    2. Headless WordPress no soporta todas las funcionalidades de WordPress. Por ejemplo, grandes funcionalidades de WordPress como el editor WYSIWYG y la vista previa en vivo no funcionar\u00e1n cuando se utilice un frontend separado.<\/li>\n
    3. Es m\u00e1s caro montar un headless WordPress. Por lo tanto, siempre hay que tener en cuenta su mayor coste.<\/li>\n<\/ol>\n

      \u00bfQui\u00e9n Deber\u00eda Utilizar Headless WordPress?<\/h2>\n

      A continuaci\u00f3n se presentan los casos m\u00e1s adecuados que puede requerir headless WordPress:<\/p>\n

        \n
      1. Deber\u00edas utilizar headless WordPress si la seguridad de tu sitio web<\/a> es tu principal preocupaci\u00f3n y es primordial para tu empresa.<\/li>\n
      2. A continuaci\u00f3n, si tu sitio web no necesita actualizaciones peri\u00f3dicas, ser\u00e1 una buena se\u00f1al de que necesitas utilizar una configuraci\u00f3n headless.<\/li>\n
      3. A continuaci\u00f3n, si quieres tener un dise\u00f1o personalizado que un tema de WordPress no puede hacer f\u00e1cilmente, quieres condimentar el frontend de tu sitio web con un dise\u00f1o \u00fanico. Entonces, headless WordPress es tu siguiente opci\u00f3n.<\/li>\n
      4. Por \u00faltimo, si est\u00e1s construyendo un sitio web de vida corta o un sitio de demostraci\u00f3n para presentaciones y tutoriales, entonces puedes probar el enfoque headless.<\/li>\n<\/ol>\n

        Qui\u00e9n Deber\u00eda Evitar el Uso de Headless WordPress<\/h2>\n

        Aqu\u00ed hay varios casos en los que usar headless WordPress no es una buena opci\u00f3n:<\/p>\n

          \n
        1. Cuando tu sitio web depende \u00fanicamente de plugins y funcionalidades espec\u00edficas que controlan y funcionan mejor con el frontend de tu aplicaci\u00f3n, debes seguir con WordPress a menos que los plugins ofrezcan opciones basadas en la API para consumir los datos.<\/li>\n
        2. Supongamos que no est\u00e1s interesado en codificar tu sitio web, o que tu sitio web requiere un mantenimiento diario, y no est\u00e1s contratando a un profesional para el mantenimiento rutinario debido a tu bajo presupuesto. En ese caso, WordPress es una opci\u00f3n adecuada para ti.<\/li>\n
        3. Si no eres un desarrollador experimentado<\/a> y quieres crear y gestionar tu sitio web solo, deber\u00edas utilizar WordPress.<\/li>\n<\/ol>\n

          C\u00f3mo Hacer que WordPress sea Headless (Construir una Aplicaci\u00f3n)<\/h2>\n

          Esta secci\u00f3n explorar\u00e1 la construcci\u00f3n y el desarrollo de un blog de noticias con headless WordPress para el backend y Vue 3 como el frontend de cara al usuario.<\/p>\n

          Configuraci\u00f3n de Headless WordPress con Devkinsta<\/h3>\n

          Desarrollaremos el headless WordPress con DevKinsta<\/a>, un popular entorno de desarrollo local de WordPress para dise\u00f1ar, desarrollar e implementar sitios de WordPress desde la comodidad de tu m\u00e1quina local.<\/p>\n

          DevKinsta es gratuito para siempre y te ofrece grandes ventajas y comodidad a la hora de desarrollar y construir WordPress con \u00e9l.<\/p>\n

          Puedes descargar e instalar DevKinsta desde el sitio web oficial<\/a> y seguir las instrucciones de la documentaci\u00f3n para empezar.<\/p>\n

          Como ya tenemos DevKinsta instalado, lo abriremos y seguiremos el siguiente paso para configurar nuestro primer headless WordPress.<\/p>\n

          En el panel de control de DevKinsta, crea un nuevo sitio de WordPress utilizando Nginx<\/a>, MySQL<\/a> y cualquier versi\u00f3n de WordPress disponible. Adem\u00e1s, puedes importar una instancia de WordPress existente o crear una instancia de WordPress personalizada desde el panel de control.<\/p>\n

          A continuaci\u00f3n, dale un nombre a tu instancia de WordPress reci\u00e9n creada, un nombre de usuario y una contrase\u00f1a de administrador, luego haz clic en Crear <\/strong>y copia los detalles mientras DevKinsta crea una nueva instancia de WordPress en tu m\u00e1quina local.<\/p>\n

          Luego, haz clic en Abrir Sitio <\/strong>para abrir tu instancia de WordPress reci\u00e9n creada en tu navegador predeterminado.<\/p>\n

          Por \u00faltimo, puedes acceder al panel de control del administrador accediendo al enlace http:\/\/headless-wordpress-news-blog.local\/wp-admin<\/code> e introduciendo las credenciales de acceso al administrador que introdujiste al crear la nueva instancia.<\/p>\n

          Ten en cuenta que hemos configurado nuestro headless WordPress localmente con la URL http:\/\/headless-wordpress-news-blog.local<\/code> con el frontend estando alojado localmente en http:\/\/news-blog.local<\/code>, y lo utilizaremos a lo largo del tutorial.<\/p>\n

          Configurar Nuestro Headless WordPress<\/h3>\n

          A continuaci\u00f3n, despu\u00e9s de iniciar sesi\u00f3n con \u00e9xito en tu tablero de WordPress, puedes seguir adelante para instalar cualquier plugin<\/a> y la configuraci\u00f3n de tu elecci\u00f3n.<\/p>\n

          Desactivaremos el tema por completo para este tutorial y solo accederemos al contenido a trav\u00e9s del extremo basado en la API REST de WordPress instalando el plugin Simple Website Redirect y configur\u00e1ndolo.<\/p>\n

          Ve a Plugins > A\u00f1adir nuevo <\/strong>y busca el Simple Website Redirect<\/a>, inst\u00e1lalo y act\u00edvalo:<\/p>\n

          \"Instalaci\u00f3n
          Instalaci\u00f3n del plugin de WordPress.<\/figcaption><\/figure>\n

          A continuaci\u00f3n, haz clic en la Configuraci\u00f3n <\/strong>del plugin e introduce tu URL basada en el frontend (por ejemplo, http:\/\/news-blog.local<\/code>), haz clic en las opciones de configuraci\u00f3n avanzadas <\/strong>y a\u00f1ade las siguientes rutas – \/wp-admin<\/code>, \/wp-login.php<\/code>, y \/wp-json<\/code> – a la secci\u00f3n de Rutas Excluidas.<\/p>\n

          Por \u00faltimo, activa el plugin seleccionando Enabled <\/strong>en el desplegable Redirect Status<\/strong>:<\/p>\n

          \"Configuraci\u00f3n
          Configuraci\u00f3n del plugin Simple Website Redirect.<\/figcaption><\/figure>\n

          …y eso es todo.<\/p>\n

          Adem\u00e1s, si tu API JSON no est\u00e1 habilitada cuando visitas http:\/\/headless-wordpress-news-blog.local\/wp-json<\/code> por defecto, puedes habilitarla abriendo tus Permalinks <\/strong>en los Ajustes de WordPress <\/strong>y seleccionando Nombre de la Publicaci\u00f3n <\/strong>o cualquier otro de tu elecci\u00f3n excepto Plain<\/strong>:<\/p>\n

          \"Configuraci\u00f3n
          Configuraci\u00f3n del Permalink de WordPress.<\/figcaption><\/figure>\n

          Ahora, cuando visites tu http:\/\/headless-wordpress-news-blog.local\/wp-json<\/code>, deber\u00eda presentarte datos JSON como los siguientes:<\/p>\n

          {\n  \"name\": \"Headless WordPress News Blog\",\n  \"description\": \"Just another WordPress site\",\n  \"url\": \"http:\/\/headless-wordpress-news-blog.local\",\n  \"home\": \"http:\/\/headless-wordpress-news-blog.local\",\n  \"gmt_offset\": \"0\",\n  \"timezone_string\": \"\",\n  \"namespaces\": [\n    \"oembed\/1.0\",\n    \"wp\/v2\",\n    \"wp-site-health\/v1\"\n  ],\n  \"authentication\": [\n    \n  ],\n  \"routes\": {\n    \"\/\": {\n      \"namespace\": \"\",\n      \"methods\": [\n        \"GET\"\n      ],\n      \"endpoints\": [\n        {\n          \"methods\": [\n            \"GET\"\n          ],\n          \"args\": {\n            \"context\": {\n              \"default\": \"view\",\n              \"required\": false\n            }\n          }\n        }\n      ],\n...<\/code><\/pre>\n
          Configuraci\u00f3n de Vue.js (Frontend)<\/h3>\n
          Utilizaremos la herramienta de desarrollo web Vite para crear nuestra aplicaci\u00f3n Vue 3 para conectar con headless WordPress. Puedes leer m\u00e1s sobre Vue 3<\/a> y las herramientas de desarrollo Vite<\/a>.<\/p>\n
          En este art\u00edculo, vamos a construir un blog de noticias<\/a>. Toda la gesti\u00f3n de contenidos backend del proyecto se desarrollar\u00e1 y alojar\u00e1 con nuestro headless WordPress usando Devkinsta.<\/p>\n
          Escribe junto a estos simples comandos:<\/p>\n
          npm init @vitejs\/app news-blog\ncd news-blog\nnpm install\nnpm run dev<\/code><\/pre>\n
          Si tienes problemas con los espacios en el nombre de usuario, intenta usar:<\/p>\n
          npx create-vite-app news-blog<\/code><\/pre>\n
          Ten en cuenta que hemos configurado nuestra aplicaci\u00f3n Vue 3 para que responda a\u00a0http:\/\/news-blog.local<\/code>, pero puedes seguir con la opci\u00f3n por defecto http:\/\/localhost:3000<\/code>.<\/p>\n
          Por \u00faltimo, abre tu c\u00f3digo base de Vue 3 con cualquier editor de c\u00f3digo de tu elecci\u00f3n. Vamos a ir con VSCode<\/a>, y vamos a ensuciarnos las manos con los c\u00f3digos.<\/p>\n
          Consumir la API de WordPress<\/h3>\n
          Nos hemos adelantado a desarrollar la parte restante de la aplicaci\u00f3n Vue para ahorrarte tiempo de lectura, pero puedes adelantarte a clonar el repositorio<\/a> desde mi GitHub.<\/p>\n
          Componente de la Aplicaci\u00f3n de Visualizaci\u00f3n<\/h4>\n
          El siguiente fragmento de c\u00f3digo muestra c\u00f3mo implementamos la API REST de WordPress con nuestra instancia de Vue para mostrar todas las publicaciones del headless WordPress:<\/p>\n
          <template>\n  <section>\n    <div class=\"padding-top\">\n      <div class=\"container inner-padding-top\">\n        <div class=\"row\">\n          <div class=\"col-md-12 col-sm-12-col-xs-12 text-center\">\n            <h2 class=\"lead-title text-uppercase\">\n              Latest Backend Dev. Articles\n            <\/h2>\n            <h3 class=\"article-subtitle\">\n              Latest Backend Dev. Articles curated daily by the community.\n            <\/h3>\n          <\/div>\n        <\/div>\n        <div class=\"row mb-1 mt-5\">\n          <post v-for=\"(post, i) in posts\" :key=\"i\" :post=\"post\" \/>\n        <\/div>\n      <\/div>\n    <\/div>\n    <div class=\"col-md-12 col-sm-12-col-xs-12 text-center mb-5\">\n      <Button link=\"\/posts\" class=\"col p-3\">More Articles<\/Button>\n    <\/div>\n  <\/section>\n<\/template>\n\n<script>\nimport { mapState } from 'vuex'\nexport default {\n  computed: {\n    ...mapState({\n      posts: (state) => {\n        return [...state.post.posts].slice(0, 22)\n      },\n    }),\n  },\n}\n<\/script><\/code><\/pre>\n
          Visualizar el Componente de un Solo Post<\/h4>\n
          El fragmento de c\u00f3digo muestra c\u00f3mo recuperamos un solo post con la API REST de WordPress con el headless WordPress y lo mostramos en nuestra instancia de Vue:<\/p>\n
          <template>\n  <div class=\"card single\">\n    <div class=\"card-head pl-3 pr-3 pt-3\">\n      <h1 class=\"title\">{{ post.title || '' }}<\/h1>\n      <div class=\"d-flex\">\n        <div class=\"author d-flex pr-3 pb-4\">\n          <div class=\"profile mr-2\"><\/div>\n          <a :href=\"'\/authors\/' + post.author.slug\" class=\"subtitle is-6\">\n            {{ post.author.name }}\n          <\/a>\n        <\/div>\n\n        <div class=\"date_created\">\n          <small class=\"text-muted\">\n            <li class=\"fa fa-calendar\"><\/li>\n            <time\n              :datetime=\"$moment(post.date).format('MMMM Do YYYY, h:mm:ss a')\"\n              >{{ $moment(post.date).format('MMMM Do YYYY') }}<\/time\n            >\n          <\/small>\n        <\/div>\n      <\/div>\n    <\/div>\n    <div class=\"block-image pl-3 pr-3 pt-2 mb-3\">\n      <img\n        v-lazy-load\n        :data-src=\"image\"\n        class=\"card-img-top img-fluid\"\n        :alt=\"post.title\"\n      \/>\n    <\/div>\n\n    <div class=\"tags absolute\">\n      <a\n        v-for=\"category in post.categories\"\n        :key=\"category.id\"\n        :href=\"'\/categories\/' + category.slug\"\n        class=\"btn-tag\"\n      >\n        {{ category.title }}\n      <\/a>\n    <\/div>\n  <\/div>\n<\/template>\n\n<script>\nimport Vue from 'vue'\n\nexport default {\n  name: 'SinglePost',\n  props: {\n    post: {\n      type: [Object, Array],\n      default: () => {},\n    },\n  },\n}\n<\/script><\/code><\/pre>\n
          A continuaci\u00f3n se muestra la tienda que hace las llamadas a la API de headless WordPress para los contenidos del backend:<\/p>\n
          export const actions = {\n  async getPosts({ commit }, { page, count = 22 }) {\n    try {\n      const response = await fetch(\n        `http:\/\/headless-wordpress-news-blog.local\/wp-json\/wp\/v2\/posts`\n      )\n      const data = await response.json()\n      if (data) {\n        commit('setPosts', data)\n      }\n      return data\n    }\n  },\n  \n async getPost({ commit }, id) {\n    try {\n      const response = await fetch(\n        `http:\/\/headless-wordpress-news-blog.local\/wp-json\/wp\/v2\/posts\/${id}`\n      )\n      const data = await response.json()\n      if (data) {\n        commit('setPost', data)\n      }\n      return data\n    }\n  },\n }<\/code><\/pre>\n
          Implementaci\u00f3n de Headless WordPress con Kinsta<\/h3>\n
          Por \u00faltimo, la implementaci\u00f3n de tu headless WordPress es muy f\u00e1cil con DevKinsta utilizando el servicio de alojamiento Kinsta.<\/p>\n
          Para desplegar tu WordPress sin cabecera en Kinsta, haz clic en el bot\u00f3n Enviar a Staging<\/strong> de tu panel de control de DevKinsta e inicia sesi\u00f3n en Kinsta con tus credenciales de acceso.<\/p>\n
          Puedes aprender a empujar los cambios al entorno de ensayo<\/a> para implementar tu headless WordPress en los servicios de alojamiento de Kinsta en un solo clic.<\/p>\n
          Por \u00faltimo, puedes implementar tu instancia de Vue.js en cualquier proveedor de alojamiento en la nube de tu elecci\u00f3n. Aseg\u00farate de actualizar tu extremo de headless WordPress en la forma correspondiente para probar tu aplicaci\u00f3n en un entorno de producci\u00f3n en vivo.<\/p>\n\n
          Resumen<\/h2>\n
          Headless WordPress y los beneficios que conlleva est\u00e1n aqu\u00ed para quedarse por un tiempo. Su popularidad seguir\u00e1 creciendo a medida que m\u00e1s desarrolladores y propietarios de sitios web comprendan las ventajas de una opci\u00f3n headless.<\/p>\n
          En esta gu\u00eda, te hemos presentado los beneficios, los pros y los contras de headless WordPress, y te hemos mostrado c\u00f3mo construir e implementar tu primer headless WordPress con DevKinsta. Ahora est\u00e1s en camino de tener tu implementaci\u00f3n de headless WordPress.<\/p>\n
          \u00bfCu\u00e1les son tus consejos para desplegar un sitio de headless WordPress? Comp\u00e1rtelos en la secci\u00f3n de comentarios.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
          WordPress ha sido el sistema de gesti\u00f3n de contenidos preferido por los desarrolladores y los no desarrolladores para construir y crear r\u00e1pidamente sitios web impresionantes. El …<\/p>\n","protected":false},"author":193,"featured_media":44339,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[652,403],"topic":[1290,1333],"class_list":["post-44319","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-headless","tag-web-development","topic-headless-cms","topic-vue-js"],"yoast_head":"\nAprende a Crear un Sitio Headless WordPress con Vue.js<\/title>\n<meta name=\"description\" content=\"\u00bfTe has preguntado qu\u00e9 es toda la ch\u00e1chara sobre el Headless WordPress? Explora lo que es y aprende a utilizarlo para crear una aplicaci\u00f3n.\" \/>\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\/headless-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Aprende a Crear un Sitio Headless WordPress con Vue.js\" \/>\n<meta property=\"og:description\" content=\"\u00bfTe has preguntado qu\u00e9 es toda la ch\u00e1chara sobre el Headless WordPress? Explora lo que es y aprende a utilizarlo para crear una aplicaci\u00f3n.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/headless-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=\"2021-10-08T08:42:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-16T18:36:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/10\/sitio-headless-wordpress.jpeg\" \/>\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=\"Solomon Eseme\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"\u00bfTe has preguntado qu\u00e9 es toda la ch\u00e1chara sobre el Headless WordPress? Explora lo que es y aprende a utilizarlo para crear una aplicaci\u00f3n.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/10\/sitio-headless-wordpress.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@kaperskyguru\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Solomon Eseme\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/headless-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/headless-wordpress\/\"},\"author\":{\"name\":\"Solomon Eseme\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2\"},\"headline\":\"Aprende a Crear un Sitio Headless WordPress con Vue.js\",\"datePublished\":\"2021-10-08T08:42:52+00:00\",\"dateModified\":\"2025-12-16T18:36:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/headless-wordpress\/\"},\"wordCount\":2319,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/headless-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/10\/sitio-headless-wordpress.jpeg\",\"keywords\":[\"headless\",\"web development\"],\"articleSection\":[\"Los mejores tutoriales de WordPress\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/headless-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/headless-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/headless-wordpress\/\",\"name\":\"Aprende a Crear un Sitio Headless WordPress con Vue.js\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/headless-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/headless-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/10\/sitio-headless-wordpress.jpeg\",\"datePublished\":\"2021-10-08T08:42:52+00:00\",\"dateModified\":\"2025-12-16T18:36:20+00:00\",\"description\":\"\u00bfTe has preguntado qu\u00e9 es toda la ch\u00e1chara sobre el Headless WordPress? Explora lo que es y aprende a utilizarlo para crear una aplicaci\u00f3n.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/headless-wordpress\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/headless-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/headless-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/10\/sitio-headless-wordpress.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/10\/sitio-headless-wordpress.jpeg\",\"width\":1460,\"height\":730,\"caption\":\"Aprenda a crear un sitio Headless WordPress con Vue.js\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/headless-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Headless CMS\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/headless-cms\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Aprende a Crear un Sitio Headless WordPress con Vue.js\"}]},{\"@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\/51c9c77fa35cf1ef9a46308358441ab2\",\"name\":\"Solomon Eseme\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1c701993f8ff8c8df2a4c5664834a4e5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1c701993f8ff8c8df2a4c5664834a4e5?s=96&d=mm&r=g\",\"caption\":\"Solomon Eseme\"},\"description\":\"I am a Software Engineer and Content Creator who is geared toward building high-performing and innovative products following best practices and industry standards. I also love writing about it at Masteringbackend.com. Follow me on Twitter, LinkedIn, and About Me\",\"sameAs\":[\"https:\/\/masteringbackend.com\",\"https:\/\/linkedin.com\/in\/solomoneseme\",\"https:\/\/x.com\/kaperskyguru\"],\"url\":\"https:\/\/kinsta.com\/es\/blog\/author\/solomoneseme\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Aprende a Crear un Sitio Headless WordPress con Vue.js","description":"\u00bfTe has preguntado qu\u00e9 es toda la ch\u00e1chara sobre el Headless WordPress? Explora lo que es y aprende a utilizarlo para crear una aplicaci\u00f3n.","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\/headless-wordpress\/","og_locale":"es_ES","og_type":"article","og_title":"Aprende a Crear un Sitio Headless WordPress con Vue.js","og_description":"\u00bfTe has preguntado qu\u00e9 es toda la ch\u00e1chara sobre el Headless WordPress? Explora lo que es y aprende a utilizarlo para crear una aplicaci\u00f3n.","og_url":"https:\/\/kinsta.com\/es\/blog\/headless-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2021-10-08T08:42:52+00:00","article_modified_time":"2025-12-16T18:36:20+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/10\/sitio-headless-wordpress.jpeg","type":"image\/jpeg"}],"author":"Solomon Eseme","twitter_card":"summary_large_image","twitter_description":"\u00bfTe has preguntado qu\u00e9 es toda la ch\u00e1chara sobre el Headless WordPress? Explora lo que es y aprende a utilizarlo para crear una aplicaci\u00f3n.","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/10\/sitio-headless-wordpress.jpeg","twitter_creator":"@kaperskyguru","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Solomon Eseme","Tiempo de lectura":"12 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/headless-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/headless-wordpress\/"},"author":{"name":"Solomon Eseme","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2"},"headline":"Aprende a Crear un Sitio Headless WordPress con Vue.js","datePublished":"2021-10-08T08:42:52+00:00","dateModified":"2025-12-16T18:36:20+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/headless-wordpress\/"},"wordCount":2319,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/headless-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/10\/sitio-headless-wordpress.jpeg","keywords":["headless","web development"],"articleSection":["Los mejores tutoriales de WordPress"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/es\/blog\/headless-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/headless-wordpress\/","url":"https:\/\/kinsta.com\/es\/blog\/headless-wordpress\/","name":"Aprende a Crear un Sitio Headless WordPress con Vue.js","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/headless-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/headless-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/10\/sitio-headless-wordpress.jpeg","datePublished":"2021-10-08T08:42:52+00:00","dateModified":"2025-12-16T18:36:20+00:00","description":"\u00bfTe has preguntado qu\u00e9 es toda la ch\u00e1chara sobre el Headless WordPress? Explora lo que es y aprende a utilizarlo para crear una aplicaci\u00f3n.","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/headless-wordpress\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/headless-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/headless-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/10\/sitio-headless-wordpress.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2021\/10\/sitio-headless-wordpress.jpeg","width":1460,"height":730,"caption":"Aprenda a crear un sitio Headless WordPress con Vue.js"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/headless-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Headless CMS","item":"https:\/\/kinsta.com\/es\/secciones\/headless-cms\/"},{"@type":"ListItem","position":3,"name":"Aprende a Crear un Sitio Headless WordPress con Vue.js"}]},{"@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\/51c9c77fa35cf1ef9a46308358441ab2","name":"Solomon Eseme","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1c701993f8ff8c8df2a4c5664834a4e5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1c701993f8ff8c8df2a4c5664834a4e5?s=96&d=mm&r=g","caption":"Solomon Eseme"},"description":"I am a Software Engineer and Content Creator who is geared toward building high-performing and innovative products following best practices and industry standards. I also love writing about it at Masteringbackend.com. Follow me on Twitter, LinkedIn, and About Me","sameAs":["https:\/\/masteringbackend.com","https:\/\/linkedin.com\/in\/solomoneseme","https:\/\/x.com\/kaperskyguru"],"url":"https:\/\/kinsta.com\/es\/blog\/author\/solomoneseme\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/44319","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\/193"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=44319"}],"version-history":[{"count":15,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/44319\/revisions"}],"predecessor-version":[{"id":81417,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/44319\/revisions\/81417"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/44319\/translations\/en"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/44319\/translations\/fr"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/44319\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/44319\/translations\/pt"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/44319\/translations\/es"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/44319\/translations\/de"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/44319\/translations\/nl"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/44319\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/44339"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=44319"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=44319"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=44319"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}