Chargement dynamique des messages WordPress avec Ajax
Ajax est devenu populaire au cours des deux dernières années, pour de bonnes raisons. Ajax (JavaScript asynchrone et XML) est un moyen de \
Remarque: Si vous avez du mal à configurer Ajax sur votre site, nous pouvons vous aider! Notre équipe de support peut vous aider à résoudre n’importe quel problème WordPress (pas seulement à propos de nos plugins!), Par conséquent, si vous avez des problèmes avec Ajax ou si vous souhaitez obtenir des conseils sur la façon d’apporter des changements à CSS, veuillez nous contacter! Pourquoi Ajax est – il utilisé? Lorsque WordPress charge la première page d’un article sur le site WordPress, il les demande à partir de la base de données et utilise une boucle pour les voir avec les balises que nous avons ajoutées. En plus de cela, des menus de navigation, des widgets, des graphiques et d’autres médias, des fichiers Javascript, des feuilles de style et beaucoup d’autres contenus sont chargés.
Bande passante et mauvaise expérience utilisateur. Après tout, personne n’aime attendre que la page soit chargée.
Pour commencer: créez un sous – thème avant de modifier 2015, nous devrions créer un sous – thème. Cela nous permet de continuer à mettre à jour le sujet sans perdre les changements que nous avons apportés. Vous pouvez lire tout sur la façon de faire cela dans le Guide comment créer des thèmes wordpress pour les enfants. Salut, Ajax! Commençons par un exemple simple qui montre comment Ajax fonctionne. Nous allons lier directement dans la barre de pagination au bas de la page, de sorte que lorsque vous cliquez sur le numéro de page, la page sera chargée dynamiquement en utilisant Ajax. Lorsque vous cliquez sur le lien de mise en page, nous envoyons une demande au serveur et en informons les résultats.
Notez que j’ai utilisé get _ Template Directory Uri () lors de la mise en file des feuilles de style. Cette fonction pointe toujours vers le Répertoire du sujet principal. Dans la file d’attente du script, j’ai utilisé get _ Stylesheet Directory Uri (). Explorer
Ou pointez vers un répertoire de sous – thèmes, s’il est utilisé dans un sous – thème. Comme nous chargeons le script dans le pied de page, vous pouvez coller l’alerte (script en file d’attente) dans la pagination Ajax. JS et rechargez la page pour vérifier qu’elle fonctionne. Dans l’affirmative, le texte doit être correctement averti. Créer un événement la prochaine tâche consiste à créer un événement qui déclenchera un appel Ajax. Dans notre exemple, l’événement est un clic sur un lien spécifique. Pour démarrer le lien, nous devons connaître la classe de l’élément et l’ID qui l’entoure.
Pour l’instant, nous n’avons pas à nous soucier de tout cela, nous nous concentrons uniquement sur les connexions dans le conteneur de mise en page. Nous pouvons créer un avertissement simple: instructions pour charger 5ca270c7c9ddd18e57b4 Notez que tout est contenu dans une fonction anonyme. Je vous suggère de faire de même. Regardez ce post et voyez pourquoi ça marche. J’a i créé un événement de clic qui bloque l’activation de la fonction par défaut (c. – à – D. le chargement de la page) et avertit le texte. Plutôt que de traiter les données du client (avertissements pour le texte par défaut), nous devrions obtenir des données dynamiques du côté serveur. On doit se préparer. C’est pourquoi: Nous devons fournir une URL pour les appels Ajax
Warrell. Nos fichiers JavaScript ne connaissent pas notre environnement, donc nous ne pouvons pas utiliser quelque chose comme get _ Stylesheet Directory Uri (). Cependant, nous pouvons utiliser des techniques de localisation pour passer des variables à JavaScript. Faisons ceci maintenant dans la fonction fichier:
Instructions pour charger 5ca270c7c9ddd18e57b4 l’ajout de ce code à mon _ enqueue Assets () définit l’objet ajaxpagination (paramètre 2). L’objet reçoit ses membres selon le tableau fourni comme troisième argument dans la fonction WP _ localize script (). En d’autres termes, après avoir ajouté ce code, nous devrions être en mesure d’utiliser Ajax pagination. La définition d’URL Ajax gère les URL Ajax. Php que nous utilisons pour traiter les appels Ajax. Il fonctionne parce que la fonction de localisation renvoie la définition de cet objet avant de charger JavaScript. Ça ressemble à ça:
5ca270c7c9ddd18e57b4 retour à notre fichier javascript, nous avons maintenant tout ce dont nous avons besoin pour créer des appels Ajax. Comme vous pouvez le voir, chargez les instructions pour 5ca270c7c9ddd18e57b4, la fonction $. Ajax () est celui que nous utilisons ici. Les méthodes Post et get ont des fonctions spéciales, mais en raison de leur flexibilité, je préfère utiliser cette fonction. Vous pouvez lire tous les paramètres du document jquery. En utilisant le paramètre URL, nous passons l’URL du script auquel nous voulons envoyer les données. Il devrait s’agir de gérer les fichiers Ajax. PHP est situé dans le répertoire WP admin. Nous l’avons défini ci – dessus en utilisant WP _ localize script ().
Le type est défini à post. Nous pouvons également utiliser get, notre requête n’est pas très sensible, mais je préfère envoyer des données à moins que l’utilisateur ait besoin d’accéder aux paramètres. Le paramètre donné est l’objet contenant les données à transmettre. Dans notre exemple, j’aurai accès à $u post [‘action] avec une valeur de
Pour plus de clarté, j’ai utilisé _ Ajax Paging. La fonction elle – même peut contenir tout ce que vous voulez. Vous pouvez déconnecter les utilisateurs, obtenir leurs données, poster des messages, et plus encore. Que vous vouliez revenir au Javascript, vous devez répondre. Dans l’exemple ci – dessus, j’ai utilisé le titre du blog get _ bloginfo (), obtenu dynamiquement à partir de la fonction get bloginfo (). La dernière étape consiste à utiliser die (). Si nous ne le définissons pas, la fonction die définie dans admin Ajax. Php démarrera et gérera Ajax à la fin du fichier. Php per admin Ajax. Php 0 et tout autre contenu auquel vous répondez. Si vous essayez le code ci – dessus, vous devriez maintenant voir le titre du site retourné. Aperçu Voici notre exemple de base! Avant de continuer à publier sur Ajax, résumons rapidement les étapes nécessaires pour effectuer l’Opération Ajax: Si vous n’avez pas encore de fichier javascript, ajoutez un fichier javascript. Utilisez WP _ localize script () pour passer l’URL qui gère le fichier Ajax. Php crée un appel Ajax en javascript en ajoutant une fonction pour chiffrer la fonction avec le nom de crochet approprié, qui peut immédiatement utiliser Ajax pour renvoyer les données dans un billet de chargement Javascript pour des résultats intéressants! J’ai commencé ce projet en écrivant du code JavaScript. Il va sans dire que c’est la version de base. Nous allons bientôt l’étendre avec une expérience utilisateur optimisée. Instructions pour charger 5ca270c7c9ddd18e57b4 Ceci est à peu près le même que notre exemple de base. La première chose que vous remarquerez est que j’a i ajouté un moyen de détecter quelle page l’utilisateur veut demander. Chaque lien a un élément de portée caché (pour le lecteur d’écran). Je clone les éléments pour m’assurer qu’ils ne sont pas modifiés, que les travées sont supprimées et que les éléments restants sont analysés dans leur ensemble. Cela nous donne le numéro de page désiré. J’ai aussi besoin de connaître les paramètres de requête utilisés. Sur la page d’accueil, c’est très simple
Paramètre pagé parce que nous utilisons la requête par défaut. Si nous commençons par une page d’archive, comme une archive de catégorie, nous devons également connaître le nom de la catégorie. Nous passerons les variables de requête en utilisant la méthode de localisation que nous avons apprise précédemment. Maintenant, nous allons utiliser Ajax pagination. Interrogez les variables même si elles ne sont pas définies. Enfin, si nous réussissons, nous supprimerons tous les éléments d’article du conteneur principal, supprimerons les éléments de pagination et ajouterons la valeur de retour de l’appel Ajax au conteneur principal. Cette valeur de retour contiendra le message et le nouvel élément de navigation. Notez que j’ai changé le nom du paramètre de réponse en HTML parce que c’est plus logique. Enfin, nous utilisons un tableau localisé pour passer les paramètres de requête originaux. La fonction suivante doit être insérée dans la fonction my _ enqueue Assets () pour remplacer la locale précédente: instructions pour charger 5ca270c7c9ddd18e57b4 tout ce que nous avons à faire maintenant est la fonction my Ajax pagination () My Ajax pagination (). Quoi que cette fonctionnalité réponde, elle remplacera le contenu de notre page. Voici le dernier morceau de code, expliqué comme suit: instructions pour charger 5ca270c7c9ddd18e57b4 avec les paramètres passés nous avons construit une requête personnalisée. Il s’agit principalement d’obtenir les variables de requête que nous passons et de nous assurer que le numéro de page que nous passons écrase les paramètres de pagination. Ensuite, nous créons une nouvelle requête en utilisant le tableau $QUERY _ Vars final. Nous devons rendre la variable $global [‘WP _ Query’] égale à notre nouvel objet post. La raison pour laquelle nous devons le faire est que la fonction _ posts pagination () utilise cette variable globale. Ensuite, Notez que j’ai ajouté une fonction au filtre Editor _ Max Image Size et que j’ai supprimé plusieurs lignes. C’est l’affaire de l’INSP.
Je croyais que c’était sorti. J’ai en fait créé une carte de suivi WordPress. Nous pouvons constater des progrès dans ce domaine! Le problème, c’est que lorsque les images sont téléchargées dans le Post, elles ont toutes l’air bien. Cependant, si vous n’utilisez pas ces filtres lorsque vous terminez le tutoriel cost, votre image sera plus étroite, avec seulement 660 pixels de largeur, au lieu de 825 pixels de largeur requis. La raison en est que la fonction qui charge l’image appelle finalement une fonction appelée image _ Constraint size for editor (). Cette fonctionnalité garantit que l’image dans l’éditeur post n’est pas trop large. Pour déterminer la durée de cette réduction de taille, utilisez la fonction is _ admin (). Parce que notre code gère Ajax. PHP est techniquement admin Ajax. Php, WordPress Redimensionne les images en pensant à tort que nous les utilisons dans un éditeur. Heureusement, nous pouvons utiliser le filtre Editor _ Max Image Size pour déterminer la taille maximale de l’éditeur. Comme nous voulons garder tout comme nous l’avons fait, sauf lors d’un appel Ajax, nous ajoutons un filtre avec une valeur personnalisée (array (825510)) et le retirons immédiatement pour nous assurer qu’il ne cause aucun problème ailleurs. L’étape suivante consiste à utiliser notre requête pour lister nos messages. J’ai copié beaucoup de choses à partir du fichier index. Php dans le thème parent. S’il n’y a pas de message, nous utiliserons le modèle utilisé pour le traiter, sinon nous ferons défiler le message et utiliserons le modèle de visualisation du message. Enfin, nous utilisons le même format de mise en page que dans le fichier index. Considérations concernant les appels Ajax il est important de se rappeler que les appels Ajax sont toujours considérés comme étant initiés par un administrateur. Cela signifie que les ébauches, les plans et les messages personnels peuvent être retournés par cet appel. Si vous ne voulez pas que cela se produise, vous devez vérifier le comportement avec les paramètres appropriés, tels que l’état post \ U. Migl
Do nonces), par exemple. WordPress dispose d’une protection intégrée dans certains cas lors de l’utilisation d’une approche générale, mais pour Ajax, vous devez généralement y réfléchir vous – même. La relégation élégante est un autre aspect d’Ajax, bien que certaines choses deviennent moins importantes. En gros, pas de Javascript, pas d’Ajax. Si vous êtes fortement dépendant d’Ajax, nos applications ne seront pas disponibles pour les utilisateurs avec Ajax désactivé. Le JavaScript est devenu si courant que cela n’a presque pas d’importance, mais peut se produire dans certains cas. Dans ce cas, vous devez vous assurer que le clic sur le lien réel fonctionne également. L’expérience utilisateur est souvent négligée. Les fonctionnalités Ajax sont vraiment intéressantes, mais un site Web qui fonctionne bien est plus intéressant. Les utilisateurs ont l’habitude de charger des pages lorsqu’ils cliquent sur un lien. Vous devez rendre tout très transparent et les utilisateurs doivent savoir ce qui se passe et pourquoi. Vous devriez utiliser Ajax pour améliorer votre travail au lieu d’utiliser bling autant que possible. Comme vous pouvez le voir, la mise en œuvre d’Ajax nécessite un peu de préparation et de pratique, mais une fois qu’il devient une seconde nature, vous le trouverez facile. Vous avez peut – être pris un peu de temps pour le lire, et la première fois que vous l’avez lu, cela pourrait prendre plus de temps, mais j’ai encodé l’échantillon entier en environ 15 minutes. Ajax est l’une de ces technologies qui peut être difficile à mettre en œuvre, car il contient presque tous les langages de programmation utilisés dans des cadres tels que WordPress. Des conventions telles que le crochet et le positionnement doivent être respectées et les choses deviennent plus actives. C’est en forgeant qu’on devient forgeron. Je te promets que si tu commences à utiliser Ajax, tu vas adorer. Avez – vous mis en œuvre Ajax sur votre site Web? Quelles sont les autres utilisations d’ajax dans WordPress? Veuillez nous faire part de vos réflexions dans les commentaires ci – dessous. Étiquettes: développeurs PHP