Utilisez WordPress avec React pour créer un CMS sans tête pour votre application Web

L'API WordPress Rest est l'une des nombreuses fonctionnalités intéressantes offertes par WordPress. Il permet aux développeurs de créer des plugins et des thèmes fascinants et leur permet d'alimenter des applications tierces avec WordPress CMS.

Le système de gestion de contenu est également développé pour gérer le contenu du site Web dans les applications Web modernes. Cela peut ajouter une charge de travail supplémentaire pour les développeurs. Avec autant de possibilités offertes par l' API Rest , on peut également penser à utiliser WordPress avec React comme un CMS sans tête pour leur(s) application(s) Web basée sur JavaScript.

Qu'est-ce que WordPress sans tête ?

Un site Web WordPress sans tête est un site qui utilise principalement WordPress pour la gestion de contenu et utilise toute autre technologie pour créer le front-end et afficher le contenu aux visiteurs du site Web.

L'API Rest permet aux développeurs d'interagir avec des interfaces inter-technologies tant que les deux parlent le même langage JSON. L'API WordPress Rest crache des données au format JSON, ce qui est compréhensible par un grand nombre de technologies Web. JSON est une représentation textuelle d'objets JavaScript qui contient des données dans des paires clé-valeur.

 "copains": [
      {
        "id": 0,
        "nom": "Harriet Stanley"
      },
      {
        "identifiant": 1,
        "nom": "Benton Odom"
      },
      {
        "identifiant": 2,
        "nom": "Jackie Edwards"
      }
    ],

Aujourd'hui, je vais démontrer la puissance de l' API WordPress Rest en l'utilisant avec React et WordPress en tant que CMS sans tête pour mon application Web de base.

Les avantages de l'utilisation du CMS WordPress sans tête

Étant une plate-forme open-source, WordPress offre une grande flexibilité pour créer n'importe quel site Web. L'utilisation de WordPress en tant que CMS sans tête vous permet de créer le front-end de votre application Web à l'aide de n'importe quelle technologie Web et de gérer son contenu à l'aide de l'un des CMS les plus populaires.

Vous pourriez rencontrer la situation où vous devez ajouter une fonctionnalité de blog dans une application Web existante construite avec React ou Angular. Au lieu de coder le système de gestion de contenu à part entière dans le cadre natif, utilisez le CMS WordPress sans tête pour gérer le contenu à l'aide de l'API Rest.

Comment configurer un site WordPress pour ReactJS

Commençons par configurer le site WordPress, car il servira de source de données pour notre application frontale React.

Téléchargez le fichier zip du plugin WP-Rest API depuis git et téléchargez le dossier zip dans votre dossier de plugins WordPress. Une fois le fichier téléchargé, activez le plugin. Cela activera l'API WordPress Rest dans votre site Web WordPress.

Accédez à Paramètres → Permaliens et sélectionnez soit le nom de la publication, soit la structure personnalisée.

Puisque nous travaillons avec des appels d'API, téléchargez l'extension chrome pour Postman . Dans le Postman, saisissez l'URL au format suivant :

https://example.com/wp-json/wp/v2/posts

L'URL ci-dessus récupérera les données des publications sur votre site WordPress.

Téléchargez le plug-in d' interface utilisateur Custom Post Type pour créer des types de publication personnalisés. Cette publication personnalisée sera affichée lorsque nous utiliserons WordPress avec React à l'étape suivante.

Installez et activez le plugin et ajoutez un nouveau type de publication. Pour ce didacticiel, je vais créer un type de publication personnalisé pour les livres.

À l'intérieur du slug de type de message, tapez le nom de votre message personnalisé.

Assurez-vous que la case Afficher dans l'API REST est définie sur true et que le slug de base de l'API REST est également défini. Ceci est obligatoire si vous souhaitez utiliser WordPress comme CMS sans tête.

Cochez toutes les cases pour les informations que vous cherchez à obtenir de l'API REST.

Après avoir enregistré les modifications, vous remarquerez qu'une nouvelle option est renseignée dans la barre latérale. Cliquez dessus pour ajouter le nouveau livre dans votre type de publication personnalisé.

J'ai créé mon premier livre en insérant les exemples de données et un extrait de mon article.

Pour vérifier que les données sont disponibles via l'API, allez-y et cliquez sur l'URL à l'intérieur du Postman.

Maintenant, l'URL devrait ressembler à quelque chose comme https://exampe.com/wp-json/wp/v2/books .

Nous pouvons également ajouter d'autres champs comme Publisher en utilisant les plugins ACF et ACF to RestAPI .

Installez et activez les deux plugins.

Par défaut, ACF ne parle pas à l'API WordPress Rest. Par conséquent, nous devons également télécharger le plug-in ACF REST API .

À l'aide du plugin de champs personnalisés, j'ajouterai le champ Éditeur pour mes livres.

Assurez-vous de sélectionner le type de message souhaité dans la liste. Après cela, cliquez sur " Publier ".

Un nouveau champ est rempli dans mon type de publication personnalisé où je peux définir l'éditeur de mon livre. C'est tout ce que nous devions faire pour configurer notre WordPress pour envoyer nos données à notre application Web ReactJS.

Premiers pas avec React

Qu'est-ce que ReactJS

React est une bibliothèque JavaScript pour le Web gérée par Facebook et la communauté des développeurs. JavaScript est un outil puissant pour le développement Web, et il existe plusieurs bibliothèques écrites en JavaScript pour améliorer la fonctionnalité des sites Web. ReactJS est principalement utilisé pour développer des applications monopage rapides, robustes et dynamiques.

Configuration de l'application React

Pour créer des applications React, vous devez avoir les dépendances suivantes installées sur votre ordinateur.

• NodeJS et NPM.
• Éditeur de texte tel que Sublime ou Visual Studio Code.
• Git pour le contrôle de version (facultatif)

Après avoir configuré l'environnement, ouvrez la ligne de commande et exécutez le code suivant pour créer le projet avec ReactJS.

 npx créer-réagir-app frontend

Une fois l'application créée, cd (changer de répertoire) vers le dossier de l'application et tapez la commande suivante pour installer le package Axios pour les appels d'API.

 npm i axios

Maintenant, ouvrez le dossier dans votre éditeur de texte préféré. J'utilise le code Visual Studio.

Lancez l'application en exécutant la commande npm start.

Nous sommes tous prêts à créer notre application Web avec React en utilisant WordPress comme CMS sans tête si tout fonctionne correctement.

Créez un nouveau dossier « composants » dans le dossier src et, dans le dossier « composants », créez un nouveau fichier « Books.js ».

Comment rendre les données de publication sur ReactJS

Dans le fichier Book.js , nous allons récupérer les données de l'API WordPress Rest. Ci-dessous se trouve le code qui demande le point de terminaison de l'API Rest - qui dans mon cas est ' /books ' - et affiche les données au format JSON.

 importer React, {Composant} de 'réagir'
importer des axios depuis 'axios' ;

la classe d'exportation Livres étend le composant {
   état = {
       livres: [],
       est chargé : faux
   }

 composantDidMount () {
   axios.get('https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/books/')
       .then(res => this.setState({
           livres : res.data,
           est chargé : vrai
       }))
       .catch(err => console.log(err))
   }


   rendre() {
      console.log(this.state);
       retourner (
           <div>
              
           </div>
       )
   }
}

exporter les livres par défaut

Le code ci-dessus affichera le tableau de données dans la console, qui est ensuite utilisé dans le bloc de rendu.

Maintenant, dans le fichier App.js , appelez le composant Books comme indiqué ci-dessous.

 importer React depuis 'react' ;
importer './App.css' ;
importer des livres depuis './components/Books' ;

fonction App() {
 retourner (
   <div className="App">
    <Livres/>
   </div>
 );
}

exporter l'application par défaut ;

App.js est le point d'entrée de notre application web. Par conséquent, il est important de référencer les composants « Livres » dans ce fichier.

Comment afficher les données de publication sur ReactJS

Les données peuvent être affichées en ajoutant le code à l'intérieur de la méthode de rendu.

 rendre() {
       const {livres, isLoaded} = this.state ;
       retourner (
           <div>
               {books.map(livre =>
               <h4>{livre.titre.rendu}</h4>
               )}
           </div>
       );
   }

Au lieu d'afficher les données ici, nous allons créer un nouveau composant et le nommer ' BookItems.js ' car je veux le garder séparé du composant parent.

Modifiez la méthode de rendu dans Bookk.js en quelque chose comme :

 rendre() {
       const {livres, isLoaded} = this.state ;
       retourner (
           <div>
               {books.map(livre =>
               <BookItems key={book.id} book={book}/>
               )}
           </div>
       );
   }

Maintenant, nous devons rendre le composant BookItems à la place.

Dans BookItems.js, ajoutez le code suivant :

 importer React, {Composant} de 'réagir'
importer des axios depuis 'axios' ;
importer les PropTypes à partir de 'prop-types' ;

la classe d'exportation BookItems étend le composant {
 
   rendre() {
       const { titre } = this.props.book ;
       retourner (
           <div>
              <h2>{titre.rendu}</h2>
           </div>
       )
   }
}

exporter les BookItems par défaut

Dans le code ci-dessus, je fais référence à l'accessoire du livre pour obtenir le titre et d'autres informations.

Remarque : Assurez-vous de référencer le composant BookItems dans le composant "Livres".

Ma version finale de BookItems.js ressemble à ceci :

 importer React, {Composant} de 'réagir'
importer les PropTypes à partir de 'prop-types' ;
importer des axios depuis 'axios' ;
la classe d'exportation BookItems étend le composant {

   état = {
       imgUrl: '',
       auteur: '',
       est chargé : faux
   }

   propTypes statiques = {
       livre : PropTypes.object.isRequired
   }

   composantDidMount () {
       const {featured_media, auteur} = this.props.book ;
       const getImageUrl = axios.get(`https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/media/${featured_media}`);
       const getAuthor = axios.get(`https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/users/${author}`);
      
       Promesse.all([getImageUrl, getAuthor]).then(res => {

           console.log(res);
           this.setState({
               imgUrl : res[0].data.media_details.sizes.full.source_url,
               auteur : res[1].data.name,
               est chargé : vrai

           });
       });
    }
 
   rendre() {
       const { titre, extrait } = this.props.book ;
       const {auteur, imgUrl, isLoaded} = this.state ;
       retourner (
           <div>
              <h2>{titre.rendu}</h2>
              <img src={imgUrl} alt={title.rendered}/>
              <strong>{auteur}</strong><br/>
              <div dangereusementSetInnerHTML={{__html : extrait.rendu}}></div>
           </div>
       )
   }
}

exporter les BookItems par défaut

Et la sortie dans le navigateur ressemble à ceci :

Pas la plus belle, non ? Eh bien, c'est parce que le style n'entre pas dans le cadre de ce didacticiel.

Emballer!

Aujourd'hui, je vous ai montré comment utiliser WordPress avec React en tant que CMS sans tête pour votre application Web. Le code React est également disponible sur Git pour que vous puissiez le télécharger. Cependant, cela ne se limite pas à React. Vous pouvez également expérimenter avec VueJS, Angular ou n'importe quel framework JavaScript. Il y a des tonnes de choses que vous pouvez faire avec l'API WordPress Rest. Le ciel est la limite, alors allez-y et utilisez WordPress pour votre prochain projet Web.