Use WordPress como un CM sin cabeza

Sep 11, 2025

Cómo

[dieciséis]

Escuché por primera vez sobre el enfoque de CMS sin cabeza en una charla que vi desde las ciudades gemelas, Drupal. Me gustó la idea de una separación de preocupaciones entre el contenido de creación y la visualización.

Los mejores servicios de alojamiento web en 2019.

Ya había experimentado la facilidad con la facilidad con que un servidor puede bajar, eliminando todos los sitios, lo que lleva a minutos u horas de pánico de parado de corazón (hubo 24 en la mía). También había visto cómo un sitio basado en el CMS monolítico podría sufrir un compromiso de seguridad y tomar mucho esfuerzo para reparar (eso me llevó más de dos días de trabajo no remunerado). Para un rango de Alojamiento web Opciones del proveedor, echa un vistazo a nuestra guía.

23 grandes ejemplos de sitios web de WordPress

Había visto los beneficios de los CDN (redes de entrega de contenido) que pueden almacenar sus archivos de imagen, audio y video en servidores optimizados para una entrega rápida y pueden duplicar esos archivos en todo el mundo para la entrega rápida a aquellas regiones. ¿Qué sucede si su sitio web completo podría beneficiarse de este enfoque?

Necesitará…

● Una computadora con conexión a Internet (INVS)
● Un editor de código (átomo o código VS)
● Una carcasa de línea de comandos / terminal
● Una versión reciente de NOde.js instalada (puede descargar y amplificar; instalar aquí )
● Un sitio de WordPress para obtener contenido. Si no tiene uno, puede usar la plataforma WordPress.com o esto Paquete de construcción de Heroku .
● los archivos de origen de github .

Empezando

WordPress sale de la caja con la API de reposo y eso es lo que vamos a usar para consultar sus datos. ¡Así que realmente no necesitamos nada más! Nuestro sitio de visualización está totalmente separado de nuestro sitio de contenido, por lo que no necesitaremos Temas de WordPress o cualquier otra personalización fuera de algunos complementos (opcionales). Aunque, por supuesto, puedes agregar estos si quieres.

La excepción es si necesita campos META personalizados para áreas de contenido adicional. Probablemente estás usando campos personalizados avanzados para hacerlo; Puede agregar ese datos a la API de WordPress por Instalación de este plugin .

Use un generador de sitio estático

Use WordPress as a headless CMS: Gatsby starter screen

Ahora que tenemos nuestra fuente de contenido, vamos a buscar los datos y mostrarlo usando un generador de sitio estático. Mi arma de elección en este reino es Gatsby , un excelente generador de sitios estático que está construido con JavaScript. (Ver estos Creador de sitios web Picks para formas simples de construir un sitio.)

Si está buscando una buena manera de construir en sus habilidades de JavaScript y aprender reaccionar, se queda atascado en algún código, recomiendo encarecidamente intentarlo a Gatsby para que lo hagan. He aprendido mucho jugando con eso.

Primero, instaleamos una herramienta de línea de comandos que nos permita crear sitios de Gatsby:

npm install -global gatsby-cli

Ahora, navegue hasta la carpeta donde desea mantener su sitio y ejecutar este comando:

gatsby new blog

Esto creará una nueva carpeta llamada 'Blog' e instalará Gatsby y sus dependencias a esta carpeta. Abra esta carpeta en su editor de texto favorito. Puede que parezca haber muchos archivos allí. No se preocupe, solo estaremos editando directamente el gatsby-config.js De gatsby-node.js archivos, y el SRC Carpeta, que es donde viven nuestras plantillas.

Si tiene muchos archivos para almacenar, vale la pena actualizar su almacenamiento en la nube .

Obteniendo nuestro contenido

El primer paso que queremos tomar es buscar nuestro contenido de la API del sitio de WordPress.

Para hacer eso, vamos a instalar gatsby-source-wordpress , un complemento preescrito para WordPress. Esto ilustra una de las razones principales por las que amo a Gatsby, puede obtener sus datos de una variedad de fuentes diferentes. Muchos generadores de sitios estáticos están restringidos a usar archivos de descuento, pero Gatsby es muy flexible.

El ecosistema de plugin de Gatsby es muy maduro. Hay un montón de formas preescritas de obtener sus datos y muchas otras funciones inteligentes que también vienen útiles.

Para instalar el complemento, primer directorio Cambiar en su nuevo sitio Gatsby usando este comando: cd blog .

Ahora ejecuta este comando: INSTALACIÓN DE NPM --AVE GATSBYSOURCE-WORDPRES s.

Una vez hecho, es hora de abrir el archivo gatsby-config.js. Verá que ya hay alguna configuración básica en su lugar que Gatsby nos da de forma predeterminada. Vamos a construir sobre eso para configurar nuestro complemento aquí:

 Module.Exports = {
 Sitemetadata: {
  Título: 'Gatsby Fallet Starter',
 },
 complementos: [
  'Gatsby-Plugin-React-Casco',
  {
   Resuelve: "Gatsby-Source-WordPress",
   Opciones: {
    BASURL: "My-wordpress-site.com",
    Protocolo: "https",
    Hostingwpcom: Falso,
    useacf: verdadero,
    SearchAndReplaceconturls: {
     sourceurl: "https://my-wordpress-site.com",
     Reemplazo: "https://my-static-site.com",
    }
   },
  },
 ],
}

¿Funcionó?

Puedes consultar abriendo tu terminal, escribiendo gatsby desarrollar y mira lo que pasa. ¡Se advierte! Incluso si tiene la configuración correcta, obtendrá algunas advertencias de todos modos, esto puede ser Gatsby en busca de contenido que aún no haya escrito.

Ahora puede ver Gatsby-Starter-Predeterminy en el navegador.

  http: // localhost: 8000 /

Ver GraphiQL, un IDE en el navegador, para explorar los datos y el esquema de su sitio.

  http: // localhost: 8000 / ___ graphql

Tenga en cuenta que la compilación de desarrollo no está optimizada. Para crear una compilación de producción, use Gatsby Build.

Si el Gatsby Predeterminado Hamer (derecha) no es lo que está recibiendo, verifique que su sitio WordPress no esté en un subdominio, que definitivamente está utilizando HTTPS o HTTP y que tiene lo mismo en su configuración.

Ahora podemos ir a http: // localhost: 8000 / y ver nuestro sitio Gatsby!

¿Podemos consultar nuestros datos?

Es posible que haya notado que no hay contenido de WordPress aquí. Esto se debe a que no le hemos contado a Gatsby qué hacer todavía. Antes de hacerlo, vamos a verificar que realmente tenemos nuestro contenido disponible para Gatsby. Para hacer eso, visite esta URL:

  http: // localhost: 8000 / ___ graphql

Esta herramienta incorporada se llama graphiql y es otro poder secreto de Gatsby.

GraphQL es similar al resto: es una forma de consultar datos. Pero con GraphQL, puede interactuar con sus datos mucho más fácilmente. GraphiQL (un IDE visual para GraphQL) puede mostrarnos algunos de estos trucos. En el panel izquierdo, intente escribir lo siguiente:

 {
 allwordrespresspost {
  bordes {
   nodo {
    identificación
    babosa
    estado
    plantilla
    formato
   }
  }
 }
}

Esto podría parecer un poco como JSON pero no lo es. Es un nuevo lenguaje de consulta que creo que algún día reemplazará en gran medida al descanso como una forma de comunicarse con las API.

¿Qué obtuviste cuando presionaste Ctrl + Enter en GraphiQL? Ojalá, hará que haya visto sus publicaciones y página de WordPress en el lado derecho de la pantalla.

En realidad, vamos a usar esta consulta en nuestro próximo paso, ¡así que manténgalo a mano! Es posible que desee ver qué otros datos puede obtener con Graphiql mientras está aquí. Si desea hacerlo, intente mover el cursor y escribir ya sea CTRL + SPACE y / o CTRL + ENTER. Eso revelará otros grupos de contenido.

Entonces, ahora tenemos contenido en Gatsby. A continuación, necesitamos mostrarlo.

Mostrar nuestros mensajes

Use WordPress as a headless CMS: Gatsby development 404 screen

Para este siguiente paso vamos a hacer uso de la gatsby-node.js expediente.

gatsby-node.js Es un archivo que puede usar para interactuar con la "API del nodo" de Gatsby. Aquí puede controlar cómo se genera su sitio y crea páginas, publicaciones y más.

Vamos a escribir algunas instrucciones aquí para decirle a Gatsby qué hacer con nuestros datos:

Const Rath = Requerir (`Ruta ');

exports.createpages = ({graphql, froundactioncreats})
= & gt; {
 const {createpage} = ArroofCreatores
 devuelva la nueva promesa ((resolución, rechazo) = & gt; {
  graphql (
   '
   {
    allwordrespresspost {
     bordes {
      nodo {
       identificación
       babosa
       estado
       plantilla
       formato
      }
     }
    }
   }
  '
 ) .En (resultado = & gt; {
   Si (resultado.errors) {
    console.log (resultado.errors)
    Rechazar (resultado.Errores)
   }

   const posttemplate = ruta.resolve (`./src/templates/
post.js`)

   resultado.data.allwordrespresspost.edges.foreach (Edge = & gt; {
    Crear página({
     Ruta: `/ $ {Edge.Node.Slug} /`,
     Componente: PostTemplate,
     Contexto: {
      ID: borde.node.id,
     },
    })
   })
   resolver()
  })
 })
}

Este código crea páginas de nuestra consulta GraphQL y para cada página, usará una plantilla que hemos definido ( /src/templates/post.js ). Así que a continuación, necesitamos crear ese archivo!

Crear plantilla de post

Dentro de la / SRC / carpeta, cree una carpeta llamada Plantillas y un archivo dentro de eso se llama post.js . Añadir a él este código:

 La importación reacciona de 'reaccionar'
Casco de importación de 'react-casco'

Clase PostTemplate extiende reactive component {
 render () {
  const post = este.props.data.wordpresspost;
  const slug = este.props.data.wordpresspost.lug;

  regreso (
   & lt; div & gt;
   & lt; Casco title = {'$ {titlestring} | $ {sititle} `} / & gt;
   & lt; h1 peligrosamentesetinnerhtml = {{__html: post.title}} / & gt;
   & lt; div peligrosolysetinnerhtml = {{__html: post.content}} / & gt;
   & lt; / DIV & GT;
  )
 }
}

PAGETEMPLINE POR DEFECTO DE LA EXPORTACIÓN

Exportar Const Query = GraphQL`
 Consulta Currentpost ($ ID: cadena!) {
  wordpresspost (ID: {EQ: $ ID}) {
   título
   contenido
   babosa
  }
  sitio {
   Sitemetadata {
    título
   }
  }
}

Esto utiliza una consulta de GraphQL diferente para obtener datos sobre el post específico, ha sido alimentado por el gatsbynode.js El archivo, luego usa reaccionar para que se vuelva al navegador.

Si desea ver rápidamente una lista de todas sus publicaciones, puede escribir http: // localhost: 8000 / a en la barra de direcciones de su navegador. Esto lo llevará a una página de desarrollo 404, que enumera todos sus publicaciones. Haga clic en uno para visitarlo!

Próximos pasos

Hemos rayado la superficie de cómo usar WordPress como un CMS sin cabeza y espero haberlo presentado en algunos conceptos y herramientas interesantes que podría usar y experimentar en el futuro.

Hay mucho más de esta historia y a mis colegas y he blogueado extensamente en Árbol de índigo . También he escrito más en mi blog personal, Delicioso ensueño .

¡Por favor, mantenga en contacto conmigo a través de esos canales y en Twitter para escuchar más eventos emocionantes en el mundo de CMS sin cabeza!

Este artículo fue publicado originalmente en el número 308 de neto , la revista más vendida del mundo para diseñadores web y desarrolladores web. Comprar emisión 308 aquí o Suscríbete aquí .

Artículos relacionados:

40 tutoriales brillantes de WordPress
6 puntas principales para el éxito de CRO en WordPress
10 grandes complementos de WordPress para diseñadores

Use WordPress como un CM sin cabeza

Empezando

Use un generador de sitio estático

Obteniendo nuestro contenido

¿Funcionó?

¿Podemos consultar nuestros datos?

Mostrar nuestros mensajes

Crear plantilla de post

Próximos pasos

Cómo - Artículos más populares

44 de los mejores accesos directos de iPad y gestos para iPados 2020

8 Características de la CSS de última generación (y cómo usarlas)

Construye un portal cliente con WordPress

Cómo crear una criatura de fantasía súper realista

Crea un efecto de aberración cromático

Cómo prototipo Una aplicación móvil con origami Studio

Cultive las plantas en Houdini

13 consejos para hacer un mundo de juegos VR

Categorías