Si tiene que ejecutar el WordPress sin cabeza, un marco de calidad es obligatorio. Sin embargo, incluso con un poco de ayuda de un marco moderno, puede continuar luchando contra el contenido de manera efectiva. Aquí viene Faust.js. Este nuevo marco utiliza la potencia Next.js y reacciona y lo combina con las funciones convenientes de Vista previa. Con Faust.js, puede ver su contenido antes de presionar la publicación, al igual que con un sitio web tradicional de WordPress. En este artículo, exploraremos por qué es posible que desee usar faust.js para el próximo proyecto de WordPress. Luego le mostraremos cómo configurar este nuevo marco y construir un frente simple. ¡Vamos a empezar!
Por qué es posible que desee ejecutar un sitio web de WordPress sin el Sistema de Gestión de Cabezas (CMS) consiste en un front-end y un back-end, y WordPress no es una excepción. Sin embargo, puede ejecutar la WordPress sin cabeza. La “cabeza” se refiere a la capa de presentación, mientras que el “cuerpo” es el lugar donde se almacena y crea el contenido. Al quitar el frente (cabeza) de la parte posterior (cuerpo), puede ejecutar WordPress sin cabeza. Con un proyecto sin cabeza, continuará utilizando el tablero y los instrumentos familiares WordPress. Sin embargo, es libre de diseñar su propio front -end, independientemente de las limitaciones ordinarias de WordPress. Esto le brinda control completo sobre cómo se muestra su contenido.
Crear su propio frente del frente puede ser una perspectiva interesante, pero no es particularmente simple. Afortunadamente, hay herramientas que pueden realizar una gran parte del peso de levantamiento para usted. Muchos usuarios de CMS sin cabeza eligen solicitar la ayuda de un instrumento como Frontity, Gatsby o Next.js Framework basado en React. Sin embargo, tradicionalmente, era difícil previsualizar publicaciones y páginas en un sitio sin cabeza, incluso cuando se usaba un marco. Aquí es donde interviene Faust.js: este marco se construye al lado de Next.js y reacciona y se esfuerza por proporcionar una experiencia de publicación que esté de acuerdo con WordPress tradicional. Para lograr esto, Faust.js ofrece pronósticos sin interrupciones.

Faust.js también usa un cliente GraphQL. Esto le permite interrogar la API de WordPress WPGRAPHQL sin tener que saber la consulta GraphQL. Además, Faust.js ofrece mecanismos incorporados para la autenticación de back-end de WordPress. Esto facilita la creación de contenido cerrado y sitios de comercio electrónico con sus CMS sin cabeza. Cómo crear un sitio web de WordPress sin cabeza con Faust.js (en 9 pasos) ahora que hemos cubierto lo que es Faust.js y algunos de sus principales beneficios, para ver cómo puede comenzar con este marco. Aquí le mostramos cómo crear un CMS sin cabeza con Faust.js, en nueve pasos.
Paso 1: Prepare su entorno de desarrollo antes de comenzar, deberá instalar Node.js y Node Package Manager (NPM). También necesitará una instalación de WordPress, que puede alojar localmente o en un servidor web. También usará algunos complementos de WordPress. En primer lugar, el complemento WPGraphql convertirá WordPress en una API GraphQL, lista para consumir su proyecto. También necesitará WPE sin cabeza. Este complemento ofrece algunas funciones adicionales que lo ayudan a asegurarse de que WordPress funcione correctamente como un CMS sin cabeza. Puede descargar la última versión de este complemento y luego puede cargarlo en el tablero de WordPress. Para ayudarlo a comenzar con el Faust.js, utilizará el proyecto de inicio CREATE-NEXT-APP. Esto genera una aplicación Bootstrap Next.js con todas las configuraciones y archivos necesarios que ya están en su lugar. Luego puede usar esto como base para su proyecto Faust.JS. Puede instalar Create-Next-APP usando el instrumento NPX, que se incluye con NPM. En el terminal local o en la ventana de orden indicada, ejecute lo siguiente: NPX Create-NEX-App Faust-Headless-Demo creará un proyecto de demostración Faust-Headless en el director de usuarios locales de computadoras. Una vez que se complete este proceso, el terminal le pedirá que comience la aplicación Next.js utilizando los siguientes pedidos:
¡CD Faust-Headless-Demo NPM Run Devicii-Usted acaba de crear con éxito un proyecto Next.js! Para echar un vistazo a esta aplicación, vaya a “http: // localhost: 3000” en el navegador:
Ahora debería ver el sitio inicial Next.js. Si está experimentando un mensaje de error, intente ejecutar NPM Ejecutar Dev nuevamente, lo que puede resolver el problema. Paso 2: Configurar TypeScript Faust.js usa TypeScript, que es un tipo de JavaScript Superst que agrega el tipo para verificar. Esto le permite detectar errores durante la compilación en lugar de esperar hasta el tiempo de ejecución. Para instalar TypeScript, ejecute los siguientes comandos en el terminal: NPM Instalar-Save-Dev @tipos/react NPM Instalar TypeScript-Save-Dev, debe generar un archivo tsconfig.json. Este archivo especifica las opciones del compilador que se necesitan para ejecutar su proyecto: NPX TSC – -Se, una vez que configure TypeScript, deberá convertir algunos JavaScript en formato TypeScript. Navegue al director de usuarios locales, que debe contener un nuevo director de Faust-Headless-Demo:
En Faust-Headless-Demo, abra el director de páginas. Ahora puede cambiar el nombre del archivo _app.js en _app.tsx y reemplazar su contenido con lo siguiente:

import ‘../styles/globals.css’; Tipo de importación {appProps/ *, appContext */} de ‘next/app’; Function myApp ({componente, pageProps}: appProps) {return ; } Exportar predeterminado myApp; Luego cambie el nombre de páginas/index.js en páginas/index.tsx. Su aplicación Next.js ahora está configurada correctamente para TypeScript. Paso 3: Cree un componente Reactable React en este momento, puede poner a prueba su proyecto mostrando un contenido falso. En el director de la página local, cree un archivo post.tsx:
En este archivo, ingresará algún texto. Si el siguiente contenido aparece en el navegador, sabrá que su aplicación Next.js está configurada correctamente: Exportar función predeterminada postspage () {return

La página de publicaciones

; } En el navegador, navegue “http: // localhost: 3000/publicaciones”. Ahora debería ver este contenido inactivo:

Después de verificar su configuración, el siguiente paso es crear un componente React básico. Finalmente, usará este componente para mostrar una lista de todas sus publicaciones de WordPress. Es la mejor práctica para agregar todos sus componentes reaccionar en un directorio dedicado. En vista de esto, explore la raíz del proyecto y cree una carpeta de componentes:
En este directorio, cree un archivo post.tsx. Un componente React puede recibir datos del componente principal a través de accesorios del componente. En este ejemplo, transmitirá el título y el contenido de cada publicación al componente de publicación.

En TypeScript, puede hacerlo creando una interfaz para mapear los datos que desea transmitir. En el archivo Post.tsx, agregue lo siguiente: Exportar interfaz PostProps {title: String; Contenido: cadena; } Exportar la función de función predeterminada (props: postprops) {const {title, content} = props; Return (

{title}

{content}
); } Ahora tiene un componente Reactable React. El siguiente paso es el uso de este componente en la página de publicación. Paso 4: muestra una lista de publicaciones para comenzar, abra el archivo de páginas/post.tsx. En este momento, simplemente proporcionará algunos datos falsos, que mostrará en un formato de lista: Importar publicación de ‘../Components/Post’; const publicaciones = [{id: 1, Título: ‘lorem ipsum.’, contenido: ‘nteger porttor, dii id dapibus euismod, lacus slicis tintcidunt ante, sit amet eleifand metus enm en orci. Vivamus tincidunt Elefend Leo, en Scelerisque Lacus Viverra AC. ‘,}, {Id: 2, Título:’ Lorem Ipsum. ‘, Contenido:’ En Lacinia Ipsum et lorem varius, i porttor de eros porttor. Clase Aptent Taciti Soiosqu ad litora Torquent por Conubia, por comienzo Himenaeos. ‘,},]; Exportar función predeterminada postspage () {return

mi página de publicaciones

; } Puede crear una lista de publicaciones viajando en el ciclo de publicaciones. Esto requiere devolver un componente de publicación para cada artículo: Importar publicación de ‘../Components/Post’; Const publicaciones = [{id: 1, título: ‘lorem ipsum.’, Contenido: ‘nteger porttor, dui id dapibus euisMod ….’,}, {id: 2, título: ‘lorem iPsum.’, Contenido: ‘
En Lacinia Ipsum et lorem varius, i puerto eros porttor … ‘,},]; Exportar función predeterminada postspage () {return (

mis publicaciones

{post.map ((post) => ())}
); } Guarde los cambios y cierre este archivo. Luego vaya a “http: // localhost: 3000/publicaciones”: esta pestaña ahora debe mostrar una lista de publicaciones falsas. Una vez que haya conectado Faust.js a su back-end de WordPress, utilizará este componente React para mostrar una lista de sus publicaciones de la vida real. Paso 5: Configure el marco Faust.js por fin, está listo para configurar el faust.js. Para iniciar, instale adicciones de producción y desarrollo ejecutando los siguientes comandos: NPM Install-Save-Prod @faustjs/core @faustjs/next npm install: save-dev @gqty/cli dotenv luego navegue por el director raíz del proyecto. Dentro de esta carpeta, cree un nuevo archivo faust.config.js:

Utilizará este archivo para conectar faust.js a su back-end de WordPress. Ahora puede ingresar el siguiente código: import {config como coreAcFig} de ‘@faustjs/core’; If (! Process.env.next_public_wordpress_url) {console.error (debe proporcionar una variable de entorno next_prlic_wordpress_url, ¿le hizo un archivo .env.local? ‘,); }/** * @Type {import (” @faustjs/core”). config} */exportación predeterminada coreonfig ({wpurl: process.env.next_public_wordpress_url, apiclientsecret: process.wp_headless_secret,}); Dentro de este director, también tendrá que crear un archivo .env.local. Esto mantendrá todas las variables de entorno:

En .env.local, agregue el siguiente código.Asegúrese de reemplazar su sitio con su propia URL: next_public_wordpress_url = http: //your-site.com wp informar para configuraciones> sin cabeza en el tablero de wordpress: faust.js usará este secreto sin cabeza para autenticar sus solicitudes a WordPress.Esto permite obtener una vista previa del contenido inacabado en el frente.Paso 6: Configure el cliente GraphQL para Faust.js Faust.js usa GQTY como Cliente GraphQL.Para configurar GQTY, cree un archivo gqty.config.js en el directorio raíz del proyecto:
Ahora puede abrir este archivo para la edición. En gqty.config.js, copie e inserte lo siguiente: require (‘dotenv’). Config (); /** * @Type {import (” @gqty/cli”). gqtyconfig} */const config = {react: false, scalartypes: {dateTime: ‘string’, introspection: {endpoint: `$ {process.env. Next_public_wordpress_url}/graphql`, encabezados: {},}, destino: ‘. /Client/index.ts’, suscripciones: false, javaScriptput: false,}; console.log (`usando” $ {config.introspection.endpoint} “para generar el esquema …`); módulo.exports = config; El siguiente paso es crear un cliente GQTY, que usará para interrogar los datos de su sitio en la raíz del proyecto, crear un nuevo director de clientes. Dentro de esta carpeta, cree un archivo index.ts que contenga el siguiente código: Tipo de importación {IncomingMesage} desde ‘http’; Import {getClient} de ‘@faustjs/next’; Importar {GeneratedSchema, Scalararsenumhash, GeneratedSchema, SchemaObjectypes, SchemaObjectyPesNames,} de ‘./schema.generated’; Export Construction = getClient ({esquema: GeneratedSchema, Scalarsenumhash,}); Función de exportación ServărClient (Req: IncomingMesage) {return getClient ({esquema: GeneratedSchema, Scalararsenumhash, context: Req,}); } Export * de ‘./schema.generated’;
Ahora puede guardar los cambios y cerrar el archivo index.ts. Ahora que tiene todas las piezas en su lugar, está listo para generar el esquema GraphQL. Paso 7: Ejecute el script El siguiente paso es agregar un script de generación al archivo paquete.json. Este script generará el esquema requerido basado en la estructura de su sitio de WordPress. Para agregar este script, navegue por la carpeta raíz del proyecto y abra el archivo paquete.json. Ahora puede agregar el script de generación al primer bloque de código: {“nombre”: “fause-headless-demo”, “versión”: “0.1.0”, “privado”: true, “scripts”: {“dev” : “Next Dev”, “Build”: “Next Build”, “Inicio”: “Next Start”, // Agregar lo siguiente // “Generar”: “Gqty Generate”}, antes de ejecutar este script, tendrá que temporalmente que Active la introspección pública para su sitio web. En el tablero de WordPress, navegue a GraphQL> Configuración. Luego desplácese en la activación de la introspección pública y marque la casilla de selección relacionada:


Haga clic en Guardar cambios. Ahora puede ejecutar el script de generación ingresando el siguiente comando en el terminal: npm ejecutado generado Este script creará un cliente/schema.generated.t. En este momento, puede deshabilitar la introspección pública en el tablero de WordPress. Paso 8: Defina un componente y un gancho FaustProvider Now, debe empacar la aplicación Next.js utilizando el componente Built -in . Este componente reacciona de orden superior le dará a Faust.js el contexto que necesita para hacerse cargo y almacenar los datos en caché. Para lograr esto, abra el archivo de páginas/_app.tsx del proyecto. Luego puede reemplazar su contenido con lo siguiente: import ‘../faust.config’; import ‘../styles/globals.css’; Tipo de importación {appProps/ *, appContext */} de ‘next/app’; Import {FaustProvider} de ‘@faustjs/next’; Import {cliente} de ‘../client’; Function myApp ({componente, pagprops}: appProps) {return ( ); } Exportar predeterminado myApp; Ahora está listo para interrogar datos del back-end de WordPress. Utilizará el gancho USPosts, que ofrece una interfaz estándar que adquiere una lista de publicaciones de WordPress WordPress sin cabeza. Abra las páginas/publicaciones. SX Director y elimine todo el código Lorem Lipsum. Luego puede implementar el gancho USPOSTS: import {Client} desde ‘../client’; Importar publicación de ‘../Components/Post’; Exportar función predeterminada postspage () {const {usePosts} = cliente; Const publica = usePosts ()?. Nodos; return (

mis publicaciones

{post.map ((post) => (<<

Post Key = {post.id} title = {post.title} content = {post.content} />))}
); } El archivo del esquema que generó exporta un tipo de publicación. Esto significa que puede usar este tipo para definir los accesorios del componente post. Para aceptar un Post Prop, abra el archivo componentes/post.tsx y agregue lo siguiente: import {post como postype} de ‘../client’; Exportar interfaz postprops {post: postype; } Exportar Post de función predeterminada (Props: PostProps) {const {post} = props; return (

{post.title ()}

); } Puede especificar si desea recibir el contenido renderizado o el contenido bruto. En el código anterior, opte por el contenido presentado. Paso 9: Conecte Faust.js a su sitio de WordPress El paso final es crear un enlace entre sus datos y el componente POST. Esto requiere agregar una sola línea de código al archivo post.tsx: … ….. {post.map ((post) => (// agregue la siguiente línea // ))} ); } Después de hacer estos cambios, cargue “http: // localhost: 3000/publicaciones” en el navegador. Ahora debería ver una lista de todas las publicaciones en su sitio web de WordPress: