Questions courantes

Comment créer un tableau de bord personnalisé avec les API de WordPress et React ?

Créer un tableau de bord personnalisé avec les API de WordPress et React nécessite de comprendre les bases de l’API de WordPress et de React. Vous devez également avoir des connaissances en développement Web et en programmation.

Pourquoi utiliser les API de WordPress pour créer un tableau de bord personnalisé ?

Les API de WordPress offrent une grande flexibilité et des possibilités de personnalisation pour créer des tableaux de bord personnalisés. Elles permettent également de récupérer des données spécifiques et de les afficher de manière claire et concise.

Quels sont les outils nécessaires pour créer un tableau de bord personnalisé avec les API de WordPress et React ?

Les outils nécessaires pour créer un tableau de bord personnalisé avec les API de WordPress et React incluent un éditeur de code, un navigateur Web, un serveur de développement et des connaissances en développement Web et en programmation.

Lorsque vous gérez des sites Web, tout tourne autour des données : vues, temps de réponse, utilisateurs, taux de rebond, etc. Et, si vous gérez des sites Web, vous avez probablement eu à faire face à une instance de WordPress au moins une fois.

Il existe des centaines – ou peut-être des milliers – de plugins WordPress pour récupérer et afficher des données. Mais les API de WordPress peuvent nous donner un coup de main si nous voulons construire un tableau de bord personnalisé avec certaines informations spécifiques que nous voulons obtenir.

Comprendre les API de WordPress

Les API de WordPress sont des interfaces de programmation qui permettent aux développeurs d’interagir avec les données de WordPress. Elles offrent une grande flexibilité et des possibilités de personnalisation pour créer des applications Web personnalisées.

Il est important de comprendre les bases de l’API de WordPress avant de créer un tableau de bord personnalisé. Vous devez connaître les différentes méthodes d’authentification, les types de requêtes et les formats de données.

Vous pouvez également utiliser des outils tels que XChat pour faciliter la communication avec les API de WordPress.

C’est pourquoi aujourd’hui je veux partager avec vous comment construire un service qui récupère les données de notre instance WordPress et les affiche dans un tableau. Pour être plus précis, je veux connaître le nombre de plugins que j’utilise et les plugins que j’ai installés précédemment et que je n’utilise plus.

## Pourquoi devrais-je savoir quels plugins WordPress j’utilise ?

J’ai toujours trouvé cette information très importante. Surtout au début de votre voyage avec WordPress, vous pourriez être tenté d’installer un plugin pour chaque fonctionnalité que vous voulez que vos sites Web aient.

Les plugins sont peut-être faciles à installer, mais ils présentent aussi des inconvénients potentiels :

• S’ils ne sont pas mis à jour régulièrement, ils peuvent exposer votre site Web à des attaques et à des vulnérabilités
• Ils peuvent rendre le temps de chargement de votre site Web beaucoup plus long qu’il ne le devrait
• Certains plugins peuvent entrer en conflit avec d’autres

Je ne dis pas que vous ne devriez pas utiliser ou faire confiance aux plugins. Mais c’est une chose à laquelle vous devez faire attention. Voyons donc comment nous pouvons avoir des informations utiles sur nos plugins à portée de main.

Les outils que je vais utiliser

• API de WordPress – Je vais travailler avec le point de terminaison « plugins ».
• React – Je vais créer un composant pour afficher des données.
• Axios – Je l’utiliserai pour appeler facilement les API.
• React-Bootstrap – J’ai choisi cette bibliothèque juste pour obtenir rapidement un composant de tableau agréable et facile à utiliser.
• Postman – C’est l’outil que j’utilise toujours pour tester les API.
• Npm – Je vais l’utiliser pour créer une application React et installer des paquets.

API de WordPress

Comme je l’ai dit au début de cet article, je veux appeler un endpoint spécifique pour obtenir JSON avec les informations sur les plugins que j’ai installés sur mon instance. Plus précisément, je veux compter les plugins que j’utilise actuellement (« actifs ») et ceux que je n’utilise pas (« inactifs »).

Concentrons-nous maintenant sur la section « Schema ». Ici, je trouve tous les champs qui existent dans un enregistrement de plugin. La liste est assez longue, mais j’ai besoin d’un seul de ces champs : « status ». La documentation indique qu’il me renvoie une chaîne avec deux valeurs possibles : « inactif » ou « actif ».

Voici donc l’API que je vais appeler pour récupérer les données nécessaires :

https:///wp-json/wp/v2/plugins Jusqu’ici tout va bien. Il y a encore une chose que nous devons prendre en considération. Certains points de terminaison nécessitent une authentification de base pour retourner les données. Notre point final est l’un d’entre eux. À partir de la version 5.6, vous pouvez passer un nom d’utilisateur et un mot de passe d’application pour appeler ce point final.

### Il est temps de tester l’API

Une fois que je sais quel point de terminaison je dois appeler et que j’ai généré mon mot de passe d’application, je suis prêt à tester mon appel d’API avec Postman. Voici ce que j’obtiens :

Comme vous pouvez le voir, j’obtiens un JSON contenant l’information que je recherche : la clé  » status « . Maintenant nous sommes prêts à créer notre application React !

Codons l’application React

Il est maintenant temps de créer le front-end de notre application. Comme je l’ai déjà dit, je vais utiliser React pour sa flexibilité, Axios pour appeler facilement les APIs, et React-Bootstrap pour obtenir des composants prêts à l’emploi avec un beau design.

Avant de commencer à écrire du code, récapitulons ce que je veux réaliser : Je veux que mon application frontale récupère les données de mon instance WordPress concernant le statut – actif ou inactif – des plugins installés en appelant le point de terminaison  » Plugins « .

Pour ce faire, je veux que mon script effectue les actions suivantes :

1. Créer des variables pour stocker le compte des plugins actifs et inactifs
2. Appeler le point de terminaison par un appel d’API
3. Itérer dans le JSON – l’appel API retourne avec la logique suivante : Si la clé de l’objet « status » est égale à « active », augmentez le compte associé d’une unité, sinon augmentez le compte associé aux plugins inactifs d’une unité. Mettez à jour les états associés – précédemment définis dans le constructeur – en conséquence
4. Rendre le tableau en utilisant le composant « Table » de React-Bootstrap et passer les états dans le composant table où je veux que les données soient affichées avec le nombre de plugins actifs et inactifs

Assez parlé. Il est temps de coder ! 🙂

Tout d’abord, je crée mon application React comme ceci :

npx create-react-app report Puis j’installe Axios et React-Bootstrap :

npm install axios npm install react-bootstrap bootstrap@5.1.3 Tout est prêt. Maintenant, dans mon application React, je me déplace dans le répertoire /src et je crée un nouveau répertoire appelé « components » :

/src/composants Puis je me déplace dans le dossier components et je crée un fichier « Report.jsx ». Voici à quoi ressemble le fichier maintenant :

`import React de ‘react’ ; import axios de ‘axios’ ; import Table de ‘react-bootstrap/Table’

class Report extends React.Component { constructor(props) { super(props) this.state = { countActiveState : 0, countInactiveState : 0, } ; }

componentDidMount() { let countActive = 0 ; let countInactive = 0 ;

axios.get(“https:///wp-json/wp/v2/plugins”, { auth : { username : process.env.REACT_APP_USERNAME, mot de passe : process.env.REACT_APP_CLIENT_SECRET } }) .then(res => { const plugins = res.data ; for(let key in plugins) { if(plugins[key].status === “active”) { countActive++ ; this.setState({countActiveState : countActive}) } else{ countInactive++ ; this.setState({countInactiveState : countInactive}) } } }) .catch(error => { alert(“Quelque chose s’est mal passé. Réessayez plus tard.”) ; console.log(erreur) ; }) }

render() { return (`

Statut Montant du plugin

Actif {This.state.countActiveState}

Inactif {This.state.countInactiveState}

`) } }

export default Report ;` Découpons-le en petits morceaux et voyons ce qui se passe :

importe React de 'react' ; import axios de 'axios' ; import Table de 'react-bootstrap/Table' J’importe Axios et le composant « Table » de la bibliothèque React-bootstrap.

constructor(props) { super(props) this.state = { countActiveState : 0, countInactiveState : 0, } ; } Dans le constructeur, je définis deux états : countActiveState et countInactiveState. Je leur donne la valeur 0.

componentDidMount() { let countActive = 0 ; let countInactive = 0 ; Je déclare deux variables et leur donne la valeur 0 : countActive pour stocker le nombre de plugins actifs et countInactive pour stocker le nombre de plugins inactifs.

axios.get("https:///wp-json/wp/v2/plugins", { auth : { username : process.env.REACT_APP_USERNAME, mot de passe : process.env.REACT_APP_CLIENT_SECRET } }) J’utilise Axios pour effectuer un appel GET vers le point de terminaison « Plugins ». Je passe également les informations d’identification pour l’authentification de base.

.then(res => { const plugins = res.data ; for(let key in plugins) { if(plugins[key].status === "active") { countActive++ ; this.setState({countActiveState : countActive}) } else{ countInactive++ ; this.setState({countInactiveState : countInactive}) } } }) .catch(error => { alert("Quelque chose s'est mal passé. Réessayez plus tard.") ; console.log(erreur) ; }) } Ensuite, après avoir stocké les données de la réponse dans une variable appelée « plugins », j’itère à travers le JSON et je dis : « pour chaque objet JSON, vérifier si la clé « status » est égale à « active ». Si c’est le cas, augmenter la variable countActive de 1 et définir le countActiveState égal à countActive, sinon augmenter la variable countInactive de 1 et définir le countInactiveState égal à countInactive ».

render() { return (

Statut Montant du plugin

Actif {this.state.countActiveState}

Inactif {this.state.countInactiveState} (en anglais)

`) } }

export default Report ;` Ensuite, j’effectue le rendu du composant Table et je passe les variables countActiveState et countInactiveState là où je veux que les données soient affichées.

Enfin, je vais dans le fichier App.js et j’ajoute le composant Report :

`importez ’./App.css’ ; importez Report de ’./components/Report’ ;

function App() {

return (`

Tableau de bord des statistiques de WordPress

`) ; }

export default App ;` Je lance l’application :

npm start Et la magie opère ! 🙂

### Et voilà, vous l’avez !

Ceci n’est qu’un exemple rapide de la façon dont vous pouvez facilement construire votre tableau de bord personnalisé pour récupérer et visualiser les données de votre instance WordPress.

Vous pouvez utiliser n’importe quel type de représentation graphique des données, comme un diagramme à barres ou à secteurs. C’est vous qui décidez !

FAQ

Quelle est la différence entre les API de WordPress et les plugins WordPress ?

Les API de WordPress sont des interfaces de programmation qui permettent aux développeurs d’interagir avec les données de WordPress, tandis que les plugins WordPress sont des extensions qui ajoutent de nouvelles fonctionnalités à WordPress.

Comment puis-je utiliser les API de WordPress pour créer un tableau de bord personnalisé ?

Vous pouvez utiliser les API de WordPress pour créer un tableau de bord personnalisé en envoyant des requêtes à l’API de WordPress et en récupérant les données souhaitées. Vous pouvez ensuite afficher ces données dans un tableau de bord personnalisé à l’aide de React.

Quels sont les avantages de l’utilisation des API de WordPress pour créer un tableau de bord personnalisé ?

Les avantages de l’utilisation des API de WordPress pour créer un tableau de bord personnalisé incluent la flexibilité, la personnalisation et la possibilité de récupérer des données spécifiques.

Puis-je utiliser les API de WordPress pour créer un tableau de bord personnalisé sans connaissances en développement Web ?

Il est recommandé d’avoir des connaissances en développement Web et en programmation pour utiliser les API de WordPress et créer un tableau de bord personnalisé.

À lire aussi sur le site

• XChat arrive sur iOS : découvrez toutes ses fonctionnalités et comment y accéder
• Avec Muse Spark, Meta ambitionne de rattraper son retard face à OpenAI et Anthropic
• Instagram offre désormais la possibilité de corriger ses commentaires après leur publication