Cómo crear una aplicación web de WordPress con Frontity (en 4 pasos simples)

Un sistema de gestión de contenido (CMS) sin cabeza puede brindarle un mayor control sobre su presencia en línea. Sin embargo, deberá crear un frente final, para que los usuarios puedan interactuar con él. Aquí una configuración sin cabeza puede volverse mucho más complicada que un constructor de sitios web tradicional. Afortunadamente, hay marcos que pueden ayudarlo a crear un buen front-end para su configuración de WordPress sin cabeza. Aquí es donde interviene la frontera. Diseñado especial para WordPress, este marco React tiene mucho que ofrecer su sitio web o la aplicación web sin cabeza.
En este artículo, exploraremos qué es este marco y por qué es posible que desee usarlo. Luego le mostraremos cómo crear, personalizar y publicar una aplicación web de WordPress usando Frontity. ¡Vamos a empezar! Una introducción a la frontera (y por qué es posible que desee usarlo), el marco de la frontera le permite construir un frente basado en el extremo para su sitio. Esto hace que la frontidad sea particularmente popular entre los desarrolladores que desean crear un sitio web sin cabeza de WordPress. Como parte de este entorno sin cabeza, cortará el front-end WordPress. Esto sigue siendo solo la base de datos, la junta administrativa y las herramientas de gestión de contenido.
Si te quedas con la cabeza, tendrás la libertad de diseñar y construir tu propio frente frontal, independientemente de las limitaciones habituales de WordPress. Incluso puede usar WordPress Back-end en nuevos contextos, como una aplicación de una sola página (SPA) o móvil. Cuando construye un front-end usando la frontera, este marco consumirá sus datos a través de la API REST. Luego jugará estos datos como spa. Los SPA son distintos de los sitios web tradicionales, porque los visitantes no están obligados a navegar de una página a otra. En cambio, Frontity reescribirá dinámicamente la misma página con nuevos datos que toma del servidor. Esto puede reducir los tiempos de carga de la página. Además, Frontity responde a las solicitudes con un archivo HTML totalmente poblado. Esto reduce específicamente el tiempo requerido para la primera pintura llena de contenido, lo que puede tener un impacto dramático en los tiempos de carga de tiempo percibidos. Este aumento de rendimiento es excelente para la experiencia del visitante. Los estudios sugieren que el usuario habitual de Internet es impaciente, el 40% de las personas que abandonan un sitio web que dura más de tres segundos para cobrar. Al reducir los tiempos de carga de la página, puede alentar a los visitantes a pasar más tiempo en su sitio web, lo que ayudará a generar la conversión. También es posible experimentar un aumento en la optimización de los motores de búsqueda (SEO), ya que Google ha confirmado que utiliza la velocidad de la página como factor de clasificación.
Cómo crear una aplicación web de WordPress utilizando Frontity (en 4 pasos) para crear una aplicación web usando Frontity, necesitará una instalación de WordPress. Puede alojarlo en un servidor web o alojarlo localmente. También ejecutaremos los comandos de frontidad usando node.js. Si aún no tiene este entorno en ejecución, puede descargarlo e instalarlo desde el sitio oficial. Con esta configuración en la carretera, está listo para crear una aplicación web. Paso 1: Cree un nuevo proyecto de frontidad interactúe con Frontity en la línea de comandos, por lo que comenzar al iniciar el símbolo del sistema (Windows) o el terminal (macOS). Luego puede crear un proyecto de frontidad, utilizando el siguiente comando: NPX Frontity Create My-Project. Esto crea un proyecto llamado My-Project. Frontity luego le pedirá que elija un tema frontal:
Debido a que es el tema inicial de Frontity, usaremos Marte. Hacer su selección y frontidad clonará su tema y creará un directorio local que contenga todos los archivos y adicciones necesarios:
Editaremos estos archivos desde la línea de comando. Esto significa que debe cambiar el director (CD) para que el terminal o símbolo del sistema indique el director raíz del proyecto. Por defecto, Frontity crea proyectos en su directorio de usuario, por lo que su pedido debe verse así: CD /Users /My-Project.

Para comenzar el desarrollo, ejecute el siguiente comando: NPX Frontity Dev. Una nueva página ahora se abrirá en su navegador web:

Por defecto, Frontity muestra contenido demostrativo. Actualicemos para extraer datos de nuestro back-end de WordPress. Paso 2: Conecte la frontera a WordPress Puede conectar Frontity al back-end de WordPress editando la frontera.settings.js en cualquier editor de texto: Por defecto, este archivo se refiere a la siguiente url: https: // test .org /WP-JSON. Para mostrar su propio contenido, reemplace este sustituto con su dirección de instalación de WordPress, luego agregue la extensión WP-JSON. Por ejemplo, si su back-end de WordPress está en https://mysite.com, usará https://mysite.com/wp-json.
Después de hacer este cambio, guarde el archivo. En su navegador web, haga clic en el botón Actualizar. La página debe actualizarse ahora para mostrar el contenido de Contenido directo directo desde el back-end de WordPress.

En este momento, el menú Marte todavía contiene contenido demostrativo. Si los visitantes navegan por su sitio, deberá reemplazar estos enlaces sustitutos. En el archivo f rontity.settings.js, busque la sección del paquete. Esta sección define el menú de su sitio:

Ahora puede reemplazar cada enlace con su propio contenido. Por ejemplo, si desea iniciar sesión en https://mysite.com/contact, usaría lo siguiente:
“Paquetes”: [{“Nombre”: “@Frontity/Mars-Theme”, “Estado”: {“Tema”: {“menú”: [“Contact”, “/Contact/”], …. .. …]], enjuague y repita para agregar más enlaces a su menú una vez que esté satisfecho con la información que ha ingresado, guarde los cambios y actualice el navegador. El menú ahora debe incluir enlaces a todas las páginas especificadas. Paso 3: Personalice el tema de la parte frontal, quizás la mayor ventaja asociada con la arquitectura de WordPress sin cabeza es la libertad de diseñar su propio frente. Con Frontity, puede personalizar su front-end editando los archivos de temas. Los encontrará en el director de los paquetes/tema de su proyecto: hay muchas maneras en que puede personalizar su front-end, pero comencemos con algo simple. En esta sección, cambiaremos el color de la fuente utilizada en el encabezado. Para hacer este cambio, explore paquetes/mars-theme/src/componentes. Ahora puede abrir el archivo Header.js para la edición. En HTML, los colores se definen usando códigos de color. En el editor de texto, encuentre la siguiente sección: const contenedor = styled.div` ancho: 848px; MAX-ANCHO: 100%; Tamaño de caja: border-box; Relleno: 24px; Color: #fff; Pantalla: Flex; Dirección flexible: columna; Justify-Contando: espacial; `; Podemos ver que el código de color para el encabezado es #fff. Por eso el texto parece blanco. Puede cambiar el color de la fuente reemplazando #FFF con el código de color HTML de su elección. Por ejemplo, puede convertir la cabeza del encabezado en amarillo:

Después de este cambio, guarde el archivo de texto y actualice el navegador. El encabezado debe actualizarse ahora para reflejar el nuevo código de color. Vale la pena pasar algún tiempo explorando los diferentes archivos con temas para ver qué diferentes efectos puede crear. Paso 4: Publique su proyecto Una vez que esté satisfecho con el front-end, puede implementar el proyecto frontal en producción. Para crear un paquete preparado para la producción, ejecute el siguiente comando en el terminal o orden de pedido: NPX Frontity Build. Esto generará un archivo construir su proyecto en el director raíz. Esta carpeta contiene su aplicación React y un servidor Node.js: puede implementar esta compilación de archivos en cualquier solución de alojamiento que pueda servir a una aplicación Node.js Por ejemplo, puede ejecutar su proyecto como una aplicación Node.js estándar, utilizando el siguiente comando: NPX Frontity Serva. Alternativamente, puede implementar su proyecto utilizando las funciones AWS Lambda, Netlify o Google. Sin embargo, si está buscando una solución libre de servidor, entonces el equipo de Frontity recomienda a VERCE. Si desea seguir la recomendación de Frontality, deberá crear una cuenta de Vercel y ejecutar el siguiente pedido: NPX VERCEL CIGRA. Cuando se le solicite, ingrese sus datos de inicio de sesión de Vercel. Luego cree un archivo Vercel.json en el directorio raíz del proyecto. Dentro de este archivo, agregue lo siguiente: {“Versión”: 2, “construye”: [{“src”: “paquete.json”, “use”: “@frontity/now”

}]} Después de guardar el archivo Vercel.json, ejecute el siguiente comando: NPX VERCEL. Cuando se le solicite, elija configurar e implementar su proyecto. Ahora puede elegir el alcance del proyecto y si se implementa en un proyecto existente. Si implementa un nuevo proyecto, puede darle un nombre descriptivo. También deberá especificar el director local en el que es este proyecto. Después de ingresar esta información, Verce asignará a su proyecto una URL y una URL para la configuración del proyecto. La URL de la configuración inicia la consola Vercel, donde puede realizar tareas como agregar varias áreas a su implementación. ¡Esta es todo su aplicación web ahora está en vivo! Conclusión Al construir un frente final para su CMS sin cabeza, es fácil ser atrapado en complejidades. Al optar por un marco que esté optimizado para React y WordPress, puede avanzar rápidamente en esta configuración y puede moverse directamente a las cosas divertidas que construyen el front-end. Si decide crear su interfaz utilizando el marco de la frontera, siga estos cuatro pasos simples: cree un nuevo proyecto de frontidad.
Conecte la frontera a WordPress.

Personalizar el tema de la frontera.

Publique su proyecto.

¿Tiene alguna pregunta sobre el marco de la frontera? ¡Háganos saber en la sección de comentarios!