Création d’une entreprise commune Applications hybrides d’une page avec vuejs dans WordPress

Si vous avez besoin d’utiliser le javascript moderne ou vue, les conférenciers WordPress suivront les cours accélérés es6 et es7 de cinq minutes es2015 (es6). JS dépendra entièrement de vos besoins et préférences. Mon objectif est de vous aider à explorer la possibilité d’intégrer une application d’une page dans WordPress et une application de recherche pratique. Allons – y!
Vue d’ensemble spa dans WordPress dans cet article, j’ai utilisé vue pour créer une application de recherche d’une page dans WordPress. JS utilise des sous – thèmes du thème WordPress 2017. Vous pouvez télécharger les sous – thèmes ici pour en savoir plus sur le contenu de l’article. L’application de recherche peut être affichée sur n’importe quelle page WordPress en utilisant un modèle de page personnalisé. Le modèle de page fournit essentiellement un élément Dom existant à monter pour l’Instance vue. Intégrer l’application vue. JS dans WordPress avec des modèles de page personnalisés puis l’application adopte une approche hybride ou hybride, où l’application côté serveur (WordPress) dessert également l’avant – plan, mais certaines applications sont rendues par des applications côté client telles que vue. Contrairement à Spa pur, qui peut utiliser un CMS sans en – tête ou découplé, où le moteur côté serveur n’est responsable que de la livraison (via API) et ne génère pas de HTML pour le rendu.
Utilisez vue pour améliorer votre expérience de recherche. Dans les scénarios de recherche traditionnels, chaque demande au serveur entraîne un rechargement de la page. Cependant, utilisez vue. Méthode JS ou Spa, la page est mise à jour dynamiquement lorsque l’utilisateur interagit avec la recherche, mais ne recharge pas continuellement. Cela rend l’expérience utilisateur très agréable. En fait, vous pouvez essayer ce stylo que j’ai créé: mon application de recherche vue est basée sur l’exemple de stylo ci – dessus. Avant d’aller plus loin dans le Code, examinons donc les opérations internes de l’application de recherche.
Analyse de l’application de recherche d’une page de vue la
Commençons donc à construire l’application. La mise en place d’un flux de travail de développement local avec vue CLI pour décomposer le Code en plusieurs fichiers (.Vue) et en un seul composant de fichier nécessite des outils de développement tels que vue Loader, webpack, Babel, etc. Cependant, ne vous laissez pas berner, car je vais garder les choses très simples, indépendamment du profil. Avec le CLI vue, vous pouvez rapidement empiler les applications vue préconfigurées en utilisant les meilleurs outils de construction pour les flux de travail frontaux modernes. Par conséquent, nous commençons par configurer le CLI.
Étape 1: installez le noeud. JS pour utiliser vue CLI, vous avez besoin d’un noeud. JS (de préférence 8.x, NPM version 3 ou plus) est installé sur le système. Vous pouvez télécharger l’installateur de la plateforme à partir de la page de téléchargement du noeud. Voici JS. Une fois la configuration terminée, assurez – vous que les commandes suivantes fonctionnent correctement: Node – – version et NPM – – version Étape 2: installez le CLI vue, puis ouvrez le terminal système (dans mon cas powershell) et installez le CLI vue (2.x) à l’échelle mondiale en exécutant NPM install – G vue CLI. Une fois terminé, vérifiez qu’il fonctionne correctement en exécutant la commande vue – – version. Configurer vue CLI (2.x) dans l’illustration ci – dessus pour créer l’application vue, vous remarquerez que j’ai également install é le niveau mondial eslint avec NPM install – g eslint. C’est parce que j’utilise l’éditeur de code Visual Studio et ses plug – ins pour formater et filtrer JavaScript. Vous pouvez utiliser n’importe quel éditeur de code de votre choix, mais il est fortement recommandé de configurer un éditeur en utilisant JavaScript lInter. Une fois la configuration de base terminée, nous utiliserons vue CLI pour créer une application dans WordPress. Pour créer une application vue en utilisant le CLI vue, j’a i utilisé un modèle simple de vue JS sur la page Web officielle. Cependant, vous devrez peut – être utiliser des modèles plus complexes au besoin.
Le modèle utilise webpack pour configurer le projet vue et le serveur de développement pour le configurer
Et d’autres outils de compilation modernes. Cela nous donne un flux de travail de développement détaillé. Il nous permet, entre autres, d’écrire du Code en utilisant NextGen JavaScript (es6 \/ es7) pendant le développement, mais il compile des paquets JavaScript dans es5 pour améliorer la compatibilité du navigateur. Étape 1: configurer l’application vue dans wordpress pour configurer le projet vue et se connecter au thème ou sous – thème WordPress en utilisant le terminal système. Ici, j’utilise powershell (dans Windows 10) intégré à l’éditeur de code Visual Studio. Allez dans le répertoire des thèmes WordPress Étape 2: créez l’application vue en utilisant le modèle simple webpack, puis lancez la commande View init webpack simple Project Name pour remplacer le nom du projet par le nom du projet (spa dans mon exemple) et suivez les instructions à l’écran. Utilisez l’init vue et le modèle de paquet Web pour construire l’application vue Remarque: Si vous suivez mon sous – thème vueventyseven, sautez cette étape. L’application est déjà incluse dans le dossier du projet spa. Ceci crée le projet vue dans le Répertoire A une configuration pour les outils de construction modernes. Étape 3: installer les dépendances de développement si vous utilisez l’éditeur de code pour aller sur le thème WordPress et voir le dossier du projet nouvellement créé, dans de nombreux nouveaux fichiers, vous remarquerez un fichier appelé package. Json. Liste essentiellement tous les outils de développement dont votre application a besoin. Cependant, ces outils doivent encore être install és, pour ce faire, lancez ce qui suit: CD Project Name (remplacer le nom du projet par le dossier du projet) NPM install NPM téléchargera et installera toutes les dépendances nécessaires dans un dossier appelé Node _ modules Installer des dépendances de développement en utilisant NPM Veuillez noter que nous n’implémentons aucun fichier téléchargé dans WordPress. Ils ne sont nécessaires qu’au stade du développement. Étape 4: exécuter le paquet Web du développeur
La dernière étape du serveur et de WordPress consiste à exécuter le serveur de développement de paquets Web installé à l’étape précédente. Au début, cela peut sembler étrange, mais vous devez exécuter le serveur de développement (installé à l’étape précédente) et le faire fonctionner avec un serveur WordPress local (xamp, Wamp, VVV, etc.). Bien que vue Spa soit une application client, elle doit d’abord être desservie par un serveur, et le serveur de paquets Web nous servira. Ce n’est qu’une fois le développement terminé que nous fournirons le paquet JavaScript final via WordPress. Pour démarrer le serveur de développement, lancez la commande NPM Run Dev à partir du dossier vue Project. Vous verrez ensuite que l’application Vue initiale s’ouvre automatiquement sur localhost: 8080 dans le navigateur. Exécuter le serveur de développement de paquets Web vue package (build.js) Si vous regardez la source de la page de lancement de l’application dans votre navigateur, vous remarquerez que la page ne contient qu’un seul fichier de script – Build. JS. C’est parce que lorsque vous lancez le serveur de développement, webpack compile automatiquement l’application vue et la combine avec la Bibliothèque vue et toute autre dépendance dans un fichier javascript. Cependant, gardez à l’esprit que le fichier n’existe pas réellement dans votre système, mais est généré dynamiquement par les noeuds en cours d’exécution et les paquets Web. Pour générer un fichier de construction physique, vous pouvez l’envoyer avec votre application, vous devez exécuter NPM Run build, comme nous le verrons plus tard. À ce stade, nous disposons d’une application vue entièrement fonctionnelle, desservie par un serveur de développement dans le dossier thèmes WordPress. Cependant, il n’a rien à voir avec wordpress. Voyons donc comment intégrer l’application vue avec les thèmes WordPress. L’intégration de vue Spa avec wordpress l’intégration de l’application vue avec wordpress nécessite essentiellement trois choses: un élément Dom dans wordpress pour monter l’application vue ACCD
Avis de développement de paquets vue dans WordPress vue les points de montage Dom dans WordPress fournissent des éléments Dom pour vue dans WordPress vous pouvez vouloir lier l’application vue à une seule page WordPress ou à plusieurs pages, ou conditionnellement à plusieurs pages. Vue n’a besoin que d’un élément Dom qui existe sur votre page WordPress préférée. Pour ce faire, vous pouvez utiliser le modèle de hiérarchie wordpress pour décider quel fichier modèle vous souhaitez éditer. Dans mon exemple, je veux que l’application de recherche apparaisse sur n’importe quelle page WordPress qui utilise un modèle de page personnalisé spécifique. Au lieu de cela, vous voudrez peut – être cibler des pages spécifiques en utilisant des modèles de page normaux au besoin. Personnaliser le modèle de page \/ vue rechercher le modèle d’application. Mon exemple de sujet PHP fournit l’élément Dom # WP vue app pour vue. Charger le contenu fc6ec65077819aad1a33615eec47ddf9 enregistrer l’application vue dans wordpress pour que WordPress connaisse l’application vue, vous devez enregistrer \/ mettre en file d’attente le paquet vue dans WordPress. Cependant, vous ne pouvez pas générer un fichier build build après chaque changement dans le processus de développement. Pour ce faire, nous pouvons profiter de la construction dynamique que vous avez vue plus tôt. Tant que le serveur de développement webpack fonctionne, nous pouvons utiliser des chemins de construction dynamiques http:\/\/localhost:8080\/dist\/build.js Enregistrez le script vue dans WordPress. Le serveur webpack recompile également automatiquement le paquet vue et met à jour la page lorsque l’application change. Enregistrer les chemins de construction dynamiques dans WordPress pendant le développement c’est pourquoi il est nécessaire d’exécuter à la fois le serveur WordPress local et le serveur de paquets Web pendant le développement. À la fin du développement, vous devez changer le chemin pour qu’il reflète le fichier physique généré par l’exécution de NPM Run Build. Enregistrer les commentaires des fichiers de construction physique dans WordPress après le développement, sauf pacche
Tto vue finale, aucun fichier dans le dossier du projet vue ne doit être fourni avec les thèmes WordPress. Ils ne sont nécessaires que pendant le développement et lorsque des changements sont nécessaires pour régénérer le paquet vue. Dans mon exemple de sujet, j’ai enregistré le paquet vue dans le script includes \/ enqueue. Php Load e786b9c302896b22ee4001a8d57aa02c informe vue des points de montage dans WordPress Enfin, pour charger l’application vue dans WordPress, il suffit de dire à vue où monter. Pour ce faire, spécifiez les éléments Dom de WordPress en utilisant l’option el – in – main. JS du projet vue. Alternativement, vous pouvez utiliser la méthode $Mount. Dans mon exemple, j’ai chargé l’application dans le conteneur DIV de l’application # WP vue pour un modèle de page personnalisé. Utilisez l’option « el» pour spécifier le point de montage dans la vue, comme cela, l’application vue lancée sera rendue dans WordPress. Le rendu de l’application Vue initiale dans WordPress est fantastique, et comme l’application vue start a été insérée avec succès dans WordPress, vous pouvez maintenant créer presque tout en utilisant vue. Alors regardons les détails de mon application de recherche vue. Construire une application de recherche d’une page dans WordPress si vous regardez l’organigramme au début de l’article, vous pourrez vous associer à l’application de recherche finale comme suit: Créez une application de recherche vue dans la structure de dossier du projet wordpress pour la construire, et j’utilise simplement l’application de démarrage vue comme base. Je me suis débarrassé de SPA \/ index. J’ai trouvé la structure de dossier suivante avec HTML et src \/ assets pour le projet vue: Structure des dossiers de l’application de recherche vue dans WordPress si vous voulez connaître les dossiers contenus dans les sous – thèmes, c’est parce que j’utilise des fonctions. PHP est utilisé uniquement pour spécifier le crochet WordPress et pour définir ses callbacks dans les fichiers PHP individuels sous includes \/. Je préfère cette approche, en déversant tout dans une seule fonction de fichier. Php. Chargement du contenu cf0d04aa7e77a50d479beedb25d4
E650 ajouter des dépendances supplémentaires pour les fonctions eslint et ecmascriptnext (facultatif) Si vous prévoyez utiliser eslint (je recommande fortement) ou les fonctions esnext, comme async \/ Await, vous devrez ajouter des paquets de développement supplémentaires au projet. Configurer eslint pour WordPress et vue pour configurer eslint, j’ai installé les plugins eslint vue et eslint config WordPress. Pour ce faire, arrêtez le serveur de développement (Ctrl + c) et lancez la commande suivante à partir du dossier du projet vue: NPM install – – Save Dev eslint plugin vue NPM install – – Save Dev eslint config WordPress, puis ajoutez ce qui suit au fichier. Eslinrc. Json: \
La fonction WordPress WP _ localize script. Je l’ai fait dans le script includes \/ enqueue. Php of my Child Theme vuetwentyseventen. Charger 3160a325086acd89fc39fc56685df4a les points ci – dessus devraient être évidents dans tous mes commentaires, donc je me concentrerai sur les données que j’ai fournies à l’application vue: wpdata. Template _ Directory Uri – crée un chemin de fichier pour les ressources statiques (comme les images) dans le dossier des sujets wpdata. Rest _ URL – récupère l’URL du message de l’API WP wpdata rest. App _ path – Page Spa wordpress pour créer un lien wpdata relatif. Postes _ catégories – pour afficher les cases à cocher pour filtrer les messages mentionnés ci – dessus, examinons enfin les composants de fichiers individuels de l’application de recherche. Créez une application de recherche avec un seul fichier vue composant en utilisant la structure de l’application de recherche trace. Le premier composant que j’ai réellement créé était appdisplaycomponent. J’ai commencé avec un composant très simple, en utilisant l’api Fetch, l’api JavaScript Fetch et les ressources posts WordPress posts Resource – \/ WP \/ v2 \/ posts pour n’afficher que les titres des messages. Version de base du composant appdisplaypost Le composant appdisplaypost est une version très simple et pour commencer et l’afficher sur la page WordPress, j’ai supprimé tout le contenu initial de l’application. Vue et appdisplaypost appellent le composant appdisplaypost comme suit: Application. Le rendu de vue du composant appdisplaypost est très simple, mais tout ne fonctionne pas correctement lors de la première tentative (ou même plusieurs fois plus tard) que l’extension de vue devtools Chrome m’a sauvé. Je vous recommande de l’installer vous – même, car il vous permettra d’utiliser une interface plus intuitive pour déboguer et vérifier l’application vue au lieu de simplement enregistrer tout sur la console. Débogage de l’application vue avec vue devtools je recommande également des outils utiles
Le composant appgetposts et les messages sur appdisplaypost n’utilisent appdisplaypost que pour rendre le contenu requis pour chaque élément de message. Le composant appgetposts utilise les données de l’API rest pour séparer la logique de récupération des données, ce qui signifie également que le tableau posts est passé à appdisplayposts via props. Chargez le contenu f325f3c11e7031247866eff6874fd69d, donc dans appgetposts, j’ai appelé appdisplaypost pour chaque poste dans le tableau des postes. 34a0c96a19385944b4a1c7b5ca83af32 j’ai également décidé de récupérer des messages de l’api de repos WordPress en utilisant Axios au lieu de l’api Fetch Native. Je pense qu’il est plus approprié d’utiliser Axios pour les données de l’api, mais vous pouvez aussi choisir d’utiliser jquery (déjà inclus dans WordPress) pour les appels Ajax. Remarque: pour utiliser Axios, vous devez l’installer en tant que dépendance de production en exécutant NPM install Axios dans le dossier du projet vue. Récupération de champs spécifiques uniquement à partir de l’api WordPress rest récemment, j’ai découvert que seuls les champs nécessaires à la réponse de l’api peuvent être récupérés en utilisant le paramètre _ Fields. Cela réduit considérablement la taille de la charge utile, en particulier si vous ne voulez pas inclure le contenu du message dans votre réponse json. Pour ce faire, il suffit d’ajouter le paramètre _ Fields avec la liste des noms de champs séparés par des virgules comme valeur: WP \/ v2 \/ Posts Champ = ID, titre, extrait Inclure sélectivement le paramètre Field _ Fields dans la réponse json en utilisant le paramètre Fields n’a pas encore trouvé sa méthode dans le manuel de l’API rest, donc vous devrez peut – être y prêter attention. Récupérer tous les messages de l’api WordPress rest actuellement, tous les messages ne peuvent pas être récupérés de l’api WordPress rest. Pour ce faire, vous devez exécuter une boucle et faire plusieurs requêtes à l’API jusqu’à ce que les données demandées soient récupérées. Pour calculer le nombre de requêtes API, j’ai utilisé le paramètre paginate
N par page = 100 et X – WP – total les champs d’en – tête qui fournissent le nombre total d’enregistrements dans la bibliothèque. Le paramètre par _ page est actuellement limité à 100 enregistrements, c’est pourquoi nous devons faire plus de requêtes à l’API lorsqu’il y a plus de 100 messages. Vous le verrez dans la méthode Get _ posts de Component appgetposts dans le Juice suivant: Load Summary 8b67f44c78687f9322ebb31b697517 dans get posts ci – dessus, get posts est automatiquement appelé lorsque le Component est installé. J’utilise la fonction asynchrone \/ wait es7 pour marquer la méthode comme une fonction aychrone qui contient une expression wait. Vous remarquerez que la première demande Axios est marquée Await – Const Response = Await Axios (…). Cela empêchera les lignes de code suivantes de fonctionner jusqu’à ce que la demande soit résolue. Je l’ai fait pour récupérer l’en – tête total X – WP pour calculer le nombre de requêtes API requises. La deuxième utilisation de wait est à la fin, il attend toutes les promesses. Tout est plein d’espoir. Tout est avant la promesse. Rendre les données sur la page. Cependant, vous pouvez également rendre les données dès qu’elles sont disponibles de cette façon: le chargement de contenu 9bb57f1b71e4f903a1bb512b429a43a utilise les données disponibles dont vous avez besoin, puis j’ajoute la boîte d’entrée de recherche et la logique de filtre aux propriétés calculées. Le wppost suivant (appelé filteredresults) remplace le wppost pour invoquer le composant appdisplaypost. 5f65b73b38e9f45bc34e0bca8cd3a446 Components appquickssearch and appfilterswitches with appgetposts are responsible for Data Recovery and Filtering, and then I move user inputs to parent Components appquickssearch, which Use props to pass Data along the Chain. J’ai créé un nouveau composant appfilterswitches pour le rendu des filtres de catégorie appfilterswitches en utilisant l’objet wpdata WordPress localizz
Heure de départ prévue. Ce composant émet un événement onfiltertoggle personnalisé que le composant parent appquickssearch doit écouter. Enfin, tous les composants ont été fusionnés dans appquickssearch Loading Essential bf1f0e523d685910a115cad858c087b0. Enfin, je vais juste faire la queue pour exécuter la construction finale générée par NPM Run Build. Utilisez NPM Run Build pour construire la construction finale si vous avez terminé cette étape, vous devriez être en mesure d’explorer facilement le reste de votre application vous – même. La version finale du composant contient plus de contenu, mais elle est construite sur tout ce que vous venez de voir. Bien que je ne puisse fermer l’application qu’avec une recherche rapide, j’a i ajouté un autre composant de recherche appcustomsearch pour vous permettre d’explorer le routage vue et comment réutiliser facilement les différents composants avec l’aide d’accessoires. Le routeur vue est en dehors du champ d’application de cet article, mais vous pouvez trouver la fonctionnalité de routage dans le routage SPA \/ src \/ app. JS. Fournit une cartographie entre appquickssearch, appcustomsearch et les liens de navigation. Si vous utilisez enfin le routeur vue sur une page WordPress, n’oubliez pas que vue utilisera l’url « # » pour simuler la page afin qu’elle ne soit pas rechargée lors du passage d’une connexion routeur à l’autre. Si vous essayez d’exclure le hachage (voir mon commentaire dans app-routes.js), l’application achemine l’API. JS WordPress prendra le relais et vous finirez par trouver 404 introuvable. Composants de l’application. Vue héberge les composants appnavigation et Router view. Vous remarquerez également que les vues du routeur sont enveloppées dans keep Live pour préserver l’état des composants et éviter de les rendre de nouveau lorsque vous changez entre appquickssearch et appcustomsearch. C’est tout! J’espère que vous trouvez cet article utile. N’hésitez pas à utiliser mon application de recherche vue, que vous pouvez télécharger ici dans le cadre du thème enfants de 27 ans. Vous pouvez l’utiliser comme
Pratiquez et améliorez vos compétences WordPress et Javascript moderne. Vous avez intégré vue. JS dans WordPress? Veuillez nous le faire savoir dans les commentaires ci – dessous. Tag: vue. API de repos JS WordPress