¿Qué es WordPress sin cabeza? ¿Cómo crear uno? [Tutorial]

¿Cuáles son los pros y los contras del CMS sin cabeza de WordPress?

WordPress sin cabeza tiene muchas ventajas y desventajas, cada una de las cuales puede afectar su trabajo en diferentes escenarios. Para tener una idea clara, comparemos sus pros y sus contras en el formato de tabla comparativa.

¿Es bueno WordPress sin cabeza?

Si ignora las limitaciones que mencionamos anteriormente, existen ciertos escenarios en los que usar WordPress sin cabeza podría resultar beneficioso para usted.

• Si la seguridad de su sitio web es una máxima prioridad y el manejo de datos es muy sensible o crítico.
• Si disfrutas del diseño personalizado y de posibilidades ilimitadas sin las limitaciones de las opciones limitadas de temas de WordPress, y buscas un diseño de interfaz único, entonces opta por WordPress sin cabeza.
• Si desea mantener su sitio web aislado con las frecuentes actualizaciones y mejoras de WordPress.
• Si desea preparar su sitio web o aplicación para el futuro y adaptarse a las nuevas tecnologías, tendencias y comportamientos de los usuarios sin tener que revisar toda su infraestructura, considere WordPress sin cabeza.
• Una configuración Headless puede ser una buena opción si buscas sitios web de demostración, proyectos pequeños o de corta duración o tutoriales.

¿Cómo funciona WordPress sin cabeza?

Si bien se trata de WordPress estándar, viene con una interfaz fácil de usar y un panel de administración fácil de usar a través del cual puede editar, crear y eliminar contenido fácilmente, así como administrar el sitio web.

Para la interfaz, proporciona miles de opciones de temas que combinan temas integrados y temas de terceros para crear un sitio web visualmente atractivo en la pantalla.

Pero cuando desacoplas WordPress, puedes disfrutar de lo mejor de ambos mundos. Para hacerlo posible, WordPress tiene una API llamada WordPress REST API.

Es una interfaz de programación que permite a los desarrolladores acceder e interactuar con los datos del sitio web de WordPress utilizando métodos HTTP estándar.

Permite a los desarrolladores recuperar, crear, actualizar y eliminar contenido de WordPress de forma remota, lo que facilita la integración de WordPress con otras plataformas de aplicaciones u otras tecnologías front-end como React.js, Angular.js, etc. para crear un sitio web personalizado.

¿Cómo hago que WordPress sea sin cabeza? (Tutorial de WordPress sin cabeza)

Puede haber varias formas de desacoplar el WordPress estándar, dependiendo de la tecnología que vaya a utilizar, los recursos, los idiomas preferidos y los marcos. Independientemente del método que se utilice, debe sentirse cómodo con los lenguajes de interfaz de usuario y con la API Rest de WordPress.

Pero por ahora, vamos a elegir el método más sencillo ya que la mayoría de las personas son principiantes. Consulte los pasos que se detallan a continuación:

Paso 1: configurar WordPress

Lo primero que debe hacer es crear un sitio web de WordPress como lo haría normalmente en su servidor. Significa que el sitio web debe estar activo, tener su dominio y una cuenta de alojamiento web adecuada.

Pero elegir la plataforma de alojamiento de WordPress adecuada es en sí misma una tarea muy difícil e incluso es un paso muy crucial al configurar WordPress y crear un CMS sin cabeza.

Es muy importante porque, aunque el front-end y el back-end están desacoplados, el back-end aún debe residir en un servidor que requiere alojamiento.

El servidor no solo proporciona un lugar para almacenar todo el contenido de su sitio web, sino que su rendimiento, seguridad y confiabilidad también son cruciales para entregar el contenido del sitio web sin problemas al front-end, sin importar qué tecnología utilice.

Por lo tanto, resulta esencial elegir un host que ofrezca un rendimiento Blazing Fast Server y una seguridad reforzada.

Teniendo esto en cuenta, puede elegir WPOven, una de las empresas de alojamiento de WordPress totalmente administradas más rápidas y líderes que brinda una combinación de velocidad, seguridad de nivel empresarial y soporte de conserjería, lo que garantiza que su viaje sin cabeza a WordPress sea más fluido.

• Específicamente, WPOven proporciona alojamiento administrado en el proveedor de nube de primer nivel Linode , lo que garantiza escalabilidad y rendimiento de alta velocidad.
• La plataforma ofrece instalación previa a WordPress, lo que hace que la configuración de WordPress y otras herramientas sea sencilla.
• Además, con el sistema de almacenamiento en caché avanzado integrado y la red de entrega de contenido (CDN) de Cloudflare, su contenido se entrega más rápido, independientemente de la ubicación del usuario.
• Además, WPOven garantiza una seguridad sólida a nivel empresarial a través de firewalls de protección web integrados e instalación de SSL, lo que ayuda a proteger sus datos e interacciones de backend.
• Las copias de seguridad automatizadas y las opciones de restauración sencillas brindan una capa adicional de protección de datos y tranquilidad.
• Además, la atención al cliente 24 horas al día, 7 días a la semana y la amplia base de conocimientos de WPOven garantizan que cualquier problema se resuelva rápidamente, lo que le permitirá concentrarse en crear y administrar su CMS headless sin problemas relacionados con el alojamiento.

Paso 2: habilite la API REST

Lo siguiente que debe hacer es asegurarse de que la API REST de WordPress esté habilitada. De forma predeterminada, está habilitado en todas las instalaciones nuevas de WordPress.

Pero aún así, debes verificar si está habilitado en tu sitio web o no. Puede hacer esto simplemente realizando una solicitud API ingresando la siguiente URL en su navegador,

https://example.com/wp-json/wp/v2/

Cambie 'example.com» con su nombre de dominio real y, si la API está habilitada, mostrará una respuesta JSON con información sobre las publicaciones de su sitio web.

Alternativamente, puede contar con la ayuda de un complemento como el complemento WP REST API.

Leer: La API REST de WordPress: Guía de introducción

Paso 3: obtener datos de publicación a través de API

Si desea recuperar datos de publicaciones, siga estos pasos:

• Abra su panel de WordPress > Configuración > Enlaces permanentes y seleccione Nombre de la publicación.

• Después de eso, debe descargar la herramienta de prueba Postman API.
• Ahora, dentro de la herramienta API Postman, ingrese la URL como en el formato que se indica a continuación.

https://mydomain.com/wp-json/wp/v2/posts

Esto recuperará los datos de la publicación dentro de su sitio web de WordPress.

Paso 6: configurar la aplicación React

Ahora que hemos terminado con el backend, es hora de comenzar a trabajar en el front-end. Primero, creamos una aplicación React ejecutando el siguiente código en la Terminal.

npm create vite@latest my-blog-app
cd my-blog-app
npm install

Este comando creará una nueva aplicación React usando Vite y también instalará las bibliotecas o paquetes externos necesarios.

Además, también debe incluir Axios para manejar solicitudes HTTP. Para esto ejecute el siguiente comando para instalarlo.

npm install axios

Ahora, puede iniciar un servidor de desarrollo local para su aplicación ejecutando el comando npm run dev en su terminal o símbolo del sistema.

Cuando ejecute este comando, iniciará un servidor en su máquina local y hará que su aplicación esté disponible en la URL https://127.0.0.1:5173 .

Lo siguiente que debe hacer es abrir su proyecto en el editor de código (el que desee, Visual Studio Code, Subkline Text, Atom, etc.) y también eliminar archivos innecesarios como index.css, app.css, etc.

Paso 7: recuperar publicaciones de WordPress

En su archivo App.jsx , en la parte superior, importe el gancho useState de la biblioteca React. Esto le permite utilizar el estado en su componente funcional.

import React, { useState } from 'react';

Dentro de su componente funcional App , inicialice una parte del estado llamada posts usando el gancho useState . Este estado tendrá una variedad de publicaciones. useState([]) inicializa posts con una matriz vacía como valor inicial.

const [posts, setPosts] = useState([]);

Después de inicializar el estado posts con una matriz vacía usando useState([]) , debe agregar código para recuperar publicaciones de la API REST de WordPress. Esto implica realizar una solicitud HTTP al punto final API que proporciona los datos de las publicaciones.

Debe agregar el código necesario para recuperar los datos de las publicaciones después de la declaración del estado. Este código normalmente implicará el uso de un método como fetch() o una biblioteca como Axios para realizar una solicitud HTTP GET al punto final de la API de WordPress que proporciona datos de publicaciones.

A continuación, agregue el siguiente código después de la declaración de estado para recuperar los datos de las publicaciones de la API REST de WordPress y actualizar las publicaciones en consecuencia.

const fetchPosts = () => {
// Using axios to fetch the posts
axios
.get("https://yourdomain.com/wp-json/wp/v2/posts")
.then((res) => {
// Saving the data to state
setPosts(res.data);
});
}
// Calling the function on page load
useEffect(() => {
fetchPosts()
}, [])

Este código recupera publicaciones de la API REST de un sitio web de WordPress cuando se monta el componente y actualiza el estado del componente con los datos obtenidos utilizando la función setPosts del gancho useState .

Paso 8: crear un componente de blog y renderizarlo

Ahora cree una nueva carpeta llamada "componentes" dentro de la carpeta src y cree dos archivos nuevos Blog.jsx y blog.css (dentro de los componentes).

A continuación, primero agregue el siguiente código al archivo Blog.jsx:

import axios from "axios";
import React, { useEffect, useState } from "react";
import "./blog.css";
export default function Blog({ post }) {
const [featuredImage, setFeaturedImage] = useState();
const getImage = () => {
axios
.get(post?._links["wp:featuredmedia"][0]?.href)
.then((response) => {
setFeaturedImage(response.data.source_url);
});
};

useEffect(() => {
getImage();
}, []);
return (
<div class="container">
<div class="blog-container">
<p className="blog-date">
{new Date(Date.now()).toLocaleDateString("en-US", {
day: "numeric",
month: "long",
year: "numeric",
})}
</p>
<h2 className="blog-title">{post.title.rendered}</h2>
<p
className="blog-excerpt"
dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }}
/>
<img src={featuredImage} class="mask" />
</div>
</div>
);
}

Este componente busca y muestra el título, la fecha, el extracto y la imagen destacada de una publicación de blog pasada como accesorio.

Después de eso, agregue el siguiente estilo al archivo blog.css,

@import url("https://fonts.googleapis.com/css?display=swap&family=Poppins");
.blog-container {
width: 400px;
height: 322px;
background: white;
border-radius: 10px;
box-shadow: 0px 20px 50px #d9dbdf;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
img {
width: 400px;
height: 210px;
object-fit: cover;
overflow: hidden;
z-index: 999;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}

.blog-title {
margin: auto;
text-align: left;
padding-left: 22px;
font-family: "Poppins";
font-size: 22px;
}

.blog-date {
text-align: justify;
padding-left: 22px;
padding-right: 22px;
font-family: "Poppins";
font-size: 12px;
color: #c8c8c8;
line-height: 18px;
padding-top: 10px;
}

.blog-excerpt {
text-align: justify;
padding-left: 22px;
padding-right: 22px;
font-family: "Poppins";
font-size: 12px;
color: #8a8a8a;
line-height: 18px;
margin-bottom: 13px;
}

Finalmente, inserte el siguiente fragmento de código dentro de la declaración return del archivo App.jsx . Aquí es donde define la estructura de la interfaz de usuario de su componente utilizando la sintaxis JSX.

<div>
{posts.map((item) => (
<Blog post={item} />
))}
</div>;

Here's the final version of your "App.jsx":
import React, { useEffect, useState } from 'react'
import axios from "axios"
import Blog from './components/Blog';
export default function App() {
const [posts, setPosts] = useState([]);
const fetchPosts = () => {
axios
.get("https://my-awesome-website.local/wp-json/wp/v2/posts")
.then((res) => {
setPosts(res.data);
});
}

useEffect(() => {
fetchPosts()
}, [])
return (
<div>
{posts.map((item) => (
<Blog
post={item}
/>
))}
</div>
)
}

Guarde el archivo y actualice su navegador. Ahora podrás ver las publicaciones del blog renderizadas en la pantalla.

Ejemplos de WordPress sin cabeza

Para su referencia y para generar confianza, aquí le brindamos algunos ejemplos de WordPress sin cabeza:

1. Crunch tecnológico

Si eres un entusiasta de la tecnología, debes estar familiarizado con TechCrunch. que es un medio de comunicación tecnológico y un sitio web de noticias líder. Rediseñaron la interfaz de su sitio web para brindar una experiencia de usuario perfecta.

Para lograr esto, optaron por el enfoque de WordPress sin cabeza y utilizaron la aplicación React para crear el front-end y WordPress sin cabeza para el back-end.

2. Centro de recursos de marca de Facebook

Facebook, ahora conocido popularmente como Meta, un gigante de las redes sociales utiliza este enfoque de WordPress sin cabeza en su sitio web Brand Resource Center como guía de estilo para los activos de su marca.

El sitio web utiliza una combinación única de diseño web único y elegante con una experiencia de usuario fluida. Si a Facebook/Meta le gusta un gran gigante tecnológico, también puede hacerlo. Confíe en WordPress sin cabeza, usted también puede hacerlo.

Conclusión

En conclusión, aparte de sus ciertas limitaciones, contras o desventajas. Un enfoque headless puede hacer maravillas si se implementa correctamente. Especialmente, puede resultar muy ventajoso para los desarrolladores o creadores de contenido a quienes les gusta crear aplicaciones web sin cabeza.

Sin duda, desacoplar el WordPress estándar puede abrir un mundo de posibilidades, como obtener la libertad de diseñar la interfaz de usuario de un sitio web usando React y también administrar el contenido usando WordPress.

Esta tecnología le permite disfrutar del poder completo de cada tecnología junto con los beneficios de flexibilidad, escalabilidad y optimización SEO.

A lo largo de este blog, hemos intentado abordar todas las consultas genéricas sobre WordPress sin cabeza y también le hemos proporcionado algunos pasos sobre cómo crear un WordPress sin cabeza para su referencia. (Sin embargo, puede haber varias formas de desacoplar WordPress, así que siga la que le resulte más fácil).

Preguntas frecuentes

Raúl

Rahul Kumar es un entusiasta de la web y estratega de contenidos especializado en WordPress y alojamiento web. Con años de experiencia y el compromiso de mantenerse actualizado con las tendencias de la industria, crea estrategias en línea efectivas que generan tráfico, aumentan la participación y aumentan las conversiones. La atención de Rahul al detalle y su capacidad para crear contenido atractivo lo convierten en un activo valioso para cualquier marca que busque mejorar su presencia en línea.