Crea un tema para WordPress usando React con Frontity TypeScript y Vite

Tiempo de lectura: 2 minutos

Hoy vamos a aprender cómo podemos crear un tema para WordPress usando React, TypeScript y Frontity. Además, vamos a añadir Vite por debajo que nos permitirá desplegar más rápido nuestra APP.

Frontity es el framework que te permite conectar tu aplicación de React con WordPress, aprovechando su API REST o GraphQL para obtener y mostrar el contenido.

Puedes instalar Frontity utilizando npm (Node Package Manager), que es una herramienta para instalar paquetes de Node.js y JavaScript en general. Aquí tienes los pasos para instalar Frontity:

1. Instalar Node.js y npm: Si aún no tienes Node.js y npm instalados en tu sistema, necesitarás descargarlos e instalarlos. Puedes descargarlos desde el sitio web oficial de Node.js: https://nodejs.org/.
2. Crear un Nuevo Proyecto de Frontity: Una vez que tengas Node.js y npm instalados, puedes crear un nuevo proyecto de Frontity utilizando el siguiente comando en tu terminal:

   npx frontity create my-theme --typescript

Esto creará un nuevo proyecto de Frontity en un directorio llamado my-theme.

Ahora nos pide que plantilla de tema queremos de referencia, en mi caso voy a elegir mars-theme:

Una vez instalado, vamos a configurar el proyecto con vite.

Para ello vamos a frontity.settings.ts y añadimos:

  "builder": {
    "type": "vite", 
  },

Instalar Dependencias Adicionales: Después de crear el proyecto, asegúrate de navegar al directorio de tu tema (my-theme) y ejecutar el siguiente comando para instalar todas las dependencias necesarias:

   cd my-theme
   npm install

Una vez que hayas completado estos pasos, tendrás Frontity instalado en tu sistema y podrás comenzar a desarrollar tu tema para WordPress utilizando React con Frontity y Vite como entorno de desarrollo.

Para probar el tema que usaremos de plantilla pondremos:

npm run dev

Ahora ejecutará el entorno de prueba. Si queremos que cargue el contenido de nuestro WordPress, tendremos que poner nuestra URL de WordPress en frontity.settings.ts:

{
      "name": "@frontity/wp-source",
      "state": {
        "source": {
          "url": "https://www.tuURLWordpress.com"
        }
      }
    },

*Cambia www.tuURLWordpress.com por la URL de tu WordPress