Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

¿Qué es Headless WordPress y debería utilizarlo? (Ventajas e inconvenientes)

Nota editorial: Ganamos una comisión de los enlaces de socios en WPBeginner. Las comisiones no afectan a las opiniones o evaluaciones de nuestros editores. Más información sobre Proceso editorial.

A menudo los usuarios nos preguntan acerca de qué es WordPress sin cabeza y si deberían utilizarlo.

Headless WordPress separa el área de administración del back-end de WordPress del front-end que ven los visitantes. Esto permite a los desarrolladores utilizar diferentes tecnologías para la parte de front-end de un sitio web, manteniendo la estabilidad y seguridad de WordPress.

En este artículo, explicaremos qué es WordPress headless y si deberías usarlo. También hablaremos acerca de los pros y los contras de un sitio web WordPress headless.

Headless WordPress pros and cons

He aquí un breve resumen de los debates que trataremos en esta guía:

¿Qué es Headless WordPress?

Headless WordPress es un término para cualquier sitio web que utiliza WordPress como software de back-end para gestionar datos y contenidos, pero utiliza tecnologías independientes para mostrar los datos en el front-end.

El back-end es el área de administración de un sitio web. Aquí es donde se crean contenidos como entradas y páginas, se instalan plugins, se gestionan los comentarios, etc.

WordPress admin area

El front-end es la zona visible al público de su sitio web.

Esto es lo que los usuarios ven cuando visitan su sitio sus navegadores / exploradores.

Front-end example

Normalmente, WordPress se encarga de ambos componentes en un software robusto. Usted puede simplemente utilizar cualquier tema de WordPress para mostrar su sitio web.

Sin embargo, algunos desarrolladores y propietarios de sitios web pueden tener requisitos diferentes en los que pueden necesitar utilizar otras tecnologías como React.js, Angular.js, Faust.js, y otros para crear un front-end personalizado para su sitio web.

Headless WordPress les permite utilizar esas tecnologías sin dejar de usar WordPress en el backend para gestionar el contenido con mayor facilidad.

¿Cómo funciona Headless WordPress?

WordPress cuenta con un área de administrador fácil de usar, donde puedes crear contenidos y gestionar tu sitio web. También incluye un motor de plantillas para mostrar el front-end de su sitio mediante temas.

Para más detalles, consulte nuestro artículo sobre cómo funciona WordPress entre bastidores.

WordPress también envía una API llamada WordPress REST API.

Esta API proporciona una interfaz de programación para que los desarrolladores accedan a los datos de sitios web de WordPress en formato JSON.

Al crear un sitio web headless de WordPress, los desarrolladores utilizan la API REST para obtener datos de WordPress. Después, pueden utilizarla en sus aplicaciones u otras tecnologías front-end como React.js, Angular.js, Faust.js, etc. para crear un sitio web personalizado.

¿Cuáles son las ventajas de utilizar Headless WordPress?

Headless WordPress puede ser beneficioso en algunos escenarios específicos. Hablaremos de algunas de las ventajas de usar WordPress sin cabeza en ellos.

1. Headless WordPress puede ser más rápido que un sitio web WordPress normal.

Muchos desarrolladores creen que con Headless WordPress se puede crear un sitio web WordPress mucho más rápido.

Al separar la parte frontal del sitio utilizando tecnología como React.js, muchos desarrolladores intentan ofrecer un código más eficiente que la mayoría de los temas de WordPress.

Sin embargo, según nuestra experiencia, las técnicas de optimización del rendimiento de WordPress más sencillas funcionan igual de bien que WordPress headless para la mayoría de los sitios web y casos de uso de pequeñas empresas.

2. Integrar los datos de Headless WordPress en otras aplicaciones

Digamos que tienes una aplicación móvil y ahora quieres integrar tu blog u otra sección de tu sitio web WordPress en esa aplicación.

Headless WordPress puede ayudarte a integrar tus datos de WordPress en otras aplicaciones, y puedes utilizar diferentes tecnologías para crear una experiencia de usuario sin fisuras.

Del mismo modo, si tienes un sitio web estático, y necesitas una sección dinámica solo para una sección específica como un blog, reseñas / valoración, o tienda online. Entonces headless WordPress puede integrar los datos de WordPress en su sitio web estático.

3. Publicar en múltiples plataformas a través de Headless WordPress

Headless WordPress hace que tus datos de WordPress sean portátiles, para que puedas llevártelos a cualquier parte.

Puede utilizar los datos en sus campañas de marketing, entradas en plataformas de medios sociales, utilizarlos en dispositivos IoT como altavoces inteligentes, feed una herramienta de inteligencia artificial, conectarse a asistentes virtuales, etc.

4. Headless WordPress es mucho más asequible que los CMS headless propietarios

Headless WordPress es mucho más asequible y potente que las soluciones propietarias de “CMS empresariales” como Contentful, que fácilmente le costarán decenas de miles sólo en alojamiento (sin incluir los costes de desarrollo).

¿Cuáles son las desventajas de un sitio web WordPress sin cabecera?

Crear un sitio web WordPress sin cabecera también puede poner su sitio web en ciertas desventajas. Echemos un vistazo a algunas de ellas.

1. Headless WordPress es más caro en comparación con los sitios de WordPress tradicionales

Tendrá que contratar a un desarrollador para que personalice la interfaz de su sitio web. Esto puede costar decenas de miles de dólares.

Si usted es un desarrollador, entonces usted va a gastar un tiempo valioso haciendo un front-end personalizado.

Incluso si usted está utilizando un marco de desarrollo front-end, tomaría más tiempo y esfuerzo que el uso de un tema de WordPress ya hecho con el almacenamiento en caché adecuado a nivel de servidor / DNS.

2. Algunos plugins de WordPress pueden no funcionar

Los plugins son como aplicaciones para su sitio web WordPress, y le permiten añadir nuevas características a su sitio y ampliar su funcionalidad.

Un sitio web WordPress sin cabecera puede no ser capaz de tomar ventaja de algunos de los plugins de WordPress.

Por ejemplo, es posible que no se pueda acceder a algunos datos de los plugins de WordPress mediante la API REST, o que las características de los plugins requieran un tema de WordPress para funcionar correctamente.

Dicho esto, plugins populares de WordPress como AIOSEO tienen una extensión REST API que le permite crear sitios WordPress sin encabezado SEO amigables.

3. Dolores de cabeza por mantenimiento

Básicamente, utilizará plataformas distintas para la parte delantera y trasera de su sitio, y tendrá que mantenerlas por separado.

De vez en cuando, las cosas pueden fallar en ambos lados. Tendrás que confiar en los desarrolladores para solucionar estos problemas. O dedicará su valioso tiempo a corregirlos.

La complejidad adicional dificultará el crecimiento de su empresa.

¿Debería utilizar un sitio web WordPress sin cabecera?

En nuestra opinión, la mayoría de los usuarios de WordPress no necesitan utilizar un sitio web headless WordPress u otros tipos de framework headless.

Es caro, innecesariamente complicado y no es adecuado para la gran mayoría de propietarios de sitios web, blogueros, pequeñas empresas o tiendas en línea.

Por ejemplo, si su principal preocupación es la velocidad y el rendimiento, entonces su sitio web de WordPress existente puede superar fácilmente a cualquier sitio web de WordPress sin cabecera.

Todos los mejores plugins de caché para WordPress vienen con características de caché de página, precarga de caché, caché de objetos y compresión gzip.

Activar estas características puede aumentar significativamente la velocidad de su sitio web sin necesidad de contratar a ningún desarrollador.

Combínelo con una potente CDN y un cortafuegos de aplicaciones web como Cloudflare o Sucuri, y su sitio web será aún más rápido.

Vea el caso práctico de cómo hicimos que WPBeginner cargara más rápido que los sitios web sin cabecera.

En cuanto a las integraciones, hay más de 59.000 plugins de WordPress que ofrecen integraciones con casi todas las plataformas de terceros disponibles.

Incluso hay herramientas como Uncanny Automator que permiten integraciones con sitios web de WordPress y herramientas de terceros mediante Zapier.

Si necesita una integración que no está disponible a través de un plugin de WordPress existente, entonces tal vez debería contratar a un desarrollador para escribir un plugin personalizado.

Esto le costará mucho menos, e incluso puede ganar dinero en línea vendiéndolo como descarga digital a otros usuarios de WordPress.

¿Quién debería utilizar Headless WordPress?

Creemos que WordPress headless solo debería utilizarse en situaciones muy concretas.

En primer lugar, debe evaluar si existe una necesidad real de un CMS sin cabecera.

Por ejemplo, una empresa que ha creado un sitio web personalizado o una aplicación. Es posible que necesiten WordPress para gestionar el contenido con más facilidad y, en ese caso, tiene sentido utilizar WordPress sin cabecera.

En segundo lugar, usted debe tener el presupuesto para contratar y retener a los desarrolladores o tener el conjunto de habilidades necesarias para mantener un CMS sin cabeza.

Recuerde que un CMS WordPress headless se utiliza para crear una nueva aplicación personalizada, o una que utilice WordPress para facilitar la creación y gestión de contenidos.

Cosas importantes a tener en cuenta con Headless WordPress

Como propietario de un negocio no tecnológico, a veces es difícil saber si realmente necesita WordPress sin cabecera.

Algunos desarrolladores de WordPress y agencias tratarán de empujar sitios web sin cabeza en usted, y usted debe saber lo que te estás metiendo. Recuerda que sus incentivos son cobrarte más dinero.

Si la única razón por la que proponen headless WordPress es la velocidad o el SEO, entonces debe preguntarles qué han hecho ya para optimizar la velocidad de su sitio web, y qué impacto puede tener el cambio a headless WordPress. Si no obtiene una respuesta concreta, entonces debe buscar una segunda opinión.

Se sorprenderá de que para la gran mayoría de los sitios web, las mejoras son insignificantes, pero el coste de desarrollar y mantener sitios web WordPress sin cabecera son mucho más altos.

Hagas lo que hagas, definitivamente no dejes que nadie te convenza de cambiar de WordPress a algo como Contentful porque estarás muy decepcionado.

Hemos oído a numerosos propietarios de negocios cambiar solo para darse cuenta del error que habían cometido y volver a cambiar a WordPress.

Dicho esto, si está convencido al 100% de que necesita un sitio web WordPress sin cabecera, a continuación encontrará una guía rápida paso a paso.

¿Cómo crear un sitio web WordPress sin encabezado?

Hay muchas maneras de hacer un sitio web de WordPress sin cabeza en función de las herramientas que desea utilizar para el front-end.

Por el bien de esta guía práctica, le mostraremos cómo crear un sitio web WordPress sin cabecera usando solo las páginas estáticas generadas por WordPress. Esta NO es la forma más flexible de crear un sitio web de WordPress sin cabeza, pero es la forma más fácil para los principiantes.

En primer lugar, usted necesita hacer un sitio web de WordPress que desea utilizar como su CMS sin cabeza.

Tiene que ser un sitio web activo con su propio nombre de dominio y cuenta de alojamiento web.

Recomendamos utilizar SiteGround. Es una de las empresas de alojamiento de WordPress más rápidas y un proveedor de alojamiento de WordPress recomendado oficialmente.

Los servidores de SiteGround funcionan con Google Cloud y tienen muchas herramientas de optimización del rendimiento integradas.

Alternativamente, si puedes gastar un poco más, entonces echa un vistazo a WP Engine. Su plan Atlas está hecho para grandes sitios web de WordPress y está dirigido a desarrolladores.

Atlas incluye una cuenta gratuita de entorno de pruebas, contenido personalizado modular, planos preconfigurados para acelerar el flujo de trabajo y una mayor integración con el plugin WPGraphQL.

También puede crear un sitio web WordPress local en su propio ordenador.

Después, puedes empezar a trabajar en tu sitio web añadiendo entradas y páginas. También puede elegir un tema de WordPress para su sitio web y diseñar su sitio web.

Una vez que su sitio web esté listo, deberá instalar y activar el plugin Simply Static. Para más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Una vez activado, debe visitar la página de ajustes de Simply Static “ para configurar el plugin.

Simply Static general settings

Desde aquí, puede elegir la ruta URL que desea utilizar en sus archivos estáticos.

Por ejemplo, si conoce la URL o el nombre de dominio donde alojará sus archivos estáticos, puede indicar esa URL en el campo “URLs absolutas”.

Si no está seguro, puede utilizar la opción “URLs relativas”.

A continuación, vaya a la pestaña “Incluir/Excluir”. Desde aquí, puede añadir páginas adicionales que desee incluir o añadir páginas que desee excluir.

Exclude URLs

También puede utilizar expresiones regex para excluir URL que coincidan con un patrón específico.

No olvides hacer clic en el botón “Guardar cambios” para establecer los ajustes.

Ahora, está listo para generar archivos estáticos para su sitio web headless. Simplemente vaya a la página Simply Static ” Generar y haga clic en el botón ‘Generar archivos estáticos’.

Generate static files

El plugin empezará a rastrear su sitio web y a almacenar archivos estáticos en una carpeta temporal. Puede tardar un poco dependiendo del número de páginas que tenga su sitio web.

Una vez terminado, verá un aviso de correcto funcionamiento con un enlace para descargar los archivos a su ordenador en formato de archivo zip.

Download files to your computer

Después de descargar el archivo zip, tendrá que extraerlo.

Ya está listo para subir los archivos extraídos a su sitio web o al servidor en el que desee alojar su sitio web headless.

Sólo tienes que conectarte a tu sitio web mediante un cliente FTP o utilizar la aplicación de gestión de archivos del panel de control del alojamiento.

Una vez conectado, suba a su sitio web los archivos estáticos extraídos que descargó anteriormente.

Upload static files

Después, puede visitar su sitio web estático para verlo en acción.

Nota: Para actualizar su sitio web estático, tendrá que crear nuevo contenido en su instalación de WordPress y luego repetir todo el proceso de nuevo para reemplazar los archivos estáticos que se sirven a sus usuarios.

Es importante tener en cuenta que esta no es la forma más flexible de crear un sitio web estático en WordPress.

Si utilizas una solución de WordPress headless como WP Engine Atlas, dispondrás de mejores herramientas para desarrolladores, planos de sitios de inicio, guías prácticas, soluciones de despliegue de producción más inteligentes y mucho más.

Para sitios web más grandes y soluciones empresariales, recomendaríamos usar WP Engine Atlas junto con WPGraphQL para liberar toda la potencia del CMS WordPress sin cabeza.

Dicho esto, si eres propietario de una pequeña empresa y lees en algún sitio que necesitas un sitio WordPress sin encabezado para mejorar tu posicionamiento SEO, es un consejo equivocado. Puede obtener resultados similares simplemente mejorando el rendimiento de su sitio web siguiendo nuestra guía sobre cómo acelerar WordPress.

Esperamos que este artículo te haya ayudado a aprender qué es WordPress sin cabecera y si deberías usarlo para tu sitio web. Puede que también quieras ver nuestra guía sobre cómo crear un tema de WordPress personalizado sin código, o ver nuestra comparativa de los mejores servicios smtp para mejorar la entregabilidad del correo electrónico.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Descargo: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPBeginner , por qué es importante, y cómo puede apoyarnos. Aquí está nuestro proceso editorial .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

El último kit de herramientas de WordPress

Obtenga acceso GRATUITO a nuestro kit de herramientas - una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Reader Interactions

7 comentariosDeja una respuesta

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Kushal Phalak says

    As a designer and a frontend developer, it is very interesting to see these changes. It is awesome that I can use wordpress as a CMS and use NextJS on the fontend and the perks of increased performance and flexibility. It is a shame that some plugins are not supported currently, but I guess they will be in near future. Though it may not be suitable for those who do not understand code.

    • WPBeginner Support says

      It’s not a solution for everyone so there are no guarantees that every plugin will add support for this in the future.

      Administrador

  3. Jiří Vaněk says

    Thank you for the article. I had no idea that something like headless WordPress existed, and it didn’t even occur to me that the backend wouldn’t necessarily be connected to the frontend. Once again, I’ve learned something new. Awesome.

  4. James Winfield says

    Headless WordPress is an interesting solution if you are an engineer/developer and want to learn technologies like NextJS and GraphQL, which you can use to create fast loading React-style websites.

    Not sure there is much performance benefit (though Lighthouse loves the two sites I’ve made through NextJS’ headless template), though also you can then deploy via Vercel which is free, to a limit anyway. I am loving this technology, and is a great way for me to practice the most in-demand skills of a f/e engineer.

    Otherwise I agree with your comments, especially if non-developers are being bumped into this by agencies/developers!

Deja tu comentario

Gracias por elegir dejar un comentario. Tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestros política de comentarios, y su dirección de correo electrónico NO será publicada. Por favor, NO utilice palabras clave en el campo de nombre. Tengamos una conversación personal y significativa.