Power Un blog à l'aide de l'API WordPress

Sep 14, 2025
Comment
Custom site powered by WordPress API [dix] [dix] [dix]
[dix]

Au cours des dernières années, le développement d'une API de repos pour WordPress a ouvert de nouvelles portes pour les développeurs. Les développeurs qui avaient déjà été limités à la rédaction d'un projet WordPress à PHP ont maintenant plus de flexibilité et de contrôle dans la manière dont ils peuvent aborder la pile technologique de leur site Web à être.

[dix]

Cela signifie qu'il est possible de conserver tous les avantages du brillant panneau de commande WordPress, qui est extrêmement flexible par populaire. Plugins WordPress Tels que des champs personnalisés avancés et ont une façade entièrement construite sur mesure qui n'interagit que avec WordPress lorsqu'il doit.

Dans ce Tutoriel WordPress Nous explorerons comment implémenter l'API de repos WordPress dans une application de blog simple, qui utilise actuellement un fichier JSON local comme source de données et est construite en tant qu'application à une seule page (SPA) à l'aide du cadre JavaScript populaire. Vue.js . Cela impliquera la mise en œuvre de VUEX, que nous allons utiliser pour stocker les données que nous demandons à un WordPress à l'aide d'une combinaison de ses méthodes d'action et de mutation.

Une fois terminé, vous auriez dû créer un spa simple, simple, qui a toute la réactivité de VUE.JS, tout en affichant des poteaux extrayés et gérés par WordPress.

Pour les API plus géniales à explorer, jetez un coup d'œil à nos guides au meilleur API JavaScript , API HTML et Google Apis .

[dix]

01. Configurer l'espace de travail et les dépendances

Premières choses d'abord, vous devriez Téléchargez les fichiers du projet et ouvrez-les dans votre éditeur préféré.

Dans la console, CD dans modèle de site web et exécutez la commande ci-dessous pour installer les dépendances du nœud du projet (si vous n'avez pas de nœud installé, faire cela en premier ). Nous allons travailler purement dans le src Annuaire d'ici sur ON. 

npm install

02. Installez VUEX

Ensuite, en utilisant la commande ci-dessous, nous allons installer Vœux , qui est un modèle de gestion de l'état et une bibliothèque pour les applications VUE.JS. Cela agira comme un magasin d'informations central pour tous les composants VUE qui dépendent des données que nous recevons de WordPress API. Pour les développeurs familiers avec réaction, VUEX est fortement inspiré par le flux. 

npm install vuex --save

03. Démarrer le serveur de développement

Dans la console, exécutez la commande ci-dessous pour lancer le serveur de développement. Cela compilera le projet VUE.JS en fonction de la situation et de l'attribuer à une URL afin que vous puissiez y accéder. Ceci est généralement Localhost: 8080 .

Un grand avantage que cela apporte est le rechargement en direct, alors une fois que vous modifiez l'application et enregistrez, la page de votre navigateur se mettra à jour sans la nécessité de recharger manuellement. 

npm run dev

04. Créer un magasin VUEX

Dans src , créer un répertoire appelé boutique et en lui un nouveau fichier appelé index.js . Ce sera là où notre magasin VUEX sera défini. Bien que avant d'arriver à cela, nous devons d'abord nous assurer que notre application VUE.JS est au courant de son existence. Pour faire cela, ouvert Main.js et importer le magasin et l'inclure comme une dépendance, comme dans l'extrait ci-dessous. 

 Import Vue de 'Vue'
Application d'importation de './app'
Importer le routeur de './router'
Store d'importation de './store'
Vue.config.productionTip = Faux
/ * ESLINT-DISABLE NO-NOUVEAU * /
Nouveau Vue ({
  el: '#app',
  routeur,
  boutique,
  modèle: '& lt; app / & gt;',
  Composants: {app}
})

05. Créez des échafaudages de magasin et installez Axios

Pour nous aider à simplifier les demandes Ajax Notre magasin fera à WordPress API, nous installerons Axios, qui est un client HTTP basé sur la promesse. Pour ce faire, ouvrez une fenêtre de console séparée, accédez à la modèle de site web Répertoire et exécution NPM Installez Axios - Enregistrer .

Ensuite, commençons à échafauder le magasin en instanciant d'un nouvel objet vide VUEX Store. Pour le moment, cela ne fait rien, mais au moins de Vue devrait en être conscient. 

 Importer Axios de 'Axios'
Import Vue de 'Vue'
Import VUEX de 'VUEX'
Vue.use (VUEX)
Const Store = New Vuex.store ({
  Etat: {},
  Actions: {},
  Mutations: {}
})
Exporter le magasin par défaut

06. Créer des postes State

Dans VUEX, l'objet d'état détient des informations de demande, ce qui sera dans ce cas les données de WordPress Post, nous saisirons à l'aide de l'API. Dans cet objet, créez une nouvelle propriété appelée messages et attribuez-la une valeur de NULL. 

 State: {
  Posts: null
}

07. Créer une action getPosts

À VueX, les actions sont la principale manière dans laquelle les demandes asynchrones sont traitées. Ce sont généralement des méthodes définies dans le magasin, qui peuvent ensuite être expédiées conformément à l'application.

Dans le vide Actions Objet, définissez-en un où si notre état des messages est toujours nul, Axios est utilisé pour effectuer une demande AJAX à l'API WordPress et renvoyer une liste de postes. Une fois que nous avons reçu une réponse positive, nous résolvons ensuite la promesse et engager les postes à l'aide de la magasins mutation. 

 GetPosts: fonction (contexte) {
  retourner nouvelle promesse ((résolution, rejet) = & gt; {
  si (context.state.posts) {
  résoudre()
  }
  autre {
  axios.get ('http://lukeharison.net/
  WebDesigner / WP-JSON / WP / V2 / POSTES ')
  .Ce ((réponse) = & gt; {
  Context.commit ('StorePosts',
  Response.Data)
  résoudre()
  }). attrape ((erreur) = & gt; {
  rejeter (erreur);
  });
  }
  })
}

08. Créer une mutation des magasins

Un autre concept introduit par VUEX est des mutations, qui sont également des méthodes généralement définies dans le magasin. Les mutations sont le seul moyen de modifier l'état dans un magasin VUEX, ce qui permet à l'état d'être facilement suivi lors du débogage.

Dans le vide mutations objet, définissons le magasins Méthode que nous avons référencée à l'étape précédente et le permettez de remplacer la propriété Post de l'objet État avec toutes les données que la mutation reçoit en tant que charge utile. 

 Stocketposts (état, réponse) {
   État.posts = Réponse}

09. Déclencheur GetPosts Action sur la charge

Nous avons créé les méthodes d'action et de mutation qui accrochent des messages de WordPress API et leur valident à VUEX State, mais nous devons maintenant déclencher ce processus quelque part. Dans le composant VUE.JS de niveau supérieur App.vue , ajoutez l'extrait ci-dessous.

créé() est un crochet de cycle de vie qui déclenche le code dès que le composant VUE est créé sur la charge, tandis que l'utilisation du monde $ stocker La variable nous permet d'accéder au contenu de notre magasin VUEX et d'envoier la getPorts action de l'étape 7. 

 Créé () {
   Ceci. $ Store.dispatch ('getPosts')}

10. Mettre à jour les chemins d'attribut

The Vue DevTools extension gives you the power to debug your Vue.js app

[dix] [dix]
L'extension de Vue DevTools vous donne le pouvoir de déboguer votre application VUE.JS

Si vous travaillez Chrome ou Firefox et que vous avez le Vue.js Extension de DevTools (Sinon, je vous recommande de faire comme il est très utile), vous devriez maintenant pouvoir voir les messages WordPress chargés dans État de base sous le Vœux languette.

Retour à l'application, dans /Components/posts/posts.vue , le modèle HTML doit indiquer que ces données, modifient donc quelques-unes des chemins d'attribut. 

 Switch 'post.title' à 'post.title.Rendad'
 Switch 'post.preview' to 'post.acf.preview'
 Switch 'post.previsimage' à 'post.acf.header_image_small'

11. Mettre à jour V-for Loop

Dans le composant des messages, il y a une directive VUE.JS dans l'utilisation appelée v-pour . Ceci boucle à travers tous les messages et pour chacun imprime une instance de la composante postale, les affichant dans une liste.

Nous devons mettre à jour le chemin transmis à cette directive car il utilise toujours les données de test factice locales. Mettez à jour la directive V-pour pour l'extraction ci-dessous afin de pointer sur nos messages stockés dans le magasin VUEX. 

 V-for = "Post dans ceci. $ Store.state.posts.posts"

12. faire du ménage

Une liste des messages WordPress devrait maintenant afficher. Comme nous n'utilisons plus les données de poste locales, supprimons-nous src / données . Ensuite, dans le composant des poteaux, retirez le Posts: postdata.data Propriété dans les composants Store de données locales, puis l'importation postdata.

13. correction de l'auteur post-poste

Vous remarquerez peut-être que pour chaque poste l'auteur apparaît en tant que numéro. En effet, l'API WordPress renvoie un identifiant d'auteur plutôt qu'un nom. Nous devons utiliser cet ID pour interroger WordPress pour les informations complètes de l'auteur. Commençons par créer un endroit pour stocker cela dans notre magasin VUEX, à côté de nos informations de poteau, dans magasin / index.js .

[dix] 
Etat: {
  Auteurs: NULL,
  Posts: NULL}

14. Créer une action getAuthors

Comme pour les postes, nous allons créer une action dans /Store/index.js pour déclencher une demande AJAX à la requête WordPress API. Une fois la réponse réussie reçue, la promesse va alors résoudre et déclencher la réservoirs mutation, que nous allons créer ensuite. 

 GetAuthors: fonction (contexte) {
  axios.get ('http://lukeharison.net/
  Webdesigner / WP-JSON / WP / V2 / Utilisateurs ')
  .Ce (fonction (réponse) {
  context.commit ('storeauteurs',
  Response.Data)
  })
}

15. Créer une mutation de storéeumes

Dans l'objet de mutations du magasin VUEX, créez le réservoirs mutation en utilisant l'extrait ci-dessous. Comme avec magasins À partir de l'étape 8, cela prend la charge utile qu'elle est passée et la définit comme valeur de la propriété des auteurs dans l'état de notre magasin. 

 ThereAuteurs (état, réponse) {
  État.Auteurs = réponse}

16. Déclencher des gethateurs sur la charge

Nous devons obtenir les informations de WordPress à partir de WordPress dès que l'application commence à charger. Modifions le composant de niveau supérieur App.vue à nouveau et expédiez la getAuthors action dans le même créé() crochet de cycle de vie comme le getPorts action. 

 Créé () {
  Ceci. $ Store.dispatch ('GetAuthors')
   Ceci. $ Store.dispatch ('getPosts')}

17. Créer une méthode getansername

Maintenant, nous interrogeons WordPress pour les informations de l'auteur sur la charge, tout ce que nous avons à faire est de définir une méthode dans notre composant de messages qui nous permet de passer un identifiant d'auteur et d'obtenir un nom en retour. Copiez l'extrait ci-dessous dans l'objet méthodes du composant des postes, ci-dessous. GetingleLePost méthode. 

 getansername: fonction (userid) {
  Var USERNAME = 'Inconnu';
  Ceci. $ banque.state.
  auteurs.filter (fonction (utilisateur) {
  Si (user.id === userid) {
  Nom d'utilisateur = utilisateur.nom
  }
  });
  retourner nom d'utilisateur;
}

18. Appeler la méthode getansername

Maintenant, nous devons juste appeler getansername . Toujours dans le composant Posts, dans le modèle, remplacez la référence de l'attribut de l'auteur à post.author Donc, il reflète l'extrait ci-dessous. Le nom de l'auteur doit maintenant être correctement afficher pour chaque message. 

: Auteur = "getansername (post.author)"

19. Blog Chargement

Comme nous chargons les données post-note de manière asynchrone, il y a un moment avant la fin de la demande où l'application est vide. Pour contrer cela, nous mettrons en œuvre un état de chargement actif jusqu'à ce que le blog soit complètement peuplé. Dans le composant des poteaux, coller l'extrait ci-dessous juste après l'ouverture & lt; script & gt; Tag pour importer les icônes nous utiliserons. 

 Importer une icône de '@ / composants / icônes / icônes'
Importer le chargement de './../../../
Actifs / IMG / Loading.svg '

20. Ajouter une icône à la liste de composants

Ensuite, toujours dans les messages, ajoutez une référence à l'icône dans les objets de composants. Cela rend le composant des postes au courant de notre composant d'icônes récemment importé. 

 Composants: {
   icône,
   post}

21. Créer des éléments de chargement

Nous devons maintenant simplement ajouter les éléments de chargement au modèle de messages afin qu'il apparaisse sur la page. Premièrement, enveloppez la seconde div dans l'extrait de l'extrait autour des deux divs avec le V-si Directives Pour s'assurer qu'aucun message apparaît avant que le chargement soit terminé.

Ajoutez ensuite le premier DIV de l'extrait au-dessus de celui-ci. Ceci contient l'icône de chargement et un V-si La directive, ce qui signifie qu'il ne sera visible que jusqu'au point où l'application est entièrement chargée. Une fois terminé, le chargement doit maintenant être mis en œuvre. 

 & lt; div v-if = "! Ça. $ Magasin.state.posts.posts"
Classe = "U-Align-Center" & GT;
   & lt; classe d'icône = "C-icon-chargement"
   utiliser = "chargement" & gt; & lt; / icône & gt;
& lt; / div et gt;
& lt; div v-if = "ceci. $ stocker.state.posts.posts" & gt;
   [...]
& lt; / div et gt;

22. Mettre à jour les chemins d'attributs posts simples

La seule chose à faire est de vous assurer que les postes simples sont correctement configurés afin qu'ils utilisent les données de WordPress Post dans le magasin VUEX. La première étape consiste à mettre à jour les chemins d'attribut dans le modèle de composant Posts dans la v-if = "this.type === 'single'" DIV, qui gère l'affichage des postes simples. 

 Switch 'singlepost.title' à 'singlepost.title.Rendé'
 Switch 'singlepost.author' to 'getansername (monopost.author)'
 Switch 'monopost.fullImage' to 'singlepost.acf.header_image'
 Switch 'monopospost.Content' à 'OPLOPOST. Content.Rendait '

23. Méthode de Refacteur GetingEst

Nous devons également refacturer les composants des poteaux GetingleLePost méthode. Il doit retourner une promesse qui envoie la getPorts action. Dans le suivi alors Fonction, nous rechercherons les messages du magasin VUEX pour une entrée avec une limace correspondant à celle transmise dans l'URL. Si trouvé, nous copierons les données sur l'état local de notre composant et résoudre la promesse. Si ce n'est pas trouvé, la promesse sera rejetée. 

 GetingleSost: fonction () {
   retourner nouvelle promesse
   ((résolution, rejet) = & gt; {
  Ceci. $ stocker.dispatch ('getPosts')
  .Ce (() = & gt; {
  Var Foundpost = False;
  Ceci. $ stocker.state.posts.
  Filtre ((POST) = & GT; {
  Si (post.slug ===
  ceci. $ route.params.slug) {
  ceci.singlepost = poste;
  Foundpost = vrai; }
  });
  Fondspost? résolution (): rejet ();
  })
  })
}

24. Postes de refacteurs créés () Crochet

Ensuite, nous devons refacturer la créé() Crochet de cycle de vie dans le composant des poteaux. Si nous devons afficher un seul post, le crochet doit appeler le GetingleLePost Méthode de l'étape précédente, et si sa promesse est rejetée, envoyez l'utilisateur à la page 404 'page non trouvée'. Il s'agit de prendre en compte des scénarios où les utilisateurs entrent dans une limace post non existante dans l'URL. 

 Créé () {
  Si (cela.type === 'single') {
  cela.GetsinglePost (). Ensuite (null, () = & gt; {
  Ceci. $ routeur.push ({nom: 'pagenotfound'})
  });
  }
}

25. Ajouter V-Directive

La dernière étape consiste à ajouter le snippet ci-dessous au composant post de la v-if = "this.type === 'single'" div dans le gabarit. Cette directive signifie que le message ne s'affichera que lorsque les données de poste locales sont disponibles par le GetingleLePost la méthode est peuplée. Il s'agit d'arrêter de reproduire de manière prématurée le composant et de provoquer des erreurs. 

 V-if = "monoptpost"

26. Construire l'application

Maintenant, avec tout ce qui fonctionne, dans la console, annuler la NPM Run Dev Commandez ou ouvrez une nouvelle console et exécutez la commande ci-dessous pour générer une version de production prête à télécharger sur votre propre serveur. Cela apparaîtra dans le distinguer annuaire. 

 NPM Run Build

Cet article est apparu dans le numéro 268 de Web Designer, le magazine Creative Web Design - proposant des didacticiels experts, des tendances de pointe et des ressources gratuites. Abonnez-vous au concepteur Web maintenant.

Lire la suite:

  • 32 meilleurs thèmes WordPress gratuits
  • 10 meilleures ressources WordPress
  • Le Meilleures plateformes de blogging gratuites
[dix] [dix]
[dix]

Comment - Most Popular Articles

Comment kitbash sur le go avec ShapR3D

Comment Sep 14, 2025

[DIX] [DIX] [DIX] [dix] (Crédit d'image: Adam Dewhirst) [DIX] SHAXR3D est un excell..

Comment créer des analyses 3D avec la capture de la réalité

Comment Sep 14, 2025

[DIX] [DIX] [DIX] [dix] (Crédit d'Images: Phil Nolan) [DIX] La Capture de la Réali..

Animate SVG avec JavaScript

Comment Sep 14, 2025

[DIX] [DIX] [DIX] [dix] [DIX] Il y a tellement de choses qui -ènes d'estre Obtenues de Manière natif da..

Utilisez Marmoset Toolbag pour présenter des modèles en VR

Comment Sep 14, 2025

[dix] [dix] [dix] [dix] Marmoset Toolbag n'est nullement nouveau sur le Art 3D ..

Comment préparer un fichier pour imprimer

Comment Sep 14, 2025

[dix] [dix] [dix] [dix] En tant qu'artement à Wieden + Kennedy Londre..

Construire une application de conception de matériaux avec angulaire 2

Comment Sep 14, 2025

[dix] [dix] [dix] [dix] Le matériau angulaire est un cadre de composant UI qui implémente la spéci..

Comment peindre des réflexions convaincantes

Comment Sep 14, 2025

[dix] [dix] [dix] [dix] Les techniques de peinture numériques permettent de représenter des réflex..

Comment commencer avec Sass

Comment Sep 14, 2025

[dix] [dix] [dix] [dix] Toupet est un outil puissant qui apporte de nombreuse..

Catégories