Traditionnellement, le développement de WordPress était centré sur PHP. Bien qu’il s’agisse d’un langage robuste qui s’est avéré fiable au fil des ans, le fait d’avoir plusieurs options vous offre un plus grand choix. Si vous êtes un développeur React à la recherche du bon framework pour WordPress, il existe de nombreuses raisons d’essayer Frontity.
Frontity est un framework gratuit et open-source qui vous aide à créer des applications WordPress à l’aide de React JS.
Bien que le développement React offre de nombreux avantages, vous devrez normalement suivre un processus de configuration complexe. Celle-ci comprend le regroupement, le rendu du serveur, etc. Heureusement, Frontity élimine toutes ces procédures et vous amène au stade du développement en un rien de temps.
Dans cet article, nous allons vous guider tout au long du processus de création d’une application Web avec Frontity. Avant cela, voyons pourquoi Frontity est une excellente option pour votre projet WordPress. Alors, commençons !
À lire aussi: Meilleur Hébergement pour WordPress
Liste de contenu
Qu’est-ce que Frontity et pourquoi il est idéal pour créer des applications Web ?
Frontity est un framework qui vous permet de créer un front-end basé sur React pour un site Web WordPress sans tête. Une fois Frontity configuré, votre site Web WordPress diffusera ses données via l’API REST. Frontity consommera ensuite ces données et les rendra dans le navigateur Web en tant qu’application à page unique (SPA).
Au lieu que le visiteur navigue d’une page à l’autre, un SPA réécrit dynamiquement la même page avec les nouvelles données qu’il récupère du serveur. Vous pouvez héberger Frontity sur un serveur Node.js normal ou dans un environnement sans serveur.
Bien qu’il soit possible de créer un site Web sans tête sans utiliser des outils tels que Frontity, cela vous oblige généralement à gérer une liste de tâches. Ces tâches incluent le transpilage, le routage, le rendu du serveur, la récupération de données depuis WordPress, et bien plus encore.
Bien que vous puissiez réduire la charge de travail en utilisant un framework tel que Next.js ou Gatsby.js, ces solutions ne sont pas conçues spécifiquement pour WordPress. Pour les utiliser avec WordPress, vous devez effectuer une quantité importante de configuration. Vous devrez peut-être également installer des outils supplémentaires.
Frontity pour WordPress
Frontity a été conçu en tenant compte de WordPress. Chaque partie du framework a été simplifiée et optimisée spécifiquement pour la plateforme.
Frontity comprend également tout ce dont vous avez besoin pour développer pour WordPress, dont React, TypeScript, CSS-in-JS et Babel.
Comme vous n’avez pas à configurer d’outils supplémentaires, vous êtes libre de vous concentrer sur ce qui compte vraiment : la création de votre site Web.
À lire aussi : Les meilleurs langages de programmation pour 2021
Frontity peut également améliorer les performances de votre site Web. Cela se traduit par des temps de chargement rapides sans ressources supplémentaires ni aller-retour nécessaires.
En outre, il répond aux requêtes avec un fichier HTML entièrement rempli généré avec React. Cela réduit le temps requis pour le premier affichage riche en contenu. Une fois React chargé, le routeur de Frontity prélève automatiquement les autres routes et données.
En d’autres termes, vos visiteurs ne devraient jamais avoir à attendre pendant la navigation sur votre site. Étant donné que la vitesse de la page est un facteur de classement pour les recherches Google, l’utilisation d’une solution optimisée telle que Frontity peut également améliorer considérablement le référencement.
Enfin, Frontity est conçu pour être extensible. Son équipe travaille déjà sur des extensions pour Yoast SEO, AdSense, SmartAds et Google Analytics. Ces extensions ne sont pas disponibles actuellement, mais Frontity a créé une page GitHub sur laquelle les extensions finies seront publiées.
Les thèmes de Frontity sont également compatibles avec les packages React actuellement disponibles via le Node Package Manager (NPM).
Comment créer une application Web à l’aide de Frontity ? Voici les 5 étapes
Pour créer une application Web à l’aide de Frontity, vous aurez besoin d’une installation WordPress. Elle peut être hébergée sur un serveur Web ou localement.
Nous allons également utiliser Node.js pour exécuter les commandes Frontity. Pour voir si Node.JS est déjà installé, vous pouvez ouvrir un terminal sur votre ordinateur et exécuter la commande suivante :
node -v
Si le terminal renvoie un numéro de version, alors Node.js est déjà installé. Sinon, vous pouvez installer Node.js depuis le site officiel.
Étape 1 : Lancez un nouveau projet Frontity
La première étape consiste à créer un projet Frontity local, puis à connecter ce projet à votre installation WordPress. Pour ce faire, ouvrez un terminal et exécutez la commande suivante :
npx frontity create my-project
Vous devrez remplacer my-project par le nom de votre projet. Frontity vous demandera ensuite de sélectionner le thème Mars ou TwentyTwenty. Si vous êtes nouveau sur Frontity, il est recommandé de sélectionner Mars.
Une fois que vous avez fait votre sélection, Frontity clonera le thème de votre choix, créera tous les fichiers nécessaires et installera toutes les dépendances requises. Vous pouvez également spécifier si vous souhaitez recevoir les mises à jour Frontity par e-mail.
Après quelques instants, vous devriez voir un message “projet Frontity créé“. Frontity a maintenant créé un répertoire sur votre machine locale, avec le nom de projet que vous avez spécifié. Par défaut, les projets Frontity sont stockés dans votre répertoire d’utilisateurs :
Ce répertoire contient les fichiers et dossiers Frontity importants suivants :
- Frontity.settings.js. C’est là que vous définissez les paramètres de votre projet et les packages dont il a besoin.
- Node_modules. C’est là que toutes vos dépendances sont stockées. Vous ne devriez pas avoir besoin de modifier les fichiers contenus dans ce dossier.
- Package.json. Il est utilisé pour configurer votre projet Node.js et c’est également là que vous stockerez les dépendances requises par votre application.
- Packages. Ce dossier contient tous vos packages locaux, y compris votre thème.
Ensuite, changez de répertoire (cd) pour que le terminal pointe vers le répertoire root du projet, par exemple :
cd /users/my-project
Vous pouvez maintenant démarrer le développement en exécutant la commande suivante :
npx frontity dev
Une fois cette commande exécutée, une nouvelle page devrait s’ouvrir automatiquement dans votre navigateur Web par défaut.
Initialement, Frontity se connectera à un blog de test qui affiche le contenu de démonstration :
Vous pouvez connecter Frontity à votre propre site Web WordPress en éditant le fichier frontity.settings.js dans le répertoire de votre projet.
Vous devriez pouvoir ouvrir ce fichier à l’aide de n’importe quel éditeur de texte. Le contenu devrait ressembler à ceci :
const settings = {
"name": "my-project",
"state": {
"frontity": {
"url": "https://test.frontity.org",
"title": "Test Frontity Blog",
description": "WordPress installation for Frontity development"
}
},
"packages": [
{
"name": "@frontity/mars-theme",
"state": {
"theme": {
"menu": [
[
"Home",
"/"
],
[
"Nature",
"/category/nature/"
],
[
"Travel",
"/category/travel/"
],
[
"Japan",
"/tag/japan/"
],
[
"About Us",
"/about-us/"
]
],
"featured": {
"showOnList": false,
"showOnPost": false
}
}
}
},
{
"name": "@frontity/wp-source",
"state": {
"source": {
"api": "https://test.frontity.org/wp-json"
}
}
},
"@frontity/tiny-router",
"@frontity/html2react"
]
};
Dans ce fichier, recherchez la propriété api. Par défaut, cette propriété est définie sur https://test.frontity.org/wp-json. Vous devrez le remplacer par l’adresse de votre propre site Web, avec l’extension wp-json. Par exemple, si votre site Web est https://example.com, vous devez saisir https://example.com/wp-json :
"name": "@frontity/wp-source",
"state": {
"source": {
"api": "https://example.com/wp-json"
}
}
},
Enregistrez vos modifications et actualisez l’onglet Frontity dans votre navigateur Web. Cette page doit être mise à jour pour afficher le contenu extrait directement de votre propre blog.
Étape 2 : Ajoutez des pages à votre application
Frontity est désormais connecté à votre site Web, mais le menu contient toujours des liens vers le contenu de démonstration de Frontity (Nature, Voyage, Japon et À propos de nous). Si les visiteurs cliquent sur l’un de ces liens, ils rencontreront une erreur 404 :
Vous devez remplacer ces pages d’espace réservé par votre propre contenu. Dans votre répertoire de projet local, ouvrez le fichier frontity.settings.js et recherchez la section packages. Ça devrait ressembler a quelque chose comme cas :
"packages": [
{
"name": "@frontity/mars-theme",
"state": {
"theme": {
"menu": [
[
"Home",
"/"
],
[
"Nature",
"/category/nature/"
],
[
"Travel",
"/category/travel/"
],
[
"Japan",
"/tag/japan/"
],
[
"About Us",
"/about-us/"
]
],
Vous pouvez désormais remplacer ces espaces réservés par vos propres pages. Par exemple, si vous souhaitez créer un lien vers la page Boutique de votre site Web, située à l’adresse https://example.com/store, vous devez utiliser les éléments suivants :
"packages": [
{
"name": "@frontity/mars-theme",
"state": {
"theme": {
"menu": [
[
"Store",
"/store/"
],
....
....
….
]
],
Si vous souhaitez créer un lien vers votre produit « chapeau » par exemple, situé à l’adresse https://example.com/store/hat, vous devez ajouter ce qui suit :
"packages": [
{
"name": "@frontity/mars-theme",
"state": {
"theme": {
"menu": [
[
"Hat",
"/store/hat/"
],
...
...
...
]
],
À titre d’exemple, nous allons ajouter les pages suivantes au menu Frontity : Accueil, Boutique, À propos de nous et Contactez-nous :
"packages": [
{
"name": "@frontity/mars-theme",
"state": {
"theme": {
"menu": [
[
"Home",
"/"
],
[
"Store",
"/store/"
],
[
"About Us",
"/about-us/"
],
[
"Contact Us",
"/contact-us/"
]
],
Vous pouvez maintenant enregistrer ces modifications. Actualisez votre site Web et le menu devrait être mis à jour avec des liens vers toutes vos pages.
Étape 3 : Personnalisez votre thème
Lorsque vous configurez Frontity, vous avez sélectionné le thème Mars ou TwentyTwenty. Ce thème contrôle l’apparence de votre site, mais vous pouvez modifier l’aspect par défaut au niveau du code.
En personnalisant les différents fichiers qui composent le thème de votre choix, vous pouvez ajouter de nouveaux éléments d’interface utilisateur (UI) et supprimer des éléments. Vous pouvez également ajouter un remplissage et des marges et apporter d’innombrables autres modifications stylistiques.
Pour effectuer ces personnalisations, vous devez modifier le contenu du dossier packages/theme-name de votre projet. Par exemple, si vous utilisez le thème Mars, le dossier packages contient un répertoire mars-theme :
Dans ce répertoire, vous pouvez modifier divers éléments à l’écran. Pour illustrer le processus général, nous allons modifier la couleur du texte du titre de notre site Web à l’aide de HTML.
En HTML, les couleurs sont définies à l’aide des valeurs Rouge-Vert-Bleu (RVB), des valeurs hexadécimales (HEX), des valeurs Teinte-Saturation-Luminosité (HSL), des valeurs Rouge-Vert-Bleu-Alpha (RVBA) ou des valeurs Teinte-Saturation-Luminosité-et-alpha (HSLA). Vous pouvez générer rapidement et facilement un code à l’aide d’un sélecteur de couleurs tel que les codes de couleur HTML.
Pour effectuer cette modification, accédez à packages/mars-theme/src/components. Ouvrez le fichier header.js dans votre éditeur de texte, puis recherchez la section suivante :
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;
`;
L’attribut #fff est le code du blanc :
Vous pouvez changer la couleur de ce texte en remplaçant la couleur #fff par un autre code de couleur HTML. Dans l’extrait de code suivant, nous mettons du style à ce texte afin qu’il apparaisse en noir :
const Container = styled.div`
width: 848px;
max-width: 100%;
box-sizing: border-box;
padding: 24px;
//Change the following line//
color: #000000;
display: flex;
flex-direction: column;
justify-content: space-around;
`;
Lorsque nous sauvegardons nos modifications, la nouvelle couleur est immédiatement appliquée au texte d’en-tête :
Cela vaut la peine de passer du temps à explorer les différents fichiers et dossiers de thème pour voir les modifications que vous pouvez apporter. Avec quelques ajustements au niveau du code, vous pouvez donner une touche unique à n’importe quel thème et aider votre site Web à se démarquer de la foule.
Étape 4 : Ajoutez plus de fonctionnalités à votre application
Disqus est un service d’hébergement de commentaires de blog. WordPress peut prendre en charge les commentaires prêts à l’emploi, mais Disqus peut fournir plus d’avantages. Ce sont notamment l’intégration des réseaux sociaux, des options d’administration et de modération avancées, et des publicités natives que vous pouvez placer autour de votre section de commentaires :
Une fois que vous avez installé et importé Disqus dans votre projet local, vous pouvez ajouter une section de commentaires associée à n’importe quelle partie de votre site. Nous allons vous montrer comment en ajouter un à chaque post qui apparaît sur votre site Web.
Pour commencer, vous devrez installer Disqus. Vous pouvez le faire en exécutant une commande dans votre terminal :
npm install disqus-react
Ensuite, vous devez implémenter Disqus en tant que composant. Nous vous recommandons de créer une structure de répertoire de composants Frontity standard.
Dans le fichier comments.js, ajoutez ce qui suit :
import React from "react";
import { connect } from "frontity";
import Disqus from 'disqus-react';
const Comments = ({ state }) => {
const data = state.source.get(state.router.link);
const post = state.source[data.type][data.id];
const disqusShortname = “blog-name”;
const threadConfig = {
url: `https://${disqusShortname}.com${state.router.link}`,
identifier: post.id,
title: post.title.rendered,
};
return (
<Disqus.DiscussionEmbed shortname={disqusShortname} config={threadConfig} />
)
}
export default connect(Comments);
Ensuite, vous devrez implémenter Disqus via des espaces de noms. Dans votre fichier index.js, ajoutez ce qui suit :
import Comment from "./comment";
export default {
libraries: {
comments: {
Comment
}
}
};
Puisque nous souhaitons que les commentaires apparaissent sur tous les messages, nous devons ouvrir le fichier post.js de Frontity. Si vous utilisez le thème Mars, il se trouve dans packages/mars-theme/src/components.
Ouvrez ce fichier pour le modifier et recherchez la section suivante :
{/* Render the content using the Html2React component so the HTML is processedby the processors we included in the libraries.html2react.processors array. */}
<Content>
<Html2React html={post.content.rendered} />
</Content>
</Container>
) : null;
};
Vous devez mettre à jour cette section pour référencer le package de commentaires que vous venez de créer :
{/* Render the content using the Html2React component so the HTML is processedby the processors we included in the libraries.html2react.processors array. */}
<Content>
<Html2React html={post.content.rendered} />
<libraries.comments.Comments />
</Content>
</Container>
) : null;
};
Enregistrez vos modifications et actualisez votre blog dans le navigateur Web. Si vous ouvrez un article et faites défiler vers le bas, il devrait maintenant comporter une section de commentaires Disqus.
Étape 5 : Publiez votre application
Lorsque vous êtes satisfait de votre application Web Frontity, vous pouvez la déployer en production. Pour créer un bundle prêt pour la production, exécutez la commande suivante à partir du root de votre projet :
npx frontity build
Cela va créer un dossier build contenant votre application React et votre serveur Frontity (Node.js). Vous trouverez ce dossier dans le répertoire root de votre projet :
Vous pouvez déployer ce dossier sur tout hébergement capable de servir une application Node.js. Par exemple, vous pouvez utiliser le serveur npx frontity pour exécuter votre projet comme une application Node.js standard. Sinon, vous pouvez le télécharger sur un réseau de diffusion de contenu (CDN) et un service sans serveur.
Frontity recommande Vercel en tant que solution sans serveur, bien que vous puissiez également utiliser AWS Lambda, Netlify ou Google Functions. Pour déployer votre application Frontity à l’aide de Vercel, vous devez créer un compte Vercel. Dans votre terminal, exécutez la commande suivante :
npx vercel loginLorsque vous y êtes invité, entrez votre adresse e-mail. Vercel enverra maintenant un email de vérification à votre compte. Ouvrez cet e-mail et cliquez sur le bouton Vérifier.
Sur votre ordinateur, ouvrez le répertoire root de votre application Frontity. Créez ensuite un fichier vercel.json contenant les éléments suivants :
{
"version": 2,
"builds": [
{
"src": "package.json",
"use": "@frontity/now"
}
]
}
Enregistrez ce fichier et exécutez la commande Terminal suivante :
npx vercel
Après quelques instants, le terminal doit vous demander si vous souhaitez configurer et déployer votre projet. Pour déployer, appuyez sur la touche y, puis sur Entrée.
Vous pouvez désormais choisir l’étendue dans laquelle vous souhaitez effectuer le déploiement et si vous effectuez un déploiement dans un projet existant. Si vous effectuez un déploiement dans un nouveau projet, vous pouvez attribuer un nom à ce projet. Notez que Vercel ne prend en charge que les traits d’union, les lettres minuscules et les chiffres. Vous devrez également spécifier le répertoire local dans lequel se trouve votre projet.
Une fois que vous avez saisi ces informations, Vercel attribuera à votre projet une URL en direct, au format https://example.vercel.app. Il génère également une URL de paramètres de projet, au format https://vercel.com/vercel-username/my-frontity-project/settings. Cette URL ouvre les paramètres de votre projet dans la console Vercel.
Là, vous pouvez apporter diverses modifications à votre projet, dont l’attribution de nouveaux domaines à votre déploiement et l’intégration de Vercel à Git. De cette manière, les modifications sont automatiquement transmises à vos référentiels Git.
Conclusion
Il ne fait aucun doute que Frontity facilite le développement de WordPress-React. Ce framework vous aide à créer des applications qui sont conviviales pour le référencement, qui possèdent de superbes designs et qui fonctionnent bien. En créant une application Web à l’aide de Frontity, vous pouvez réduire la charge de travail et la configuration généralement requises pour créer un site Web WordPress sans tête.
Voici un bref récapitulatif des étapes de création d’une application Web à l’aide de Frontity:
- Lancez un nouveau projet Frontity.
- Ajoutez des pages à votre application.
- Personnalisez votre thème.
- Ajoutez plus de fonctionnalités à votre application.
- Publiez votre application.
Une fois que vous êtes satisfait de votre application Web, vous pouvez l’héberger dans un environnement sans serveur ou opter pour un hébergement Web convivial pour les développeurs et optimisé pour Node.js !
Auteure des blogs, Aina Strauss préfère penser à « carrière » comme un verbe plutôt qu’un nom. Elle est journaliste indépendant depuis les débuts du Web et écrit sur tout, de l’informatique, de nouvelles technologies au voyage. Son but n’est autre que d’apporter plus d’informations à tous ceux qui souhaitent adopter les nouvelles technologies du Web et de les aider à sélectionner le meilleur hébergement de manière pratique et rentable.
