Comment télécharger les résultats de recherche en utilisant Ajax dans WordPress
Ajax est un outil très puissant et flexible qui permet aux développeurs de créer des applications minces. Il peut être utilisé à diverses fins, comme le téléchargement de contenu ou la vérification des identifiants de connexion. Le principal avantage d’Ajax est qu’il est asynchrone, ce qui signifie que vous n’avez pas besoin de recharger toute la page pour recevoir de nouvelles données. WordPress fournit un bon équipement pour Ajax. Il dispose d’un excellent mécanisme qui vous permet d’implémenter facilement les fonctionnalités Ajax. Dans cet article, je vais expliquer les bases d’Ajax et créer une extension très simple qui utilise Ajax dans le sujet 214 par défaut pour extraire les résultats de recherche.
Qu’est – ce qu’Ajax? Ajax n’est pas vraiment une technologie, c’est un mélange de langages de programmation que vous connaissez peut – être déjà. Ajax est l’abréviation de J synchrone avascript et X ML. JavaScript est utilisé pour envoyer des données au serveur qui renvoie des données au format XML. XML n’est pas vraiment nécessaire, mais json est souvent utilisé. Lorsque nous utilisons json, nous l’appelons parfois Ajaj, pas Ajax. En fait, puisque vous pouvez renvoyer une chaîne simple ou HTML à partir du serveur, vous n’avez pas à vous limiter au XML ou au json. Dans cet article, je mentionnerai Ajax, quel que soit le type de données que nous retournons.
Comment Ajax est – il utilisé? Regardons un exemple pratique sans entrer dans le Code. Supposons que vous ayez créé un site immobilier et donné aux visiteurs la possibilité de sauvegarder les annonces pour une consultation ultérieure. Cette fonctionnalité est disponible en utilisant le bouton Enregistrer pour une utilisation future. Lorsque les utilisateurs cliquent sur ce bouton, ils sont dirigés vers un script qui ajoute la liste à la liste suivante et redirige vers la page qu’ils regardent. Cela signifie que la page doit être chargée à nouveau. Le site immobilier peut être
De plus, les images sont très riches et de nombreuses images peuvent ne pas être mises en cache, ce qui peut entraîner des temps de chargement plus longs.
Une meilleure solution est que l’utilisateur clique sur un bouton qui affiche une petite animation de chargement. Le bouton disparaît et le texte \
Si ça a l’air un peu compliqué, ne t’inquiète pas! En fait, le processus est très simple et ne prend qu’un certain temps à s’y habituer. L’utilisation d’ajax Ajax dans WordPress est totalement indépendante des cadres tels que WordPress. Tu peux le faire comme tu veux. Cependant, WordPress intégré prend en charge les flux de travail Ajax. Si vous souhaitez rendre votre plug – in ou votre thème attrayant, vous devez le suivre. Prenons un exemple très simple en trois étapes. Nous passerons d’une solution personnalisée à l’utilisation des bases Ajax dans WordPress au lieu d’utiliser Ajax lui – même pour une implémentation complète. Nous créerons un bouton unique qui s’affichera si l’utilisateur n’a pas cliqué ou si l’utilisateur a cliqué.
Avant de continuer, nous devons savoir comment savoir si l’utilisateur a cliqué sur pulsan
Toi. Si l’utilisateur clique sur le bouton, nous créons un méta – utilisateur cliqué avec la valeur \
Loading Essential 4b40f2c4d42973a22ba6 Notez que cette méthode n’est pas recommandée pour de nombreuses raisons, mais peut être utilisée comme preuve conceptuelle. Le bouton est affiché pour les utilisateurs enregistrés qui ne l’ont pas encore cliqué. Lorsque vous cliquez dessus, vous êtes redirigé vers la même page. L’élément utilisateur est enregistré avant le chargement du bouton, de sorte que le texte correct cliqué est affiché. Sans la base Ajax d’Ajax, prenons cet exemple pour nous rapprocher de l’implémentation Ajax. Nous pouvons déjà utiliser les fonctionnalités offertes par WordPress sans écrire de JavaScript. Il s’agit d’acheminer nos opérations en gérant Ajax. Php. Voyons comment le Code du bouton change en conséquence:
Charger Essential 4b40f2c4d42973a22ba6 le seul changement concerne l’URL du bouton. Gérer Ajax. Gestion de fichiers PHP Ajax. Php dans le Répertoire de gestion WordPress. De plus, un paramètre d’action avec une valeur de bouton _ clic est spécifié. Nous ne pouvons pas écrire de fonctions dans ce fichier pour gérer nos opérations car il s’agit d’un fichier WordPress de base. Cependant, nous pouvons les utiliser pour les relier à ces événements. Charger Essential 4b40f2c4d42973a22ba6 pour lier les fonctions aux opérations dans le fichier Manage Ajax. Php
Nous devons utiliser W p _ Ajax ou W P Ajax nopriv operation. Le premier n’est activé que pour les utilisateurs enregistrés et le second seulement pour les utilisateurs déconnectés. C’est déjà une bonne façon de protéger nos scripts!
Notez que j’ai également réécrit la fonction user _ clicked () pour faciliter les changements. Nous n’avons plus besoin de vérifier si l’utilisateur est connecté parce que c’est WP _ Ajax button Click. Cependant, nous devons vous rediriger vers la page précédente. Mise en oeuvre complète d’Ajax la mise en oeuvre complète d’Ajax s’appuiera sur les bases établies dans l’exemple précédent. Commençons par écrire un peu de JavaScript qui gère les événements qui cliquent sur les boutons. Lorsque l’essentiel 4b40f2c4d42973a22ba6 est chargé, nous détectons un clic sur le bouton et utilisons la fonction Ajax () pour envoyer une demande à l’administration du fichier Ajax. Php. Nous nous assurons que le type de demande est Post et que l’action est également donnée. Les éléments de l’objet de données sont transférés en tant que membres du tableau $_ post. Une fonctionnalité réussie est implémentée et si la réponse est ok, le bouton est remplacé par le texte que vous avez cliqué.
Notez que du point de vue de la gestion des fichiers Ajax. Php cette requête est très similaire à ce que nous avons fait lorsque nous avons envoyé l’utilisateur directement au fichier. Une fois l’action terminée, notre crochet précédent fonctionnera de la même façon. Lorsque vous chargez Essential 4b40f2c4d42973a22ba6 cette fois, vous n’avez pas besoin de rediriger l’utilisateur parce qu’il ne quitte pas la page en premier. Nous avons besoin d’echo \
C’est aussi une bonne façon de passer des variables, et c’est la même méthode que j’utilise ici. Cela nous permettra d’utiliser myajax. L’URL Ajax pointe vers l’URL correcte dans le JavaScript. J’ai aussi joint un fichier CSS. Le code CSS minimal que nous utiliserons peut être bien ajouté à la Feuille de style du sous – thème. J’a i choisi de mettre en file d’attente un fichier dédié juste pour subdiviser nos ressources, ce qui a finalement facilité la création de plug – ins à partir de là. L’étape suivante consiste à intercepter la recherche, en interrompant d’abord la recherche, puis en passant la requête de recherche au script personnalisé qui renvoie le nouveau résultat. Définissons maintenant Javascript pour cela: chargez Essential 4b40f2c4d42973a22ba6 j’utilise des événements pour ajouter des classes de chargement aux éléments de contenu et désactiver l’entrée avant d’envoyer. Cela vous donnera des commentaires et vous assurera que plusieurs recherches n’entraînent pas de demandes multiples. Si vous réussissez, le contenu de l’élément de contenu est remplacé par un nouveau résultat. Le CSS que nous utiliserons pour gérer les téléchargements est montré ci – dessous, ce qui diluera le contenu et générera une bonne superposition de chargement: chargez l’essentiel 4b40f2c4d42973a22ba6, et voici tous les regards de l’avant:
Ou utilisez toujours le bon format, même si le message n’est pas trouvé. Conclusion: Ajax est un excellent complément à la boîte à outils WordPress, de la petite amélioration de l’interface utilisateur à l’amélioration massive des performances. La première fois que vous le verrez, vous devrez peut – être essayer de le connaître, mais c’est très simple. Le JavaScript complexe à l’avant et le PHP complexe à l’extrémité serveur ajoutent de la complexité, ce qui rend parfois les choses plus difficiles qu’Ajax lui – même. Si vous êtes intéressé par les fonctionnalités Ajax, je vous recommande fortement de parcourir les plugins Ajax disponibles dans la Bibliothèque des plugins WordPress. Je recommande également de lire le tutoriel Ajax des écoles W3 et la documentation des fonctions Ajax jquery. Si vous avez créé quelque chose de génial avec Ajax dans WordPress, ou si vous pensez que certains aspects de WordPress bénéficieront grandement de l’ajout d’ajax, faites – nous savoir dans les commentaires ci – dessous. Étiquettes: Annotations Ajax