Como Usar JAMStack en WordPress – Parte 1

5 minuto(s)

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/

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):


npm create vite@latest

? Project name: » wordpress-jamstack

1

2

3

4

5

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

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:


? 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

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:


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

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:


# 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

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:

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;
}

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.

Puedes usar Angular, Vue JS, Svelte y otra herramienta de tu elección.

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';

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:


// 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();
  }, [])

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:


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;

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:


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

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:


//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;

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:


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

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:

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.

Conoce Los 5 Mejores Frameworks JAMStack del Mundo.

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.

JAMStack
05-05-2024
16-05-2024
Crear un Post - Eventos Devs - Foro

Todas Nuestras Páginas y Categorías:

Agile Android Android Studio Angular Anuncios Apache Cassandra API REST APIs Apple WWDC Arduino Arq. de Software Articulos Axios Backend Bases de Datos Blockchain Bootstrap C# CDNs Chrome Dev Tools Ciberseguridad Cloud Computing CSS DApps Dart Data Mining Data Science (Ciencia de Datos) DevOps Devs Devs Hardware Django Docker Editores de Código Electron JS Entretenimiento Eventos Dev Experimental Firebase Flutter Frontend Game Dev Gin Git GitHub GitOps Google IO GraphQL Hacking Ético HTML 5 Inteligencia Artificial Ionic iOS JAMStack Java JavaScript jQuery Kotlin Kubernetes Laravel Linux Machine Learning Marketing Digital Material Design Micro Frontend MongoDB Móvil MS SQL Server MySQL News NFT Node JS Oracle DB Pentesting PHP PostgreSQL Premium Principal Python Ranking BD Ranking Lenguajes Raspberry Pi React JS React Native Recursos Redis Ruby Ruby on Rails Rust Seguridad SEO Servidores Social Media Socket IO Spring SQL SQLite Stack Overflow Svelte Swift Tailwind CSS Tecnología Tendencias GitHub Testing Tutoriales Tutoriales de Go TypeScript UI Unicode Unity UX Vite JS VPS Vue JS Web 3.0 Wordpress

Partners

Utilizamos cookies para proporcionar y mejorar nuestros servicios. Al navegar por nuestro sitio, usted acepta las cookies. Política de Cookies | Política de Privacidad