En esta página:
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)
API de WordPress
WordPress tiene por defecto una ruta o endpoint de API que lista todas las entradas:
|
1 2 3 4 |
# 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):
|
1 2 3 4 5 |
npm create vite@latest ? Project name: » wordpress-jamstack |
Elijo la opción React:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
? 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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
? 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:
|
1 2 3 4 5 6 7 8 9 10 11 |
/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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
# 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:
Consumiendo la API de WordPress con React
Primero abre el archivo functions.php de tu tema activo de WordPress y agrega lo siguiente:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// 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:
|
1 2 3 4 5 6 7 8 9 10 |
// 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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// 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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
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:
|
1 2 3 4 |
# Obtener el titulo de la entrada de WordPress {postObj.title.rendered} |
A continuación el código completo del archivo App.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
//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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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:
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.