API WordPress REST : la fonctionnalité CMS de nouvelle génération

Plus d'un quart du Web fonctionne sur WordPress. C'est un exploit assez remarquable, étant donné qu'il existe depuis plus d'une décennie, ce qui le rend assez vieux dans les années technologiques.

Quelle est la sauce secrète de WordPress ? Facile - c'est le moyen le plus simple et le plus extensible de gérer votre contenu. Cependant, pendant un moment, WordPress a semblé avoir pris du retard.

Alors que le Web dépendait de plus en plus de JavaScript pour créer des expériences immersives et interactives, il est devenu de plus en plus clair que WordPress devrait offrir de nouvelles façons aux utilisateurs et aux développeurs d'interagir avec leur contenu.

Alors que WordPress est construit sur - et continuera à être construit sur - PHP, l'API WP REST est une tentative de créer un pont entre l'héritage du noyau PHP WordPress et le potentiel et la puissance des applications Web JavaScript, ainsi que des applications mobiles natives. et applications de bureau.

L'API WordPress REST apporte le contenu de n'importe quel site Web WordPress dans une API facile à utiliser, permettant à WordPress de servir de système de stockage et de récupération pour la publication de contenu sur le Web.

Apporter l'API REST à WordPress

Si vous pensez que l'API WP REST est apparue de nulle part, vous vous trompez.

Ajouter une toute nouvelle fonctionnalité à WordPress n'est pas une tâche simple. De par sa nature de logiciel open source, le développement de WordPress dépend de la communauté dans son ensemble pour progresser.

Le développement de l'API a commencé il y a quelques années en tant que plug-in de fonctionnalité distinct, ce qui a permis aux développeurs d'expérimenter et de contribuer au projet dans un environnement contrôlé.

Au cours de nombreuses itérations et améliorations, et de deux versions complètement distinctes, les contributeurs à l'origine de l'API REST ont dû tester et évaluer les avantages et les conséquences immenses de la fourniture d'un accès API ouvert aux données sur des dizaines de millions de sites Web.

WordPress 4.4, nom de code "Clifford", a introduit l'infrastructure initiale du projet dans le noyau de WordPress, tandis que les points de terminaison n'apparaissent qu'avec WordPress 4.7, "Vaughan".

Essentiellement, cela a donné aux développeurs le temps de tester la fonctionnalité qui alimente l'API sans exposer réellement les données elles-mêmes.

Maintenant que les points de terminaison de contenu initiaux ont été fusionnés dans toutes les versions actuelles de WordPress, les développeurs de plugins et les auteurs de thèmes peuvent expérimenter de nouvelles façons passionnantes de récupérer, afficher et modifier les données en dehors de l'expérience wp-admin traditionnelle.

Briser les abréviations : de HTTP à une API REST JSON

Pour comprendre l'importance de l'API WP REST, il peut être utile de comprendre les fondements de la façon dont nous partageons les données en ligne et la direction que pourrait prendre Internet.

HTTP est la base de la plupart du trafic Web que nous traitons quotidiennement. Si vous saisissez une URL dans un navigateur, vous faites une demande . Le serveur correspondant reçoit votre demande et fournit une réponse . Cette transaction est à la base de presque tout ce que nous faisons en ligne. Les navigateurs font des requêtes et les serveurs fournissent des réponses.

Le type de demande que nous faisons peut affecter le type de réponse que nous obtenons. La plupart du temps, nous faisons une simple requête GET : "Hey Google, GET me your landing page." Google fournit une réponse.

Au fur et à mesure que le Web devenait plus interactif, nous avons commencé à tirer parti d'autres requêtes HTTP, notamment PUT , POST et DELETE .

Par exemple, nous remplissons une barre de recherche sur un site Web : "Hey Google, POST mon adresse e-mail et mon mot de passe dans votre page de connexion." Google commence une nouvelle session pour nous et fournit une réponse différente.

Ce protocole est la base sur laquelle nous construisons nos sites WordPress.

Nous utilisons des formulaires et PHP pour GET et POST des données dans notre base de données. Contrairement à l'opinion populaire, cette base sous-jacente de WordPress ne va pas changer de si tôt. Tout ce que WordPress fait maintenant, c'est de fournir aux développeurs une nouvelle façon d'interagir avec leurs données WordPress via une API RESTful.

Transfert d'État représentatif (REST)

Les développeurs WordPress doivent être familiarisés avec les API en général, telles que l'API Shortcode et l'API Options. Ces API définissent les fonctionnalités des composants qui composent WordPress, afin que les auteurs de thèmes et de plugins puissent étendre les capacités de base de WordPress. L'API WP REST, cependant, est un peu différente.

Une API REST ou RESTful consiste à exposer en toute sécurité vos données aux requêtes HTTP provenant de sources externes. Il s'agit également de mettre en place une architecture commune et un ensemble de protocoles pour répondre à ces demandes. Bien qu'il existe des idées et des principes plus avancés derrière ce type de service, ceux-ci dépassent le cadre de cet article.

L'existence de l'API WP REST, en particulier après WordPress 4.7, signifie que tout le contenu de votre site, y compris les publications, les pages, les commentaires et toute méta de publication publique, est désormais directement accessible en tant que données brutes. Cela signifie également que vous pouvez apporter des modifications à ces données en dehors de la tradition wp-admin si vous le souhaitez, peut-être via une application mobile ou de bureau.

Au lieu de considérer vos données comme de simples lignes dans une base de données, vous pouvez désormais y avoir un accès sérialisé sous la forme de JSON.

JSON - Qu'est-il arrivé au XML ?

Les vétérans de WordPress ont beaucoup d'expérience avec XML, un format commun pour le partage de contenu entre les sites.

Semblable à XML, JSON est simplement un mécanisme qui nous permet de transférer facilement des données en les regroupant dans une syntaxe spécifique. JSON est en fait une chaîne, une représentation textuelle d'un objet JavaScript, stockant vos données dans un ensemble de paires clé-valeur. Une représentation JSON courante d'un article WordPress peut ressembler à ceci :

 { “id”: 1, “title”: { “rendered”: “Hello World” }, “content”: { “rendered”: “Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!” } }

(Vous pouvez utiliser un outil de formatage JSON pour embellir la réponse JSON si nécessaire.)

Une réponse JSON complète via l'API WP REST inclura des informations supplémentaires sur la publication, y compris des métadonnées. En regroupant facilement ces données au format JSON, vous pouvez interagir avec votre contenu WordPress de manière nouvelle et passionnante.

Ce n'est pas un hasard si JSON est mieux associé à JavaScript. Alors que de plus en plus de développeurs WordPress commencent à "apprendre JavaScript en profondeur", nous verrons de plus en plus d'utilisations avancées de WordPress en tant que backend.

Comment nous trouvons les données : suivez la route vers un point de terminaison

Accéder à toutes les données de votre site via l'API REST est aussi simple que de composer une URL.

Pour tout site WordPress exécutant au moins la version 4.7, ajoutez la chaîne suivante à la fin de l'URL de votre site : /wp-json/wp/v2 (par exemple, http://example.com/wp-json/wp/v2 ). Mettez cette URL dans votre navigateur et voyez ce qui s'affiche.

Le résultat ressemble probablement à un gros gâchis de données, sauf si vous avez installé une extension de navigateur qui nettoie JSON. Ce gros gâchis de données est le contenu et les méta-informations de votre site WordPress particulier au format JSON.

En chargeant ce contenu, vous venez de définir un itinéraire et de demander à votre navigateur de l'OBTENIR pour vous.

Une route est une URL mappée à une méthode spécifique. Le noyau de WordPress lit cette route, chaque barre oblique '/' représentant un chemin particulier, ou un paramètre, qui doit être suivi.

Le chemin se termine à un point de terminaison , où les fonctions profondément à l'intérieur du noyau de WordPress peuvent prendre des décisions sur les données à fournir et ce qu'il faut faire avec les données fournies.

Un exemple de point de terminaison peut être '/wp-json/wp/v2/posts/1', où nous avons ajouté les chemins '/posts' et '/1'. Ce point de terminaison particulier indique à notre site de parcourir nos données, d'extraire nos messages et d'extraire le message avec l'ID 1.

Ce qui rend l'API REST si utile, c'est le fait qu'elle est extensible, ce qui signifie que vous pouvez prendre n'importe quelle donnée de votre site Web et l'ajouter en tant que point de terminaison. La plupart des fonctionnalités de base de WordPress sont actuellement (ou seront bientôt) prises en charge.

Cependant, les développeurs de thèmes et de plugins peuvent commencer à ajouter leur contenu et leurs paramètres personnalisés en tant que points de terminaison, permettant aux utilisateurs d'interagir avec leurs sites Web de nouvelles manières.

Si vous êtes curieux de connaître les points de terminaison actuellement disponibles sur votre site WordPress, une application de navigateur comme Postman fournit une interface graphique spécifiquement pour explorer les API.

En-têtes et authentification

La saisie des points de terminaison d'URL dans le navigateur semble simple, mais elle inclut en fait un ensemble d' en-têtes par défaut avec la demande. À leur tour, un ensemble d'en-têtes est également renvoyé avec la réponse. Ces en-têtes contiennent de nombreuses informations utiles, mais les plus importantes pour nos besoins ont à voir avec le type de demande que nous faisons et si nous sommes ou non authentifiés.

Si vous sautez dans les « outils de développement » de votre navigateur, vous pouvez examiner les en-têtes HTTP de tout élément chargé dans la fenêtre du navigateur, y compris les fichiers HTML, les feuilles de style CSS, les images, etc.

Le premier en-tête à considérer est le Request Method , qui correspond directement aux requêtes HTTP dont nous avons entendu parler plus tôt. Ici, vous verrez très probablement GET comme méthode de requête, si nous visualisons simplement une page.

Une application appelant votre API REST peut choisir de changer la méthode de demande de l'en-tête en POST.

Une méthode POST indique à votre site Web d'entrer de nouvelles données ou de modifier les données existantes dans votre base de données WordPress. En envoyant des informations via la méthode POST, d'autres applications ont la possibilité de modifier vos données, sans se connecter à wp-admin.

Pas besoin de s'inquiéter, cependant, car à moins qu'ils n'aient également inclus des en-têtes qui fournissent les informations d'identification appropriées pour l' authentification , votre site Web les refusera.

REMARQUE : Les méthodes d'authentification des appels vers votre API REST ne sont toujours pas finalisées, ce qui fait de l'authentification la plus grande barrière à l'entrée pour les développeurs souhaitant travailler avec l'API REST pour ajouter ou modifier des données.

Pour l'instant, il existe des options disponibles, y compris un plugin des développeurs derrière l'API REST. Au fur et à mesure que les procédures standard entourant l'authentification font leur chemin dans le noyau, les derniers obstacles seront clairs pour une utilisation généralisée de l'API WP REST.

Exemple d'application d'API REST WP

Ce qui rend l'API WP REST si puissante, c'est le fait qu'elle est cohérente, nous pouvons donc nous attendre aux mêmes résultats de base de n'importe quel site exécutant WordPress 4.7 ou supérieur. Cependant, WordPress est une API distribuée, ce qui signifie qu'il n'y a pas qu'un seul endroit pour obtenir toutes les données.

Chaque site Web exécutant WordPress est une application unique, avec des utilisateurs et une authentification uniques. Bien qu'il puisse nécessiter des techniques d'autorisation distinctes pour modifier le contenu via l'API REST, nous pouvons en fait accéder assez facilement aux publications de la plupart des blogs gérés par WordPress.

Pour démontrer, nous allons faire une démo rapide de codepen qui charge des extraits des derniers articles de certains blogs populaires liés à WordPress qui, bien sûr, fonctionnent tous sur WordPress. Pendant que nous y sommes, nous inclurons un formulaire de recherche, afin que nous puissions réellement rechercher tous ces sites en même temps et extraire les articles pertinents de chacun.

Enfin, nous nous assurerons d'inclure le lien pour lire le texte complet de l'article sur le site Web d'origine.

Phase 1 : Obtenir les messages récents

Nous allons commencer par configurer une instance Vue rapide et la monter sur un élément. Nous inclurons également Bootstrap afin que nous puissions avoir une grille et un style de base sur les éléments de formulaire que nous ajouterons plus tard.

Lorsque nous définissons les données, nous voulons un emplacement pour stocker le nom du site (qui n'est pas inclus dans la réponse par défaut), l'URL et les messages une fois que nous les aurons. Voici un exemple :

 { “name”: “wordpress.org”, “url”: “https://wordpress.org/news/wp-json/wp/v2/posts?per_page=3”, “posts”: [] }

Vous remarquerez que nous avons également inclus notre premier paramètre à la fin de l'URL, per_page . En règle générale, l'API WP REST paginera les résultats en suivant les mêmes règles qu'elle paginerait une boucle WP_Query normale. Nous limiterons nos requêtes aux trois premiers messages.

Ensuite, nous définirons la méthode loadPosts() , qui parcourra notre liste de sources, obtiendra les résultats avec vue-resource et remplira le tableau des posts vides de chaque source avec les résultats.

 loadPosts : function(){ var self = this; self.sources.forEach(function(source, index){ self.$delete(source, 'posts'); // Get API with vue-resource self.$http.get(source.url).then(function(response) { self.$set(source, 'posts', response.data); }, function(response) { console.log('Error'); }); }); }

Nous inclurons également un appel initial à loadPosts() lorsque notre instance Vue sera montée avec succès.

 mounted : function(){ this.$nextTick(function(){ // Load posts on initial page load this.loadPosts(); }); }

Garder loadPosts() en tant que méthode distincte sera utile à l'avenir lorsque nous commencerons à effectuer plusieurs appels à l'API. Dans notre code HTML, nous utiliserons les directives de rendu de liste simples et la syntaxe de modèle de Vue pour afficher tous nos messages.

Voir le stylet intégré pour une démonstration fonctionnelle :

Voir l'exemple de recherche d'API Pen WP REST (Phase One) par Brian Coords (@bacoords) sur CodePen.

Phase 2 : Filtrage des résultats

Ajoutons une barre latérale et créons des filtres pour afficher/masquer les différentes sources. Pour ce faire, nous ajoutons une nouvelle propriété à l'objet sources , un booléen que nous nommerons on .

Pendant que nous ajoutons des filtres, générons un filtre Vue pour nous aider également à afficher correctement la date. WordPress stocke la date et l'heure de la publication sous forme d'horodatage Unix.

Nous utiliserons la bibliothèque tierce Moment.js pour convertir la date dans un format plus lisible.

 filters: { // Using Moment.js to convert post date to a readable format prettyDate: function(value){ // Return if date is empty if(!value) return ''; // Convert date to Moment.js var date = moment.utc(value); // Return formatted date return date.format("MMM DD, YYYY,"); } },

Voir le stylet intégré pour une démonstration de travail :

Voir l'exemple de recherche d'API Pen WP REST (Phase One) par Brian Coords (@bacoords) sur CodePen.

Phase finale : requêtes de recherche

Ici, nous allons ajouter un nouveau paramètre à notre requête API. Déjà, nous avons ajouté le paramètre per_page=3 pour limiter le nombre de résultats que nous obtenons de chaque site. S'il y a quelque chose d'écrit dans la barre de recherche, nous l'ajouterons en tant que paramètre supplémentaire.

Cela nous permettra d'utiliser la fonctionnalité de recherche intégrée de chaque site, comme si nous interrogeions la barre de recherche sur ce site Web.

Nous allons ajouter une barre de recherche et la lier à une variable à l'aide de la directive v-model de Vue.

Plutôt que d'appeler immédiatement toutes les API, lorsque l'utilisateur commence à taper, nous ajouterons un bouton et lierons un événement à la soumission du formulaire. Ensuite, nous ajouterons une méthode à notre instance Vue qui ajoute les paramètres de recherche (encodés en URL, bien sûr) à l'URL.

 generateUrl : function(source){ var self = this; // Add search parameters. if(self.searchQuery){ return source.url + '&search=' + encodeURI(self.searchQuery); }else{ return source.url; } }

Voir le stylet intégré pour une démonstration de travail :

Voir l'exemple de recherche d'API Pen WP REST (Phase One) par Brian Coords (@bacoords) sur CodePen.

Bien qu'il s'agisse d'un exemple simple de l'API WP REST, nous pourrions imaginer une application potentielle pour quelque chose comme ça dans WordPress lui-même. Par exemple, il existe déjà la métabox "WordPress News".

Nous pourrions facilement transformer cette démo en plugin WordPress, en l'affichant sur le tableau de bord WordPress. Nous avons maintenant intégré la possibilité de rechercher de l'aide auprès de certains des meilleurs sites de didacticiels WordPress et de conception Web directement à partir de notre propre site Web.

Potentiel futur de l'API REST

Bien que l'exemple ci-dessus ne fasse qu'effleurer la surface des capacités de l'API WP REST, il devrait transmettre certaines des possibilités qui commencent à émerger lorsque vous commencez à jouer avec les données. Qu'il soit utilisé pour améliorer l'expérience utilisateur sur le site Web lui-même ou pour collecter et manipuler les données d'une source externe, c'est un outil puissant.

Bien que certains experts de l'industrie aient exprimé des inquiétudes quant à la possibilité que votre contenu soit "gratté" et affiché ailleurs, il est important de se rappeler que cette fonctionnalité est similaire aux flux RSS, et qu'il est vital pour les responsables du site d'avoir un contrôle clair sur les données. pas public.

Au fur et à mesure que l'API WP REST devient plus ancrée dans le tissu de WordPress, nous commencerons à voir ses effets, peut-être même sans nous en rendre compte. Les exemples vont des applications simples (Chris Coyier's Quotes on Design) aux applications complexes d'une seule page (site Guggenheim).

Un autre cas d'utilisation populaire pour l'API WP REST est le développement d'applications mobiles.

Parce que le contenu est si accessible via l'API REST, les développeurs peuvent créer des applications natives pour iOS et Android, et éviter d'avoir à créer des sources de données en double.

Au fur et à mesure que les utilisateurs interagissent avec ces applications mobiles, ils pourront récupérer et transformer directement les données du site Web d'origine, sans que le développeur ait à créer une infrastructure complexe pour le prendre en charge.

Cependant, ces applications de l'API REST destinées aux visiteurs ne sont qu'un début, car les implications réelles sont beaucoup plus profondes. L'un des objectifs de l'équipe de développement principale est de commencer à l'utiliser dans l'interface wp-admin.

Avec les futures mises à jour de WordPress, nous commencerons à voir admin-ajax remplacé en faveur de l'API, ce qui, espérons-le, augmentera la vitesse des fonctions de base, comme l'édition de menus ou la publication d'articles.

Cela pourrait potentiellement aller de pair avec l'accent mis par WordPress sur le personnalisateur et l'éditeur en tant que points de départ conviviaux pour les débutants de WordPress.

Bien que l'API WP REST soit extrêmement utile telle quelle, il reste encore beaucoup à faire. L'API n'est pas complète. Il y a encore plus de fonctionnalités et de points de terminaison à ajouter.

Finalement, vous pourrez interagir avec votre site WordPress sans même le visiter. Et tandis que de nombreux services utilisent désormais des API personnalisées pour interagir avec WordPress, le passage à une API REST WordPress standard signifie que davantage de sites et de services peuvent s'interconnecter, parlant la même langue.

WordPress a commencé comme une plateforme de blogs, un moyen pour les blogueurs de se connecter et de partager leurs pensées et leurs idées. Avec le développement de l'API WordPress REST, nous commencerons à voir un nouveau niveau de connexion et de partage dans les coulisses. Cela permettra aux utilisateurs de s'appuyer sur leurs pensées et leurs idées d'une manière jamais envisagée auparavant, emmenant WordPress et ses utilisateurs vers de toutes nouvelles frontières.