Tutoriales WordPress

Cómo Crear una Aplicación Web de WordPress con Frontity (en 4 Sencillos Pasos)

Un sistema de gestión de contenidos (CMS) sin cabeza (Headless CMS) puede darle un mayor control sobre su presencia en línea. Sin embargo, tendrá que crear una interfaz para que los usuarios puedan interactuar con él. Aquí es donde una configuración “sin cabeza” puede volverse rápidamente mucho más complicada que un constructor de sitios web tradicional.

Afortunadamente, existen frameworks que pueden ayudarle a crear un hermoso front-end para su configuración de WordPress sin cabeza. Aquí es donde entra Frontity. Diseñado específicamente con WordPress en mente, este framework React tiene mucho que ofrecer a tu sitio web o aplicación web sin cabeza.

En este artículo, exploraremos qué es este framework y por qué podrías querer usarlo. Luego te mostraremos cómo construir, personalizar y publicar una aplicación web de WordPress utilizando Frontity. ¡Empecemos!

Una introducción a Frontity (y por qué podrías querer usarlo)

El framework Frontity te permite construir un front end basado en React para tu sitio web. Esto hace que Frontity sea particularmente popular entre los desarrolladores que buscan configurar un sitio web de WordPress sin cabeza.

Como parte de este entorno headless, desacoplarás WordPress de su front-end. Esto deja sólo su base de datos, el panel de administración y sus herramientas de gestión de contenidos.

Al ir sin cabeza, tendrá la libertad de diseñar y construir su propio front-end, independientemente de las restricciones habituales de WordPress. Incluso puedes utilizar el back-end de WordPress en nuevos contextos, como una aplicación de página única (SPA) o una aplicación móvil.

Cuando construyas un front end usando Frontity, este framework consumirá tus datos a través de la API REST. A continuación, presentará estos datos como una SPA.

Las SPA son distintas de los sitios web tradicionales, ya que los visitantes no tienen que navegar de una página a otra. En su lugar, Frontity reescribirá dinámicamente la misma página con los nuevos datos que recupere del servidor. Esto puede reducir los tiempos de carga de la página.

Frontity también responde a las solicitudes con un archivo HTML completamente lleno. Esto reduce específicamente el tiempo requerido para la primera pintura del contenido, lo que puede tener un impacto dramático en los tiempos de carga percibidos de la página.

Este aumento del rendimiento es excelente para la experiencia del visitante. Los estudios sugieren que el usuario típico de Internet es impaciente, ya que el 40% de las personas abandonan un sitio web que tarda más de tres segundos en cargarse.

Al reducir los tiempos de carga de su página, puede animar a los visitantes a pasar más tiempo en su sitio web, lo que ayudará a impulsar las conversiones. También puede experimentar un impulso en la optimización de motores de búsqueda (SEO), ya que Google ha confirmado que utiliza la velocidad de la página como un factor de clasificación.

Cómo construir una aplicación web de WordPress usando Frontity (en 4 pasos)

Para construir una aplicación web usando Frontity, necesitarás una instalación de WordPress. Puedes alojarlo en un servidor web o alojarlo localmente.

También ejecutaremos los comandos de Frontity utilizando Node.js. Si aún no tienes instalado este entorno de ejecución, puedes descargarlo e instalarlo desde el sitio web oficial. Con esta configuración fuera del camino, estás listo para construir una aplicación web.

Paso 1: Crear un nuevo proyecto Frontity

Se interactúa con Frontity desde la línea de comandos, por lo que hay que empezar lanzando el símbolo del sistema (Windows) o la terminal (macOS). A continuación, puedes crear un proyecto Frontity con el siguiente comando: npx frontity create my-project.

Esto crea un proyecto llamado my-project. Frontity te pedirá entonces que elijas un tema para tu front-end:

Como es el tema de inicio de Frontity, vamos a utilizar Mars. Haz tu selección y Frontity clonará tu tema y creará un directorio local con todos los archivos y dependencias necesarios:

Vamos a editar estos archivos desde la línea de comandos. Esto significa que tienes que cambiar de directorio (cd) para que el Terminal o el Símbolo del sistema apunte al directorio raíz de tu proyecto. Por defecto, Frontity crea los proyectos en tu directorio de usuarios, por lo que tu comando debería ser algo así: cd /users/my-project.

Para iniciar el desarrollo, ejecuta el siguiente comando: npx frontity dev. Ahora se abrirá una nueva página en tu navegador web:

Por defecto, Frontity muestra contenido de demostración. Actualicémoslo para extraer los datos de nuestro back end de WordPress.

Paso 2: Conectar Frontity a WordPress

Puedes conectar Frontity a tu back end de WordPress editando el archivo frontity.settings.js en cualquier editor de texto:

Por defecto, este archivo hace referencia a la siguiente URL: https://test.frontity.org/wp-json. Para mostrar su propio contenido, sustituya este marcador de posición por la dirección de su instalación de WordPress y añada la extensión wp-json. Por ejemplo, si su back-end de WordPress se encuentra en https://mysite.com, deberá utilizar https://mysite.com/wp-json.

Después de hacer este cambio, guarde su archivo. En su navegador web, haga clic en el botón Actualizar. La página debería actualizarse para mostrar el contenido extraído directamente de su back-end de WordPress.

En este punto, el menú de Mars todavía contiene algún contenido de demostración. Si los visitantes van a navegar por su sitio web, tendrá que reemplazar estos enlaces de marcador de posición.

En el archivo frontity.settings.js, encuentre la sección de paquetes. Esta sección define el menú de tu sitio web:

Ahora puede sustituir cada enlace por su propio contenido. Por ejemplo, si quieres enlazar con https://mysite.com/contact, utilizarías lo siguiente:

"packages": [
{
"name": "@frontity/mars-theme",
"state": {
"theme": {
"menu": [
[
"Contact",
"/contact/"
],
...
...
...
]
],

Aclara y repite para añadir más enlaces a tu menú. Cuando esté satisfecho con la información que ha introducido, guarde los cambios y actualice el navegador. El menú debería incluir ahora enlaces a todas las páginas que hayas especificado.

Paso 3: Personalizar el tema de Frontity

Quizás la mayor ventaja asociada a la arquitectura headless de WordPress es la libertad de diseñar tu propio front end. Con Frontity, puedes personalizar tu front-end editando los archivos del tema. Los encontrarás en el directorio packages/mars-theme de tu proyecto:

Hay muchas formas de personalizar tu front end, pero vamos a empezar con algo sencillo. En esta sección, cambiaremos el color de la fuente utilizada en el componente de la cabecera. Para hacer este cambio, navega a packages/mars-theme/src/components. Ahora puedes abrir el archivo header.js para editarlo.

En HTML, los colores se definen mediante códigos de color. En su editor de texto, busque la siguiente sección:

const Container = styled.div`
width: 848px;
max-width: 100%;
box-sizing: border-box;
padding: 24px;
color: #fff;
display: flex;
flex-direction: column;
justify-content: space-around;
`;

Podemos ver que el código de color de la cabecera es #fff. Por eso el texto aparece en blanco. Puede cambiar el color de la fuente sustituyendo #fff por el código de color HTML que desee. Por ejemplo, puede convertir el texto de la cabecera en amarillo:

Después de hacer este cambio, guarde su archivo de texto y actualice su navegador. La cabecera debería actualizarse para reflejar el nuevo código de colores. Merece la pena dedicar algo de tiempo a explorar los distintos archivos temáticos para ver los diferentes efectos que puede crear.

Paso 4: Publica tu proyecto

Una vez que esté satisfecho con su front-end, puede desplegar su proyecto Frontity en producción. Para crear un paquete listo para la producción, ejecute el siguiente comando en su terminal o ventana del símbolo del sistema: npx frontity build.

Esto generará una carpeta de construcción en el directorio raíz del proyecto. Esta carpeta contiene tu aplicación React y un servidor Node.js:

Puedes desplegar esta carpeta de construcción en cualquier solución de alojamiento que sea capaz de servir una aplicación Node.js. Por ejemplo, puedes ejecutar tu proyecto como una aplicación Node.js estándar, utilizando el siguiente comando: npx frontity serve.

Alternativamente, puedes desplegar tu proyecto usando AWS Lambda, Netlify, o Google Functions. Sin embargo, si buscas una solución sin servidor, el equipo de Frontity recomienda Vercel.

Si quieres seguir la recomendación de Frontity, tendrás que crear una cuenta Vercel y ejecutar el siguiente comando: npx vercel login. Cuando se te pida, introduce tus credenciales de inicio de sesión de Vercel.

A continuación, crea un archivo vercel.json en el directorio raíz de tu proyecto. Dentro de este archivo, añade lo siguiente:

{
"version": 2,
"builds": [
{
"src": "package.json",
"use": "@frontity/now"
}
]
}

Después de guardar su archivo vercel.json, ejecute el siguiente comando: npx vercel. Cuando se le pida, opte por configurar y desplegar su proyecto.

Ahora puedes elegir el alcance de tu proyecto y si vas a desplegarlo en un proyecto existente. Si vas a desplegar un proyecto nuevo, puedes darle un nombre descriptivo. También tendrás que especificar el directorio local donde se encuentra este proyecto.

Una vez que hayas introducido esta información, Vercel asignará a tu proyecto una URL y una URL de configuración del proyecto. La URL de configuración lanza la consola de Vercel, donde puedes realizar tareas como añadir más dominios a tu despliegue. Eso es todo: ¡tu aplicación web ya está en marcha!

Conclusión

Cuando está construyendo una interfaz para su CMS sin cabeza, es fácil quedar atrapado en las complejidades. Al optar por un marco que está optimizado para React y WordPress, puede avanzar rápidamente a través de gran parte de esta configuración y pasar directamente a lo divertido: construir su interfaz.

Si decides crear tu interfaz utilizando el marco Frontity, sólo tienes que seguir estos cuatro sencillos pasos:

  1. Crea un nuevo proyecto Frontity.
  2. Conecta Frontity a WordPress.
  3. Personaliza el tema de Frontity.
  4. Publica tu proyecto.

¿Tienes alguna pregunta sobre el marco Frontity? Háganoslo saber en la sección de comentarios más abajo.

Publicidad

Síguenos en Facebook