Respaldado por Awesome Motive.
Más información en nuestro Blog de los Halcones Marinos.

Cómo configurar Headless WordPress en 2024

headless-wordpress

Utilizando una solución de WordPress sin cabecera, puede mantener el front y el back end de su sitio web completamente diferenciados. Este método le permite producir copias estáticas de su sitio web, lo que reduce significativamente los tiempos de carga cuando se accede al sitio web.

Más adelante hablaremos de cómo configurar y construir WordPress sin cabeza y cómo funciona. Después de eso, te guiaremos a través de la creación de una configuración básica que se aprovecha de Amazon Web Services para almacenar copias estáticas de su sitio web y el uso de marcos para configurar WordPress sin cabeza.

¿Qué significa exactamente "WordPress sin cabeza"?

wordpress tradicional vs headless
wordpress tradicional vs headless

Cuando modifique su sitio utilizando el panel de control administrativo, también conocido como back end, verá los efectos equivalentes en el front end (es decir, las páginas en vivo a las que tienen acceso los visitantes). WordPress es responsable tanto del back end como del front end de su sitio web cuando se utiliza esta estrategia convencional.

Cuando hablamos de WordPress sin cabeza, nos referimos a una configuración en la que no está utilizando WordPress para producir el front-end de su sitio web. Es la configuración a la que nos referimos cuando hablamos de WordPress sin cabeza. En su lugar, WordPress es sólo responsable de la parte trasera del sitio web. Puedes crear un sitio web estático para el front-end, utilizar cualquier otra plataforma que se vincule con WordPress a través de su API, o utilizar WordPress.

¿Cómo se configura un sitio web de WordPress sin cabeza?

Vamos a compartir dos métodos para configurar un sitio de WordPress sin cabeza. Vamos a echar un vistazo:

Método 1: Construir un WordPress sin hedonismo utilizando AWS y plugins

En principio, puedes alojar una versión de sitio web estático con el proveedor que quieras. Sin embargo, para esta demostración, utilizaremos AWS ya que es compatible con el plugin que vamos a destacar. Los primeros pasos se describen a continuación para usted.

Paso 1. Crear una cuenta en AWS

AWS S3

En primer lugar, tendrás que crear una cuenta en AWS.

Comenzar con AWS implica un poco más de trabajo que un servidor web convencional. Por otro lado, el uso de esta plataforma puede suponer un coste escaso para los sitios web estáticos. Puede suponer algo más de medio dólar al mes.

Deberías elegir la capa de Amazon S3, que proporciona alojamiento gratuito durante 12 meses, para configurar una instalación de WordPress sin cabeza:

El sitio web del servicio S3 de Amazon.

No debería ser demasiado difícil para usted configurar su cuenta; todo lo que tiene que hacer es hacer clic en el botón "Get started with Amazon S3" y proporcionar la información necesaria en las áreas proporcionadas en el formulario de registro.

Tenga en cuenta que el botón dirá "Complete Sign Up" en lugar del estándar "Sign Up" cuando ya haya iniciado sesión en una cuenta de Amazon. El procedimiento será el mismo; sin embargo, no se le pedirá que vuelva a introducir su dirección de correo electrónico y sus credenciales de acceso en ningún momento.

Paso 2: Produzca una réplica de su sitio web en formato estático.

Todavía tendrá que instalar WordPress en algún lugar para que esta configuración funcione correctamente. Esto le permitirá utilizar WordPress como el back-end de su sitio web y crear contenido estático para el front-end. Una instalación local de WordPress es una alternativa que puede utilizarse para evitar la necesidad de pagar por los servicios de dos proveedores de alojamiento distintos.

Un sitio web local de WordPress puede configurarse de diferentes maneras, entre las que se incluyen las siguientes:

  • Desarrollar una configuración completa de WordPress en el ordenador de casa con la ayuda de un programa como XAMPP
  • La instalación de versiones localizadas de WordPress puede realizarse con la ayuda de herramientas como Local by Flywheel.
  • En este caso concreto, Local by Flywheel ofrece una técnica más fácil de usar. En primer lugar, descargue e instale el programa y cree un nuevo sitio web en su máquina local.

A continuación, modifica y personaliza tu sitio web de la forma que consideres oportuna. Asegúrate de que la configuración está actualizada, decide un tema y empieza a escribir tus páginas y artículos. Una vez que haya llegado a un punto en el que esté satisfecho con él, podrá hacer una copia estática que podrá utilizar para la parte delantera de su sitio web.

Puedes hacer lo mismo utilizando cualquiera de los diferentes plugins. WP2Static, por otro lado, es compatible con varias plataformas, incluyendo pero no limitado a AWS, Netlify, GitHub Pages, y muchos más.

Cuando el plugin esté completo, podrás acceder a su configuración haciendo clic en la pestaña WP2Static que se encuentra en tu panel de control. Se abre justo hasta la pestaña "Desplegar sitio web estático", que es precisamente donde quieres estar:

En esta área, rellene la casilla URL de destino con la URL que los usuarios proporcionarán para acceder a su sitio web (su configuración de Amazon S3 lo determinará). A continuación, seleccione Amazon S3 en el menú que aparece en la parte superior de la pantalla:

Para desplegar su sitio web, primero tendrá que crear algunos parámetros y luego vincular AWS a su sitio web. Esto lo harás en la siguiente fase del proceso.

Paso 3: Publicar automáticamente páginas estáticas en Amazon Web Services

Configuración del sitio estático de AWS

Cuando elija la opción de Amazon S3, tendrá a su disposición muchos más campos, incluyendo los siguientes:

Antes de iniciar el proceso de despliegue, debe introducir su ID de clave de acceso y su clave de acceso secreta. Recuerda que el ID de la clave de acceso que utilices debe tener los niveles de permiso apropiados para que el despliegue sea exitoso. El siguiente es un breve tutorial que le guiará a través del proceso de extracción de ambas claves de su cuenta de AWS.

Método 2: Construir WordPress sin cabeza usando Frameworks

Ha llegado el momento de buscar los mejores frameworks si quieres montar un WordPress sin cabeza. Aquí están los 3 mejores frameworks que puede utilizar para configurar su sitio de WordPress sin cabeza:

1. Reaccione

React wp headless framework

React, uno de los frameworks más populares, es una librería de Javascript gratuita y de código abierto para el front-end que permite a los desarrolladores crear interfaces de usuario muy potentes. Algunas de sus características son la Extensión de Sintaxis de Javascript (JSX), el enlace de datos unidireccional, el DOM virtual, el uso de componentes y los métodos de ciclo de vida

2. Fausto.js

Faust.js wordpress headless framework

Faust.js es el framework de WordPress sin cabeza que proporciona un conjunto de herramientas tanto para desarrolladores como para editores para ayudarles a empezar a construir aplicaciones frontales con WordPress como CMS sin cabeza. Este framework se compone de plugins de WordPress y un conjunto de paquetes npm, y soporta Server Side Rendering y Static Generation.

3. Gatsby

Gatsby wordpress headless framework

Gatsby es un generador de sitios estáticos de código abierto. Gatsby está construido sobre Node.js utilizando React y GraphQL. Puede ofrecer tiempos de carga extremadamente rápidos mediante la generación de archivos HTML, CSS y Javascript estáticos. El marco da una inmensa importancia al SEO, asegurando que pasa la evaluación de Google Core Web Vitals. 

También puede utilizar estos populares frameworks para construir WordPress sin cabeza:

4. Siguiente.js

5. Ember

6. Frontity

7. Angular

8. jQuery

9. Vue.js

Opción 3: ¡Acepte la ayuda de un profesional para configurar Headless WordPress!

Algunos sitios web no pueden beneficiarse de una estrategia de WordPress sin cabeza. Por otro lado, cambiar a un front-end estático puede ayudar a mejorar la velocidad y la seguridad del sitio si su sitio web no depende sustancialmente de componentes dinámicos. Además, es probable que los costes de alojamiento sean menores.

¿Desea configurar WordPress sin cabeza pero no conoce el proceso de configuración? Crear tu primer proyecto de WordPress sin cabeza puede ser una tarea ardua. No se preocupe. Seahawk Media puede crear una configuración headless flexible y multiplataforma para usted con el equipo y las herramientas adecuadas. Si tiene alguna duda sobre cómo empezar con WordPress sin cabeza o cualquiera de las herramientas mencionadas anteriormente, solicite ayuda profesional a nuestros expertos en WordPress. Nuestro equipo de expertos está siempre a su disposición para ayudarle.

Espero que te haya gustado esta guía sobre la configuración de un WordPress sin cabeza.

Entradas relacionadas

Marketing Automation Tools for WordPress

Are you a WordPress marketer drowning in tedious tasks? Marketing automation tools for WordPress could

One-Page WordPress Website Builders

When you think about website design and website development, there are multiple ways to go

edge-caching-in-wordpress
Edge Caching in WordPress

Is your WordPress website suffering from sluggish loading times, frustrating visitors, and impacting your SEO

Komal Bothra April 30, 2024

20+ Fastest WordPress Themes in 2024 (With PageSpeed Scores)

Nowadays, ensuring your website loads quickly is more important than ever. Not only does a

WordPress
Komal Bothra 29 de abril de 2024

¿Se atasca Elementor en la pantalla de carga? Aquí tienes más de 25 métodos para solucionarlo.

Elementor simplifica el proceso de desarrollo de páginas web en WordPress. Sin embargo, puede que de vez en cuando te encuentres con

WordPress
Komal Bothra 29 de abril de 2024

Wix Vs WordPress - ¿Cuál es la mejor plataforma en 2024?

Establecer una sólida presencia en Internet es vital tanto para las empresas como para las iniciativas personales. Antes de crear

Compara

Empieza con Seahawk

Regístrate en nuestra app para ver nuestros precios y obtener descuentos.