WordPress ha sido el sistema de gestión de contenidos preferido por los desarrolladores y los no desarrolladores para construir y crear rápidamente sitios web impresionantes.
El uso de una arquitectura de microservicios, donde el backend de gestión de contenidos está separado del frontend, permite el máximo control de ambos «extremos». Este problema de separación es lo que intentan resolver los sistemas de gestión de contenidos headless, incluidas las soluciones de headless WordPress.
Con un enfoque headless, las empresas tienen un control más granular sobre el backend de gestión de contenidos. También son libres de utilizar cualquier frontend de su elección, incluyendo React, Vue, Angular, etc.
Esta guía explorará en detalle el headless WordPress, y en qué consiste, cuándo y por qué deberías considerar su uso. Por último, exploraremos la creación de un entorno de headless WordPress, la construcción del frontend con Vue.js, y el despliegue de headless WordPress utilizando Kinsta.
¿Qué es Headless WordPress?
WordPress es una aplicación monolítica en la que las partes del backend y del frontend están estrechamente unidos. El backend es donde entra la gestión, donde se puede crear, editar, añadir y eliminar contenido, incluso cambiar las configuraciones de apariencia. En cambio, el frontend se encarga de mostrar el contenido al usuario.
Headless WordPress es el término utilizado para describir el WordPress desacoplado. La parte del backend (gestión) está separada de la parte del frontend del CMS WordPress. Puedes desarrollar y gestionar el frontend como una aplicación independiente con cualquier framework de frontend de tu elección.
Ventajas y Desventajas de Headless WordPress
A continuación, exploraremos los pros y los contras de headless WordPress para que entiendas mejor el concepto.
Los pros
En primer lugar, empezaremos explorando los pros.
Rendimiento Superrápido
En esta era de aplicaciones de rendimiento superrápido, tu sitio web no debería tardar más de unos segundos en cargarse y evitar la pérdida de visitantes. Dado que el frontend está 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.
Control Granular
Optar por la arquitectura headless te da más control sobre la disposición del diseño, la presentación del contenido y la forma en que los usuarios interactúan con el frontend de tu aplicación. También permite que el contenido del backend esté protegido y se pueda acceder a él desde una ubicación central.
Mayor Escalabilidad
Escalar WordPress puede ser complicado a veces porque no se tiene un control completo de todos los componentes y códigos que hacen funcionar a WordPress, sobre todo si no eres un desarrollador. Pero con el desacoplamiento de WordPress, es fácil escalar cada parte de forma aislada, y puedes detectar fácilmente qué parte necesita ser escalada.
Seguridad más Estricta
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. El enfoque de headless WordPress hace que sea difícil para los hackers acceder a tus datos sensibles de backend, ya que está separado de tu frontend, el sitio web de cara al usuario.
Diseño Ligero
Tendrás más control sobre la estructura y el diseño de tu frontend. Además, podrás trabajar en el frontend con más libertad y diseño personalizado; gracias a las llamadas a la API REST, podrás aprovechar las herramientas web modernas y desplegarlas en el frontend.
Publicación de Contenidos Multicanal
Dado que Headless WordPress utiliza un sistema basado en la API 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óviles y el quiosco de pantalla táctil. También 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.
Los Contras
Exploraremos los contras de headless en mayor profundidad a medida que avancemos, pero sus principales inconvenientes son:
- Separar el backend y el frontend supone una carga extra a la hora de gestionar diferentes instancias del sitio web.
- Puede ser costoso de implementar, ya que necesita miembros adicionales en tu equipo y capital extra para ejecutar diferentes instancias.
- Hacer que tu contenido esté 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.
Cuando un Headless WordPress Puede no ser la Mejor Opción
Dado que el headless WordPress es una innovación increíble con grandes beneficios, hay algunas cosas que debes tener en cuenta a la hora de decidir si debes optar por él o no.
- Headless WordPress es muy caro de mantener. Tendrás que mantener dos instancias diferentes de un sitio web desde la infraestructura hasta los múltiples desarrolladores.
- 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án cuando se utilice un frontend separado.
- Es más caro montar un headless WordPress. Por lo tanto, siempre hay que tener en cuenta su mayor coste.
¿Quién Debería Utilizar Headless WordPress?
A continuación se presentan los casos más adecuados que puede requerir headless WordPress:
- Deberías utilizar headless WordPress si la seguridad de tu sitio web es tu principal preocupación y es primordial para tu empresa.
- A continuación, si tu sitio web no necesita actualizaciones periódicas, será una buena señal de que necesitas utilizar una configuración headless.
- A continuación, si quieres tener un diseño personalizado que un tema de WordPress no puede hacer fácilmente, quieres condimentar el frontend de tu sitio web con un diseño único. Entonces, headless WordPress es tu siguiente opción.
- Por último, si estás construyendo un sitio web de vida corta o un sitio de demostración para presentaciones y tutoriales, entonces puedes probar el enfoque headless.
Quién Debería Evitar el Uso de Headless WordPress
Aquí hay varios casos en los que usar headless WordPress no es una buena opción:
- Cuando tu sitio web depende únicamente de plugins y funcionalidades específicas que controlan y funcionan mejor con el frontend de tu aplicación, debes seguir con WordPress a menos que los plugins ofrezcan opciones basadas en la API para consumir los datos.
- Supongamos que no estás interesado en codificar tu sitio web, o que tu sitio web requiere un mantenimiento diario, y no estás contratando a un profesional para el mantenimiento rutinario debido a tu bajo presupuesto. En ese caso, WordPress es una opción adecuada para ti.
- Si no eres un desarrollador experimentado y quieres crear y gestionar tu sitio web solo, deberías utilizar WordPress.
Cómo Hacer que WordPress sea Headless (Construir una Aplicación)
Esta sección explorará la construcción y el desarrollo de un blog de noticias con headless WordPress para el backend y Vue 3 como el frontend de cara al usuario.
Configuración de Headless WordPress con Devkinsta
Desarrollaremos el headless WordPress con DevKinsta, un popular entorno de desarrollo local de WordPress para diseñar, desarrollar e implementar sitios de WordPress desde la comodidad de tu máquina local.
DevKinsta es gratuito para siempre y te ofrece grandes ventajas y comodidad a la hora de desarrollar y construir WordPress con él.
Puedes descargar e instalar DevKinsta desde el sitio web oficial y seguir las instrucciones de la documentación para empezar.
Como ya tenemos DevKinsta instalado, lo abriremos y seguiremos el siguiente paso para configurar nuestro primer headless WordPress.
En el panel de control de DevKinsta, crea un nuevo sitio de WordPress utilizando Nginx, MySQL y cualquier versión de WordPress disponible. Además, puedes importar una instancia de WordPress existente o crear una instancia de WordPress personalizada desde el panel de control.
A continuación, dale un nombre a tu instancia de WordPress recién creada, un nombre de usuario y una contraseña de administrador, luego haz clic en Crear y copia los detalles mientras DevKinsta crea una nueva instancia de WordPress en tu máquina local.
Luego, haz clic en Abrir Sitio para abrir tu instancia de WordPress recién creada en tu navegador predeterminado.
Por último, puedes acceder al panel de control del administrador accediendo al enlace http://headless-wordpress-news-blog.local/wp-admin e introduciendo las credenciales de acceso al administrador que introdujiste al crear la nueva instancia.
Ten en cuenta que hemos configurado nuestro headless WordPress localmente con la URL http://headless-wordpress-news-blog.local con el frontend estando alojado localmente en http://news-blog.local, y lo utilizaremos a lo largo del tutorial.
Configurar Nuestro Headless WordPress
A continuación, después de iniciar sesión con éxito en tu tablero de WordPress, puedes seguir adelante para instalar cualquier plugin y la configuración de tu elección.
Desactivaremos el tema por completo para este tutorial y solo accederemos al contenido a través del extremo basado en la API REST de WordPress instalando el plugin Simple Website Redirect y configurándolo.
Ve a Plugins > Añadir nuevo y busca el Simple Website Redirect, instálalo y actívalo:
A continuación, haz clic en la Configuración del plugin e introduce tu URL basada en el frontend (por ejemplo, http://news-blog.local), haz clic en las opciones de configuración avanzadas y añade las siguientes rutas – /wp-admin, /wp-login.php, y /wp-json – a la sección de Rutas Excluidas.
Por último, activa el plugin seleccionando Enabled en el desplegable Redirect Status:
…y eso es todo.
Además, si tu API JSON no está habilitada cuando visitas http://headless-wordpress-news-blog.local/wp-json por defecto, puedes habilitarla abriendo tus Permalinks en los Ajustes de WordPress y seleccionando Nombre de la Publicación o cualquier otro de tu elección excepto Plain:
Ahora, cuando visites tu http://headless-wordpress-news-blog.local/wp-json, debería presentarte datos JSON como los siguientes:
{
"name": "Headless WordPress News Blog",
"description": "Just another WordPress site",
"url": "http://headless-wordpress-news-blog.local",
"home": "http://headless-wordpress-news-blog.local",
"gmt_offset": "0",
"timezone_string": "",
"namespaces": [
"oembed/1.0",
"wp/v2",
"wp-site-health/v1"
],
"authentication": [
],
"routes": {
"/": {
"namespace": "",
"methods": [
"GET"
],
"endpoints": [
{
"methods": [
"GET"
],
"args": {
"context": {
"default": "view",
"required": false
}
}
}
],
...Configuración de Vue.js (Frontend)
Utilizaremos la herramienta de desarrollo web Vite para crear nuestra aplicación Vue 3 para conectar con headless WordPress. Puedes leer más sobre Vue 3 y las herramientas de desarrollo Vite.
En este artículo, vamos a construir un blog de noticias. Toda la gestión de contenidos backend del proyecto se desarrollará y alojará con nuestro headless WordPress usando Devkinsta.
Escribe junto a estos simples comandos:
npm init @vitejs/app news-blog
cd news-blog
npm install
npm run devSi tienes problemas con los espacios en el nombre de usuario, intenta usar:
npx create-vite-app news-blogTen en cuenta que hemos configurado nuestra aplicación Vue 3 para que responda a http://news-blog.local, pero puedes seguir con la opción por defecto http://localhost:3000.
Por último, abre tu código base de Vue 3 con cualquier editor de código de tu elección. Vamos a ir con VSCode, y vamos a ensuciarnos las manos con los códigos.
Consumir la API de WordPress
Nos hemos adelantado a desarrollar la parte restante de la aplicación Vue para ahorrarte tiempo de lectura, pero puedes adelantarte a clonar el repositorio desde mi GitHub.
Componente de la Aplicación de Visualización
El siguiente fragmento de código muestra cómo implementamos la API REST de WordPress con nuestra instancia de Vue para mostrar todas las publicaciones del headless WordPress:
<template>
<section>
<div class="padding-top">
<div class="container inner-padding-top">
<div class="row">
<div class="col-md-12 col-sm-12-col-xs-12 text-center">
<h2 class="lead-title text-uppercase">
Latest Backend Dev. Articles
</h2>
<h3 class="article-subtitle">
Latest Backend Dev. Articles curated daily by the community.
</h3>
</div>
</div>
<div class="row mb-1 mt-5">
<post v-for="(post, i) in posts" :key="i" :post="post" />
</div>
</div>
</div>
<div class="col-md-12 col-sm-12-col-xs-12 text-center mb-5">
<Button link="/posts" class="col p-3">More Articles</Button>
</div>
</section>
</template>
<script>
import { mapState } from 'vuex'
export default {
computed: {
...mapState({
posts: (state) => {
return [...state.post.posts].slice(0, 22)
},
}),
},
}
</script>Visualizar el Componente de un Solo Post
El fragmento de código muestra cómo recuperamos un solo post con la API REST de WordPress con el headless WordPress y lo mostramos en nuestra instancia de Vue:
<template>
<div class="card single">
<div class="card-head pl-3 pr-3 pt-3">
<h1 class="title">{{ post.title || '' }}</h1>
<div class="d-flex">
<div class="author d-flex pr-3 pb-4">
<div class="profile mr-2"></div>
<a :href="'/authors/' + post.author.slug" class="subtitle is-6">
{{ post.author.name }}
</a>
</div>
<div class="date_created">
<small class="text-muted">
<li class="fa fa-calendar"></li>
<time
:datetime="$moment(post.date).format('MMMM Do YYYY, h:mm:ss a')"
>{{ $moment(post.date).format('MMMM Do YYYY') }}</time
>
</small>
</div>
</div>
</div>
<div class="block-image pl-3 pr-3 pt-2 mb-3">
<img
v-lazy-load
:data-src="image"
class="card-img-top img-fluid"
:alt="post.title"
/>
</div>
<div class="tags absolute">
<a
v-for="category in post.categories"
:key="category.id"
:href="'/categories/' + category.slug"
class="btn-tag"
>
{{ category.title }}
</a>
</div>
</div>
</template>
<script>
import Vue from 'vue'
export default {
name: 'SinglePost',
props: {
post: {
type: [Object, Array],
default: () => {},
},
},
}
</script>A continuación se muestra la tienda que hace las llamadas a la API de headless WordPress para los contenidos del backend:
export const actions = {
async getPosts({ commit }, { page, count = 22 }) {
try {
const response = await fetch(
`http://headless-wordpress-news-blog.local/wp-json/wp/v2/posts`
)
const data = await response.json()
if (data) {
commit('setPosts', data)
}
return data
}
},
async getPost({ commit }, id) {
try {
const response = await fetch(
`http://headless-wordpress-news-blog.local/wp-json/wp/v2/posts/${id}`
)
const data = await response.json()
if (data) {
commit('setPost', data)
}
return data
}
},
}Implementación de Headless WordPress con Kinsta
Por último, la implementación de tu headless WordPress es muy fácil con DevKinsta utilizando el servicio de alojamiento Kinsta.
Para desplegar tu WordPress sin cabecera en Kinsta, haz clic en el botón Enviar a Staging de tu panel de control de DevKinsta e inicia sesión en Kinsta con tus credenciales de acceso.
Puedes aprender a empujar los cambios al entorno de ensayo para implementar tu headless WordPress en los servicios de alojamiento de Kinsta en un solo clic.
Por último, puedes implementar tu instancia de Vue.js en cualquier proveedor de alojamiento en la nube de tu elección. Asegúrate de actualizar tu extremo de headless WordPress en la forma correspondiente para probar tu aplicación en un entorno de producción en vivo.
Resumen
Headless WordPress y los beneficios que conlleva están aquí para quedarse por un tiempo. Su popularidad seguirá creciendo a medida que más desarrolladores y propietarios de sitios web comprendan las ventajas de una opción headless.
En esta guía, te hemos presentado los beneficios, los pros y los contras de headless WordPress, y te hemos mostrado cómo construir e implementar tu primer headless WordPress con DevKinsta. Ahora estás en camino de tener tu implementación de headless WordPress.
¿Cuáles son tus consejos para desplegar un sitio de headless WordPress? Compártelos en la sección de comentarios.
Soy un Ingeniero de Software y Creador de Contenidos orientado a crear productos innovadores y de alto rendimiento siguiendo las mejores prácticas y los estándares del sector. También me encanta escribir sobre ello en Masteringbackend.com. Sígueme en X, LinkedIn y About Me
Deja una respuesta