Aprenda a crear un sitio de WordPress sin cabeza con Vue.js

WordPress ha sido el sistema de gestión de contenido de referencia para desarrolladores y no desarrolladores para crear rápidamente sitios web impresionantes.

El uso de una arquitectura de microservicio, donde el backend de administración de contenido está separado del frontend, permite un control máximo de ambos «extremos». Este problema de separación es lo que los sistemas de gestión de contenido sin cabeza, incluidas las soluciones de WordPress sin cabeza, intentan resolver.

Con un enfoque sin cabeza, las empresas tienen un control más granular sobre el backend de administración de contenido. También son libres de usar cualquier interfaz de su elección, incluidos React, Vue, Angular, etc.

Esta guía explorará en detalle WordPress sin cabeza, y de qué se trata, cuándo y por qué debería considerar su uso. Por último, exploraremos la creación de un entorno de WordPress sin cabeza, construyendo la interfaz con Vue.js e implementando WordPress sin cabeza usando Kinsta.

¿Qué es WordPress sin cabeza?

WordPress es una aplicación monolítica en la que el backend y el frontend están estrechamente unidos. El backend es donde entra la administración, donde puede crear, editar, agregar y eliminar contenido, incluido el cambio de configuraciones de apariencia. Por el contrario, la interfaz es responsable de mostrar el contenido al usuario.

WordPress sin cabeza es el término utilizado para describir WordPress desacoplado. La parte de backend (administración) está separada de la parte de frontend del CMS de WordPress. Puede desarrollar y administrar la interfaz como una aplicación independiente con cualquier marco de interfaz de su elección.

¿Está listo para profundizar en WordPress sin cabeza, aprenda por qué debería considerar su uso y cómo implementarlo en sus sitios? 🚀 Haga clic aquí ⬇️Haz clic para tuitear

Pros y contras de WordPress sin cabeza

A continuación, exploraremos los pros y los contras de WordPress sin cabeza para que comprenda mejor el concepto.

Los profesionales

Primero, comenzaremos explorando los pros.

Rendimiento superrápido

En esta era de aplicaciones de rendimiento superrápido, su sitio web no debería tardar más de unos segundos en cargarse y evitar la pérdida de visitantes. Dado que la interfaz está separada de WordPress y se puede desarrollar teniendo en cuenta el alto rendimiento y la escalabilidad utilizando herramientas modernas de interfaz, emplear un enfoque de WordPress sin cabeza es de gran beneficio para la experiencia general del usuario de su sitio web.

Control granular

Optar por la arquitectura sin cabeza le brinda más control sobre el diseño de su diseño, la presentación del contenido y la forma en que los usuarios interactúan con la interfaz de su aplicación. También permite proteger su contenido de backend y acceder a él desde una ubicación central.

Mayor escalabilidad

Escalar WordPress puede ser complicado a veces porque no tienes un control completo de todos los componentes y códigos que utilizan WordPress, principalmente si no eres un desarrollador. Pero con el desacoplamiento de WordPress, escalar cada parte de forma aislada es fácil y puede detectar fácilmente qué parte necesita escalar.

Seguridad más estricta

No podemos enfatizar lo suficiente los beneficios de seguridad de WordPress sin cabeza, ya que WordPress desacoplado tiene beneficios de alta seguridad contra los piratas informáticos y los ataques DDoS. El enfoque de WordPress sin cabeza dificulta que los piratas informáticos accedan a sus datos confidenciales de backend, ya que está separado de su frontend, el sitio web orientado al usuario.

Diseño ligero

Tendrá más control sobre la estructura y el diseño de su diseño de interfaz. Además, puede trabajar en la interfaz con más libertad y diseño personalizado; gracias a las llamadas a la API REST, podrá aprovechar las herramientas web modernas e implementarlas en la interfaz.

Publicación de contenido multicanal

Dado que WordPress sin cabeza utiliza un sistema basado en API para comunicar su contenido a la interfaz, puede mostrar su contenido en cualquier lugar y en cualquier plataforma, incluido 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 los dispositivos de Realidad Aumentada, Realidad Virtual e Internet de las Cosas para mostrar y presentar su contenido proveniente del sistema basado en API.

Los contras

Exploraremos las desventajas de la decapitación con más profundidad a medida que avancemos, pero sus principales inconvenientes son:

1. Separar el backend y el frontend le brinda una carga adicional al administrar diferentes instancias de sitios web.
2. Puede ser costoso de implementar, ya que necesita miembros adicionales en su equipo y capital adicional para ejecutar diferentes instancias.
3. Hacer que su contenido esté disponible en diferentes plataformas puede causar una experiencia inconsistente para sus usuarios si el contenido no se presenta de manera consistente en todas las plataformas.

Cuando WordPress sin cabeza podría no ser la mejor opción

Dado que WordPress sin cabeza es una innovación increíble con grandes beneficios, hay algunas cosas que debe tener en cuenta al decidir si debe seguir o no.

1. WordPress sin cabeza es muy caro de mantener. Mantendrá dos instancias diferentes de un sitio web desde la infraestructura hasta varios desarrolladores.
2. Headless WordPress no es compatible con todas las funciones de WordPress. Por ejemplo, las excelentes características de WordPress como el editor WYSIWYG y la vista previa en vivo no funcionarán cuando se usa una interfaz separada.
3. Es más caro configurar un WordPress sin cabeza. Por lo tanto, siempre tenga en cuenta su mayor costo.

¿Quién debería usar WordPress sin cabeza?

A continuación se muestran los casos más adecuados para los que puede necesitar WordPress sin cabeza:

1. Debería utilizar WordPress sin cabeza si la seguridad de su sitio web es su principal preocupación y primordial para su empresa.
2. A continuación, si su sitio web no necesita una actualización y actualización periódicas, será una gran señal de que necesita usar una configuración sin cabeza.
3. A continuación, si desea tener un diseño personalizado que un tema de WordPress no hará fácilmente, desea darle más sabor a la interfaz de su sitio web con un diseño único. Entonces, WordPress sin cabeza es su próxima opción.
4. Por último, si está creando un sitio web de corta duración o un sitio de demostración para presentaciones y tutoriales, puede probar el enfoque sin cabeza.

¿Quién debería evitar el uso de WordPress sin cabeza?

Aquí hay varios casos en los que usar WordPress sin cabeza no es una buena opción:

1. Cuando su sitio web se basa únicamente en complementos y funcionalidades específicas que controlan y funcionan mejor con la interfaz de su aplicación, debe seguir con WordPress a menos que los complementos ofrezcan opciones basadas en API para consumir los datos.
2. Suponga que no está interesado en codificar su sitio web, o que su sitio web requiere un mantenimiento diario y no está contratando a un profesional para el mantenimiento de rutina debido a su bajo presupuesto. En ese caso, WordPress es una opción adecuada para ti.
3. Si no es un desarrollador experimentado y desea crear y administrar su sitio web solo, debería usar WordPress.

Cómo hacer WordPress sin cabeza (construir una aplicación)

Esta sección explorará la construcción y el desarrollo de un blog de noticias con WordPress sin cabeza para el backend y Vue 3 como interfaz de usuario.

Configuración de WordPress sin cabeza con Devkinsta

Desarrollaremos WordPress sin cabeza con DevKinsta, un popular entorno de desarrollo local de WordPress para diseñar, desarrollar e implementar sitios de WordPress desde la comodidad de su máquina local.

DevKinsta es gratis para siempre y le ofrece grandes beneficios y comodidad para desarrollar y construir WordPress con él.

Puede descargar e instalar DevKinsta desde el sitio web oficial y seguir las instrucciones de la documentación para comenzar.

Como ya tenemos DevKinsta instalado, lo abriremos y seguiremos el paso a continuación para configurar nuestro primer WordPress sin cabeza.

En el panel de DevKinsta, cree un nuevo sitio de WordPress utilizando Nginx, MySQL y cualquier versión de WordPress disponible. Además, puede importar una instancia de WordPress existente o crear una instancia personalizada de WordPress desde el panel de control.

A continuación, asigne un nombre, un nombre de usuario de administrador y una contraseña a su instancia de WordPress recién creada, luego haga clic en Crear y copie los detalles mientras DevKinsta crea una nueva instancia de WordPress en su máquina local.

A continuación, haga clic en Sitio abierto para abrir su instancia de WordPress recién creada en su navegador predeterminado.

Por último, puede iniciar sesión en el panel de administración accediendo al http://headless-wordpress-news-blog.local/wp-admin enlace y escribiendo las credenciales de inicio de sesión de administrador que ingresó al crear la nueva instancia.

Tenga en cuenta que hemos configurado nuestro WordPress sin cabeza localmente con la URL http://headless-wordpress-news-blog.local con la interfaz está alojada localmente en http://news-blog.local, y lo usaremos a lo largo del tutorial.

Configuración de nuestro WordPress sin cabeza

A continuación, después de iniciar sesión correctamente su panel de WordPress, puede seguir adelante para instalar cualquier complemento y configuración de su elección.

Deshabilitaremos el tema por completo para este tutorial y solo accederemos al contenido a través del punto final basado en la API REST de WordPress instalando el complemento Simple Website Redirect y configurándolo.

Ir a Complementos> Agregar nuevo y busque Simple Website Redirect, instálelo y actívelo:

A continuación, haga clic en el complemento Ajustes e ingrese su URL basada en frontend (p. ej. http://news-blog.local), clickea en el Opciones de configuración avanzadas y agregue las siguientes rutas: /wp-admin, /wp-login.php, y /wp-json – a la sección Excluir rutas.

Por último, habilite el complemento seleccionando Activado en el Estado de redireccionamiento desplegable:

…¡y eso es!

Además, si su API JSON no está habilitada cuando visita http://headless-wordpress-news-blog.local/wp-json de forma predeterminada, puede habilitarlo abriendo su Enlaces permanentes debajo Configuración de WordPress y seleccionando Nombre del puesto o cualquier otro de tu elección excepto Sencillo:

Ahora, cuando visite su http://headless-wordpress-news-blog.local/wp-json, debería presentarle datos JSON como se muestra a continuación:

{
  "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
            }
          }
        }
      ],
...

Configurando Vue.js (Frontend)

Usaremos la herramienta de desarrollo web Vite para crear nuestra aplicación Vue 3 para conectar con WordPress sin cabeza. Puede leer más sobre las herramientas de desarrollo Vue 3 y Vite.

En este artículo, crearemos un blog de noticias. Toda la gestión de contenido backend del proyecto se desarrollará y alojará con nuestro WordPress sin cabeza utilizando Devkinsta.

Escriba junto con estos simples comandos:

npm init @vitejs/app news-blog
cd news-blog
npm install
npm run dev

Si tiene problemas con los espacios en su nombre de usuario, intente usar:

npx create-vite-app news-blog

Tenga en cuenta que hemos configurado nuestra aplicación Vue 3 para escuchar http://news-blog.local, pero puedes quedarte con el predeterminado http://localhost:3000.

Por último, abra su base de código de Vue 3 con cualquier editor de código de su elección. Iremos con VSCode, y ensuciemos nuestras manos con códigos.

Consumir la API de WordPress

Nos hemos adelantado para desarrollar la parte restante de la aplicación Vue para ahorrarle tiempo de lectura, pero puede seguir adelante para clonar el repositorio de mi GitHub.

Componente de publicación de la aplicación de display

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 de WordPress sin cabeza:

<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>

Mostrar componente de poste único

El fragmento de código muestra cómo recuperamos una sola publicación con la API REST de WordPress con WordPress sin cabeza y la 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 realiza las llamadas API a la API de WordPress sin cabeza para el contenido 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 WordPress sin cabeza con Kinsta

Por último, la implementación de su WordPress sin cabeza es muy fácil con DevKinsta utilizando el servicio de alojamiento de Kinsta.

Para implementar su WordPress sin cabeza en Kinsta, haga clic en el Empuje a la puesta en escena en su panel de DevKinsta e inicie sesión en Kinsta con sus credenciales de inicio de sesión. Puede crear una nueva cuenta de Kinsta para obtener sus credenciales de inicio de sesión.

Puede aprender cómo impulsar cambios en el entorno de ensayo para implementar su WordPress sin cabeza en los servicios de alojamiento de Kinsta con un solo clic.

Por último, puede implementar su instancia de Vue.js en cualquier proveedor de alojamiento en la nube de su elección. Asegúrese de actualizar su punto final de WordPress sin cabeza en consecuencia para probar su aplicación en un entorno de producción en vivo.

¿Quiere crear un entorno de WordPress sin cabeza? 👀 Esta publicación lo tiene cubierto 💪Haz clic para tuitear

Resumen

WordPress sin cabeza y los beneficios que conlleva están aquí para quedarse por un tiempo. Su popularidad solo seguirá creciendo a medida que más desarrolladores y propietarios de sitios comprendan las ventajas de una opción sin cabeza.

En esta guía, le presentamos los beneficios, pros y contras de WordPress sin cabeza, y le mostramos cómo construir e implementar su primer WordPress sin cabeza con DevKinsta. Ahora está en camino de tener su implementación de WordPress sin cabeza.

¿Cuáles son sus consejos para implementar un sitio de WordPress sin cabeza? ¡Compártelos en la sección de comentarios!