Sitios WordPress más rápidos con Gatsby

Si hablamos de las tecnologías web más avanzadas, encontramos nombres impresionantes como React.js, Vue.js, Next.js, etc., que han abierto nuevas puertas y enfoques para crear sitios web que puedan ofrecer contenido a los usuarios rápidamente.

Un marco que puede aumentar la velocidad general del sitio y los tiempos de carga es Gatsby.js.

Objetivos de un sitio web rápido

Un sitio web que se carga rápidamente implica las siguientes ventajas y beneficios para los desarrolladores:

• Tráfico y participación : obtienes más visitantes en un sitio rápido, lo que se traduce en un mejor ROI y participación del usuario.
• Page Ranks : los sitios web rápidos obtienen clasificaciones más altas en el navegador.

Mejorar la velocidad del sitio con Gatsby.js y WordPress

Gatsby.js es un framework gratuito y de código abierto basado en React.js que ayuda a los desarrolladores a crear sitios web y aplicaciones. Forma parte de una tendencia general hacia los sitios JAMstack (marcado de API de JavaScript), que tienen como objetivo aumentar la velocidad general del sitio y los tiempos de carga.

Pero, ¿dónde encaja Gatsby con WordPress, una de las opciones de CMS más utilizadas en la actualidad? A pesar de su facilidad de uso y su sólida comunidad, WordPress puede plantear desafíos a la hora de crear una interfaz moderna por las siguientes razones:

• Actualizaciones y cambios : WordPress se actualiza periódicamente, pero aún no está a la altura de otras tecnologías de interfaz de usuario que cambian rápidamente. Mantenerse actualizado con estas tecnologías supone una carga adicional para el desarrollador.
• Integración e implementación continuas : en este momento, existen pocas opciones de integración/implementación continua (CI/CD) en el ecosistema de WordPress.
• Costos de integración : puede resultar un desafío integrar algunas de las últimas tecnologías front-end con una aplicación de WordPress.

El uso de Gatsby puede solucionar algunas de estas limitaciones. En los siguientes pasos, le mostraremos cómo integrar Gatsby con WordPress para aprovechar al máximo ambos. Primero, configuraremos un proyecto básico de Gatsby. Luego, lo usaremos para obtener datos de nuestro sitio de WordPress.

Integración de Gatsby.js con WordPress

Primero, configuraremos un proyecto de demostración de Gatsby.

Instale Gatsby CLI escribiendo el siguiente comando en su terminal:

npm install -g gatsby-cli

A continuación, cree un nuevo sitio Gatsby con el siguiente comando:

gatsby new site-name

Para acceder al contenido de la carpeta de su sitio, escriba lo siguiente:

cd site-name

Por último, inicie el servidor de desarrollo para comenzar a construir su sitio:

gatsby develop

Instalación del gatsby-source-wordpresscomplemento

Suponiendo que ya tienes un sitio de WordPress configurado y te gustaría tener una interfaz creada con Gatsby.js, todo lo que necesitas hacer es extraer los datos de tu sitio existente a tu sitio estático de Gatsby. Puedes hacerlo con el gatsby-source-wordpresscomplemento.

Este tutorial utiliza el sitio API REST de WordPress predeterminado, aunque usted puede utilizar una configuración de WordPress preexistente si tiene una.

Dentro de tu terminal, escribe lo siguiente para instalar este complemento:

npm install gatsby-source-wordpress

Configurando el Plugin

Dentro de su gatsby-config.jsarchivo, el archivo de configuración principal de Gatsby, agregará algunas opciones de configuración específicas de WordPress. Estas incluyen el sitio de WordPress baseUrl, el HTTP preferido protocoly las configuraciones relacionadas con el complemento Advanced Custom Fields (ACF). Los includedRoutescampos especifican los datos que queremos obtener.

Usando el sitio de demostración de WordPress del paso anterior, la interfaz actual se ve así:

Para los fines de este tutorial, agregue el siguiente código a un archivo llamado gatsby-config.js:

module.exports = {  // ...  plugins: [    // ...    {        resolve: `gatsby-source-wordpress`,        options: {            // Your WordPress source.            baseUrl: `demo.wp-api.org`,            protocol: `https`,            // Only fetches posts, tags and categories from the baseUrl.            includedRoutes: ['**/posts', '**/tags', '**/categories'],            // Not using ACF so putting it off.            useACF: false        }    },  ],}

Uso de los datos obtenidos de WordPress

Una vez que su sitio Gatsby obtiene datos de la URL de origen de WordPress, es momento de crear las páginas de su sitio. Esto se hace implementando la createPagesAPI en el gatsby-node.jsarchivo, lo que hace que los datos obtenidos estén disponibles para consultas desde GraphQL. En el momento de la compilación, el gatsby-source-wordpresscomplemento obtiene sus datos y los usa para "inferir automáticamente un esquema GraphQL" en el que puede realizar consultas.

Agregue el siguiente código a un archivo llamado gatsby-node.js:

/** * Implement Gatsby's Node APIs in this file. * * See: https://www.gatsbyjs.org/docs/node-apis/ */// You can delete this file if you're not using itconst path = require(`path`);const slash = require(`slash`);/** STEP #1: Implement the Gatsby API “createPages”. This is * called after the Gatsby bootstrap is finished so you have * access to any information necessary to programmatically * create pages. * Will create pages for WordPress pages (route : /{slug}) * Will create pages for WordPress posts (route : /post/{slug}) */exports.createPages = async ({ graphql, actions }) = {const { createPage } = actions;// STEP #2: Query all WordPress Posts Data./** The “graphql” function allows us to run arbitrary * queries against the local Gatsby GraphQL schema. Think of * it like the site has a built-in database constructed * from the fetched data that you can run queries against. */const result = await graphql(`{allWordpressPost {edges {node {idslugstatustemplateformat}}}}`);// Check for any errorsif (result.errors) {throw new Error(result.errors);}// Access query results via object destructuring.const { allWordpressPost } = result.data;const postTemplate = path.resolve(`./src/templates/post.js`);// STEP #3: Create pages in Gatsby with WordPress Posts Data./** * We want to create a detailed page for each * post node. We'll just use the WordPress Slug for the slug. * The Post ID is prefixed with 'POST_' */allWordpressPost.edges.forEach(edge = {createPage({path: `/${edge.node.slug}/`,component: slash(postTemplate),context: {id: edge.node.id}});});};

Esto iterará a través de los datos de publicaciones existentes de WordPress.

Paso n.° 4: creación de una post.jsplantilla

A continuación, crearemos una carpeta para plantillas, donde podrás agregar archivos para publicaciones, páginas y diseños. Por ahora, crearemos un post.jsarchivo para obtener publicaciones de nuestro sitio de WordPress.

Añade el siguiente código al archivo:

import { graphql } from 'gatsby';import PropTypes from 'prop-types';import React, { Component } from 'react';import Layout from '../layouts';class PostTemplate extends Component {render() {const post = this.props.data.wordpressPost;// STEP #5: Use title and content in Gatsby.return (Layouth1 dangerouslySetInnerHTML={{ __html: post.title }} /div dangerouslySetInnerHTML={{ __html: post.content }} //Layout);}}PostTemplate.propTypes = {data: PropTypes.object.isRequired,edges: PropTypes.array};export default PostTemplate;// STEP #4: Get current WP Post data via ID.export const pageQuery = graphql`query($id: String!) {wordpressPost(id: { eq: $id }) {titlecontent}}`;

Analizando el resultado final

Para iniciar el servidor de desarrollo y ver el resultado final, escriba el siguiente comando en su terminal:

npm start

Recibirá el enlace donde podrá acceder al sitio localmente, junto con otros detalles como la cantidad de posts, categories, y tagsque se están obteniendo.

Aquí hay un GIF que demuestra cómo se verá esto:

Echemos un vistazo a este front-end renovado que ahora funciona con Gatsby.js y un back-end de WordPress:

Puedes ver cómo nuestra aplicación solo obtiene los datos necesarios del sitio de WordPress. Esto incluye posts, tagsy categories. Para recuperar otros tipos de datos, como widgets o comentarios, deberás agregar los valores adecuados a la includedRoutesopción.

Conclusión

Si sigue este tutorial, ahora tendrá una aplicación de WordPress integrada con una interfaz de usuario de Gatsby.js. Gatsby ofrece una experiencia web rápida y trae consigo beneficios adicionales que pueden mejorar su sitio de WordPress existente. Ahora tiene una plataforma para experimentar más con el uso de Gatsby para impulsar su sitio.