Comment utiliser Ajax dans WordPress

Publié: 2023-02-12

Si vous avez une clientèle engagée et active pour votre site Web, vous vous demandez peut-être comment vous pouvez leur offrir une expérience Web véritablement interactive et enrichie. Offrir une interactivité en temps réel peut être un grand attrait pour votre public.

Heureusement, JavaScript et XML asynchrones (Ajax) sont une méthode accessible pour ajouter des fonctionnalités interactives à votre site Web. En ce qui concerne WordPress, vous pouvez même simplifier le processus en utilisant un plugin basé sur Ajax.

Dans cet article, nous allons vous présenter Ajax et son fonctionnement. Nous vous expliquerons également comment démarrer avec Ajax dans WordPress. Allons droit au but !

Qu'est-ce qu'Ajax et comment ça marche ?

Ajax rassemble un certain nombre de langages de programmation différents, tels que HTML, CSS, JavaScript, etc. En action, il fonctionne dans les coulisses pour prendre les demandes d'un navigateur Web, les envoyer au serveur et transférer les résultats vers le navigateur.

En tant qu'internaute, vous ne saurez pas qu'Ajax est au travail. Vous obtiendrez simplement une expérience hautement interactive. Sur votre propre site, par exemple, vous pouvez utiliser Ajax pour accepter les likes sur les publications des utilisateurs connectés et afficher un décompte en temps réel.

Pourquoi Ajax est-il utile ?

Avec Ajax, les utilisateurs n'ont pas besoin de recharger une page pour voir certains changements. Cela signifie que votre site restera rapide et offrira une expérience utilisateur plus fluide. Comme Ajax est efficace, en n'envoyant que les données dont il a besoin dans les deux sens, il peut maximiser la bande passante et éviter des transferts de données plus lourds.

En tant qu'internautes, nous récoltons en permanence les avantages d'Ajax. Un exemple est la fonction de recherche de saisie semi-automatique de Google.

D'autres exemples que vous connaissez peut-être incluent les commentaires Facebook et les likes Instagram. Ajax est probablement à l'œuvre partout où vous pouvez interagir avec une page Web et recevoir des informations en retour instantanément.

Premiers pas avec Ajax dans WordPress

En ce qui concerne WordPress, il existe plusieurs façons d'utiliser Ajax. Tout d'abord, nous examinerons l'URL Ajax et comment l'utiliser avec les crochets de fonction WordPress.

L'URL Ajax dans WordPress

Étant donné que WordPress utilise Ajax par défaut dans le tableau de bord d'administration, ajouter plus de fonctionnalités Ajax n'est pas difficile. Cependant, si vous souhaitez utiliser Ajax sur le front-end de votre site, vous devrez comprendre le fonctionnement de l'URL Ajax.

Dans WordPress, votre fichier admin-ajax.php a une URL. Cela fournit les informations nécessaires pour envoyer des données à traiter et est vital pour le développement Ajax frontal. WordPress utilise un appel wp_localize_script() pour utiliser l'URL Ajax pour connecter les fonctions JavaScript et PHP, car PHP ne peut pas les refléter directement sans aide.

Comment utiliser le crochet d'action Ajax dans WordPress

WordPress utilise des hooks dans sa programmation, comme moyen pour les plugins et les thèmes d'interagir avec le WordPress Core. Les crochets existent en deux variétés : les "actions" et les "filtres". Avec Ajax, vous utiliserez des crochets d'action pour exécuter des fonctions.

Les actions vous permettent d'ajouter des données à WordPress ou de modifier son fonctionnement. Avec Ajax, vous utiliserez l'action wp_ajax_(action). Une fonction personnalisée peut alors être accrochée à cela, pour être exécutée lors d'un appel Ajax.

Par exemple, cet exemple de code WordPress montre comment un appel Ajax et un objet JavaScript peuvent être combinés dans le même fichier pour exécuter une action :

<?php

add_action( 'wp_ajax_mon_action', 'mon_action' );

function mon_action() {
global $wpdb ; // c'est ainsi que vous accédez à la base de données

$peu importe = intval( $_POST['peu importe'] );

$peu importe += 10;

echo $peu importe;

wp_die(); // ceci est nécessaire pour se terminer immédiatement et renvoyer une réponse appropriée
}

Vous pouvez également créer des fichiers JavaScript séparés pour vos actions Ajax. Vous devrez simplement vous assurer d'utiliser l'URL Ajax, afin que les appels ne soient pas perdus.

Comment utiliser Ajax en travaillant avec un exemple de plugin (3 étapes)

Si vous voulez expérimenter avec Ajax, la meilleure façon est de créer un plugin avec. Heureusement, il existe de nombreux exemples de code ou de plugins nus à partir desquels vous pouvez commencer. Pour cet exemple, nous allons utiliser un exemple de code téléchargeable WordPress Plugin Boilerplate.

Étape 1 : créer les structures de fichiers appropriées

Tout d'abord, vous devrez nommer votre plugin et créer les structures de fichiers appropriées pour celui-ci. Le nom doit être unique et n'entrer en conflit avec aucun autre outil du répertoire des plugins WordPress. En effet, lorsqu'un utilisateur télécharge votre plugin, il ira dans son répertoire wp-content/plugins/ .

Une fois que vous avez choisi un nom, vous devez créer au moins les trois fichiers suivants dans votre propre répertoire wp-content/plugins/ :

nom-du-plugin.php
nom-du-plugin.js
nom-du-plugin.css

Vous voudrez mettre le fichier .php dans le dossier de votre nouveau plugin et créer des sous-dossiers séparés pour les fichiers JavaScript et CSS. Tous les fichiers nécessaires au fonctionnement de votre plugin devront être situés dans le même dossier principal.

À l'étape suivante, vous verrez que l'exemple de code que nous utilisons est fourni avec des structures de fichiers pré-créées. Cependant, nous pensons qu'il est important de comprendre comment repartir de zéro et pourquoi vos fichiers doivent être structurés d'une certaine manière.

Étape 2 : Choisissez un exemple de code pour commencer

L'utilisation d'un exemple de fichier de code est un bon point de départ pour essayer Ajax sur votre premier plugin. Cependant, vous devez toujours revérifier votre exemple de code pour vous assurer qu'il est sûr et qu'il ne contient pas d'erreurs.

Comme nous l'avons mentionné précédemment, nous allons utiliser le WordPress Plugin Boilerplate pour notre exemple. Cet exemple de code est fourni avec les fichiers dont vous aurez besoin pour compléter votre plugin.

Cet exemple de plugin respecte également les normes de codage et de documentation de WordPress. Vous pouvez télécharger le fichier .zip du plugin à partir du site Web passe-partout pour commencer.

Étape 3 : Accrochez les actions à votre code

L'exemple de code du plugin que nous utilisons est construit avec la programmation orientée objet (POO). Cela aide les programmeurs à organiser leur code et crée un modèle de développement facilement partageable et réutilisable.

De plus, le code est fourni avec tous les fichiers nécessaires au développement du plugin, y compris les fichiers d'activation et de désactivation dans le répertoire /includes/ . Vous trouverez également facile de localiser les fichiers destinés au public et à l'administrateur selon vos besoins.

Jetons un coup d'œil à notre exemple de plugin, en visualisant le début du fichier plugin-name.php :

<?php

/**
* Le fichier d'amorçage du plugin
*
* Ce fichier est lu par WordPress pour générer les informations du plugin dans le plugin
* zone d'administration. Ce fichier comprend également toutes les dépendances utilisées par le plugin,
* enregistre les fonctions d'activation et de désactivation et définit une fonction
* enregistre les fonctions d'activation et de désactivation et définit une fonction
* qui démarre le plugin.
*
* @lien http://exemple.com
* @depuis la 1.0.0
* @package Plugin_Name
*
* @plugin-wordpress
* Nom du plugin : WordPress Plugin Boilerplate
* URI du plug-in : http://example.com/plugin-name-uri/
* Description : Il s'agit d'une courte description de ce que fait le plugin. Il est affiché dans la zone d'administration de WordPress.
*Version : 1.0.0
* Auteur : votre nom ou votre entreprise
* URI de l'auteur : http://example.com/
* Licence : GPL-2.0+
* URI de la licence : http://www.gnu.org/licenses/gpl-2.0.txt
* Domaine de texte : nom du plug-in
* Chemin du domaine : /languages
*/

Toutes les informations contenues dans cette partie du code sont importantes pour enregistrer votre plugin auprès de WordPress. C'est ainsi que le répertoire du plugin saura quoi afficher pour votre plugin.

Maintenant, vous devrez faire quelques choses afin de relier tous les points, y compris :

Assurez-vous que votre URL Ajax est disponible pour votre script. Vous pouvez utiliser wp_localize_script() pour y parvenir.
Créez une classe plugin-name avec la classe Plugin-Name{} dans votre fichier plugin-name.php . C'est ici que vous définirez vos crochets d'action.
Créez une fonction JavaScript correspondante dans votre fichier plugin-name.js .

Un élément important de l'approche Ajax est de définir qui peut utiliser chaque fonction, en particulier lors de la création d'une interactivité frontale. Nous allons accrocher une action frontale avec un exemple de code de WordPress :

si ( est_admin() ) {
add_action( 'wp_ajax_my_frontend_action', 'my_frontend_action' );
add_action( 'wp_ajax_nopriv_my_frontend_action', 'my_frontend_action' );
add_action( 'wp_ajax_my_backend_action', 'my_backend_action' );
// Ajoutez d'autres crochets d'action back-end ici
} autre {
// Ajoutez ici des crochets d'action front-end non-Ajax
}

Prenons note de quelques éléments dans cet exemple. Tout d'abord, ces actions seront accessibles à tous sur le site, qu'ils soient connectés à un compte ou non. Cela est indiqué par l'appel 'wp_ajax_nonpriv_()'. Deuxièmement, vous pouvez voir qu'il y a aussi des actions administratives back-end qui sont accrochées pendant les actions front-end.

Pour comprendre le processus qui se déroule dans cet ensemble d'actions, il est également important de savoir que my_frontend_action déclenchera la fonction PHP my_frontend_action_callback().

Étape 4 : testez et déboguez votre plugin

Une fois que vous avez configuré tous les crochets d'action et les fonctions correspondantes dont vous avez besoin, vous voudrez tester et éventuellement déboguer votre plugin (s'il y a des problèmes). Votre hébergeur peut proposer un outil de débogage dans le cadre de son pack d'hébergement.

Chez WP Engine, nous fournissons le journal des erreurs de WP Engine pour vous aider à trouver les points problématiques.

Notre journal des erreurs fournit une présentation par code couleur de toutes les erreurs dans le code de votre site, et où elles interagissent avec nos serveurs ou d'autres parties de votre site. Cela facilite grandement le dépannage, que vous travailliez avec Ajax ou autre chose.

Explorez d'autres ressources et outils de moteur WP

Maintenant que vous êtes sur le point de créer d'incroyables plugins WordPress avec Ajax, vous voudrez peut-être évaluer les autres outils dont vous aurez besoin. WP Engine offre une plateforme d'expérience numérique complète (DXP) et est là pour vous aider à créer de nouveaux plugins pour WordPress.

Que vous soyez intéressé par notre journal d'erreurs WP Engine afin que vous puissiez exécuter un plugin sans bogue, ou que vous ayez simplement besoin d'un hébergement WordPress solide et sécurisé, nous vous proposons une grande variété de plans et de ressources à utiliser !