Como Usar JAMStack en WordPress – Parte 1

Demo

Una arquitectura JAMStack es un buen complemento para WordPress.

De esta manera WordPress pasa a ser el administrador de los contenidos y sirve los contenidos mediante una API REST.

En este tutorial te enseñaré a Como Usar JAMStack en WordPress, vamos con ello.

Partes

  • Parte 1
  • Parte 2 (Final – GitHub)
Código de una web creada con WordPress y JAMStack
Las aplicaciones creadas sobre JAMStack son ágiles

API de WordPress

WordPress tiene por defecto una ruta o endpoint de API que lista todas las entradas:

# Endpoint de la API de WordPress 
https://tupagina.com/wp-json/wp/v2/posts/

Vamos a usar los contenidos de la API de WordPress y mostraremos esas entradas en la interfaz creada con JAMStack.

Creación de Nuevo Proyecto

Usaré la potente librería React para este proyecto.

Para crear el proyecto usaré la herramienta Vite JS, entonces ejecuto el siguiente comando para hacerlo (Le pongo de nombre wordpress-jamstack, tu le puedes colocar el nombre que desees):

npm create vite@latest

? Project name: » wordpress-jamstack

Elijo la opción React:

? Select a framework: » - Use arrow-keys. Return to submit.
    Vanilla
    Vue
>   React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others

√ Select a framework: » React

Elijo la variante JavaScript + SWC por las razones que explico en este artículo:

? Select a variant: » - Use arrow-keys. Return to submit.
    TypeScript
    TypeScript + SWC
    JavaScript
>   JavaScript + SWC
    Remix ↗

Select a variant: » JavaScript + SWC 

Scaffolding project in D:\xampp\htdocs\xampp\nc\tutoriales\blog\wordpress-jamstack...

Done. Now run:

  cd wordpress-jamstack
  npm install
  npm run dev

Se nos ha creado un directorio con el nombre del proyecto, es decir wordpress-jamstack.

Este directorio contiene varios directorios y archivos indispensables para que el proyecto funciones sin problemas:

/wordpress-jamstack   
    ├── /public
    ├── /src
    ├── .eslintrc.cjs
    ├── .gitignore 
    ├── index.html      
    ├── package.json 
    ├── README.md
    ├── vite.config.ts

Cuando ejecutamos el comando para crear el proyecto, debajo al final luego de elegir la opción JavaScript + SWC podemos ver que nos indica que debemos ejecutar 3 comandos, los ejecutamos en nuestra consola de comandos:

# Ingresamos al directorio del proyecto
cd wordpress-jamstack 

# Instalamos sus dependencias que trae consigo 
npm install 

# Iniciamos el servidor de desarrollo de Vue 
npm run dev 

vue-proyecto@0.0.0 dev
> vite

Forced re-optimization of dependencies

  VITE v4.3.3  ready in 380 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

Ahora ingreso a la ruta local de desarrollo de Vite JS: http://localhost:5173/ y podemos ver que el proyecto se ha creado correctamente:

Proyecto creado correctamente para integrar WordPress y JAMStack
Estoy usando React, tu puedes usar otro framework o librería

Consumiendo la API de WordPress con React

Primero abre el archivo functions.php de tu tema activo de WordPress y agrega lo siguiente:

// Mostrar la imagen destacada de las entradas en la API REST de WordPress 
add_action('rest_api_init', 'api_rest_imagenes' );
function api_rest_imagenes(){
    register_rest_field( array('post'),
        'fimg_url',
        array(
            'get_callback'    => 'obtener_imagen_destacada',
            'update_callback' => null,
            'schema'          => null,
        )
    );
}
function obtener_imagen_destacada( $object, $field_name, $request ) {
    if( $object['featured_media'] ){
        $img = wp_get_attachment_image_src( $object['featured_media'], 'app-thumb' );
        return $img[0];
    }
    return false;
}

Mediante el código anterior, podrás devolver la imagen destacada de cada entrada en la API REST, ya que por defecto no la incluye.

Ahora pasemos a consumir la API REST de WordPress con React JS.

El siguiente código esta basado en el tutorial llamado Como Consumir una API REST en React JS con Axios.

Abrimos el archivo App.js y comenzamos importando los siguientes elementos:

// Hoja de estilos CSS del proyecto 
import './App.css';

// Importamos los hooks useEffect y useState 
import { useEffect, useState } from 'react';

// Importamos axios 
import axios from 'axios';

Luego en la función App() realizamos lo siguiente:

// Función principal 
function App() {

  // Iniciamos el estado de 'pos' y la función setPost() para actualizarlo 
  const [post, setPost] = useState([]);

  // Obtenemos las entradas de la API de WordPress 
  const fetchData = () => {
    return axios.get("https://tupagina.com/wp-json/wp/v2/posts/")
    
    // Recibimos los datos de la API
    .then((response) => setPost(response.data));
  }

  // Pasamos los datos de la API a la interfaz 
  useEffect(() => {
    fetchData();
  }, [])

En el método return creamos el contenedor HTML para las entradas.

Y recorremos los datos en JSON que nos brindo la API de WordPress:

return (
    <div className="App">

      <div className="main" role="main">

      <h1>Artículos de WordPress</h1>

        <p>
          Usando Tecnología JAMStack (Netlify)
        </p>

        <div className="container">

            <div className="row">
              
              {post && post.length > 0 && post.map((postObj, index) => (         

              <div key={postObj.id} className="card col-md-4 m-1" style={{width: "18rem"}}>
                <img src={postObj.fimg_url} className="card-img-top" alt="..."/>
                <div className="card-body">
                  <h5 className="card-title">{postObj.title.rendered}</h5>
                  <a href={postObj.slug} className="btn btn-primary">Leer más</a>

                </div>
              </div>

              ))}
            
            </div>

        </div>

        <footer className="footer footer-1 bg-gray-100 py-8 sm:py-12 text-center mt-3">
          <div className="container mx-auto">
            <p>©Mi Proyecto<script>document.write(new Date().getFullYear())</script>. Todos los derechos reservados.</p>        
            <p>
              Creado por <a href="https://nubecolectiva.com" target="_blank">nubecolectiva.com</a> 
            </p>
          </div>
        </footer>

      </div>

    </div>
  );
}

export default App;

Fíjate que para imprimir el titulo de la entrada en realizado lo siguiente:

# Obtener el titulo de la entrada de WordPress 
{postObj.title.rendered}

A continuación el código completo del archivo App.js:

//import logo from './vite.svg';

// Hoja de estilos CSS del proyecto 
import './App.css';

// Importamos los hooks useEffect y useState 
import { useEffect, useState } from 'react';

// Importamos axios 
import axios from 'axios';

// Función principal 
function App() {

  // Iniciamos el estado de 'pos' y la función setPost() para actualizarlo 
  const [post, setPost] = useState([]);

  // Obtenemos las entradas de la API de WordPress 
  const fetchData = () => {
    return axios.get("https://tupagina.com/wp-json/wp/v2/posts/")
    
    // Recibimos los datos de la API
    .then((response) => setPost(response.data));
  }

  // Pasamos los datos de la API a la interfaz 
  useEffect(() => {
    fetchData();
  }, [])
  

  return (
    <div className="App">

      <div className="main" role="main">

      <h1>Artículos de WordPress</h1>

        <p>
          Usando Tecnología JAMStack (Netlify)
        </p>

        <div className="container">

            <div className="row">
              
              {post && post.length > 0 && post.map((postObj, index) => (         

              <div key={postObj.id} className="card col-md-4 m-1" style={{width: "18rem"}}>
                <img src={postObj.fimg_url} className="card-img-top" alt="..."/>
                <div className="card-body">
                  <h5 className="card-title">{postObj.title.rendered}</h5>
                  {/* <p className="card-text" dangerouslySetInnerHTML={{ __html: postObj.excerpt.rendered }}></p> */}               
                  
                  <a href={postObj.slug} className="btn btn-primary">Leer más</a>

                </div>
              </div>

              ))}
            
            </div>

        </div>

        <footer className="footer footer-1 bg-gray-100 py-8 sm:py-12 text-center mt-3">
          <div className="container mx-auto">
            <p>©Mi Proyecto<script>document.write(new Date().getFullYear())</script>. Todos los derechos reservados.</p>        
            <p>
              Creado por <a href="https://nubecolectiva.com" target="_blank">nubecolectiva.com</a> 
            </p>
          </div>
        </footer>

      </div>

    </div>
  );
}

export default App;

Estoy usando Bootstrap 5 para la interfaz de usuario.

Inicio el servidor de desarrollo de Vite JS con el siguiente comando:

npm run dev

> wordpress-jamstack@0.0.0 dev
> vite


  VITE v5.2.11  ready in 611 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

Y obtengo los datos de la API REST de WordPress con las entradas correspondientes:

Entradas de la API de WordPress obtenidas con React JS
Es importante limitar la carga de datos en WordPress, para evitar la sobrecarga del servidor

Hasta aquí hemos creado el proyecto y hemos llamado a los datos de la API REST de WordPress.

Ten Paciencia, lo que quiero es que entiendas bien como se crea este proyecto y no llenarte el capitulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje.

Nota (s)

  • En la siguiente parte terminaremos de crear el proyecto.
  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.